AiChat

Отображает чат с языковой моделью

Используется для взаимодействия с большой языковой моделью. Представляет собой окно с чатом и боковой панелью для выбора истории чата (при значении true свойства MultiChat). Отправка запросов и получение ответов от большой языковой модели является зоной ответственности разработчика и выполняется обработчиком события OnRequest.

Массив параметров чатов должен иметь следующий формат:

  [
    {
      "id": "0d536d5a",
      "title": "Мой новый чат",
      "count": 4,
      "lastMessage": "2024-07-22T13:08:18.958155",
      "parameters": {
        "server": "http://llm02.pub.dmz.cifrum.local:8000",
        "model": "openchat-3.5",
        "filterQueryByLlm": true,
        "historyLength": 0,
        "retriever": "lexer",
        "retrieverParams": {
          "lexMode": null,
          "lexK": 8
        }
      }
    },
  ]

Массив истории сообщений чата должен иметь следующий формат:

{
  "id0": [
    {
      "role": "human",
      "content": "Можно ли использовать Платформу на мобильных устройствах?",
      "timestamp": "2024-07-22T13:08:06.420996"
    },
    {
      "role": "ai",
      "content": "Да, Платформа может быть использована на мобильных устройствах. 
        Она поддерживает различные мобильные платформы, такие как iOS и Android, и позволяет создавать мобильные приложения с использованием своих инструментов и технологий. 
        Это позволяет разработчикам создавать мобильные приложения, которые могут быть запущены на различных мобильных устройствах.",
      "timestamp": "2024-07-22T13:08:06.421111"
    },
  ],
  "id1": []
}

Пример использования

  <AiChat
    Chats={ [ { id: "0", title: "New chat", parameters: {} } ] }
    MultiChat={true}
    OnRequest={() => { const { query, chatId, parameters } = getEvent(); }}
  />

Свойства

Имя	Описание	Тип	Значение по умолчанию	Возможные значения
Badge	Количественная информация в компонентах Menu, Accordion, Link, Text. В качестве значения может использоваться объект с полями: counter (число), position ("post" или "pre"), color (цвет)	any
CSS	Массив строк-классов CSS-стилей компонента	array
ChatHistoryMap	Словарь с ключами - идентификаторами чатов и значениями - массивами сообщений согласно установленному формату (см. описание компонента)	array
ChatId	Псевдоним свойств InputChatId и OutputChatId	string
Chats	Псевдоним свойств InputChats и OutputChats	array
CombineConfig	Конфигурация всех событий компонента. Служебное свойство для генерации фрагментов кода в визуальном режиме редактора форм. Не рекомендуется указывать значение вручную	object
Hidden	Признак состояния компонента Скрыт	boolean	False
Hint	Всплывающая подсказка над компонентом, чаще используемая для подробного пояснения краткого текста	any
Id	Идентификатор компонента для навигации к нему на HTML-странице	string
InputChatId	Входной параметр компонента: идентефикатор открытого чата	string
InputChats	Входной параметр компонента: массив параметров чатов согласно установленному формату (см. описание компонента)	array
LocalizationDictionary	Имя словаря для локализации надписей в чате	string
MessagesDeclensionHandler	Функция изменения значения по ключу MessageNumeral из словаря. В качестве параметра принимает количество сообщений и значение MessageNumeral в текущей локали; должна возвращащать измененную строку	undefined
MultiChat	Признак организации нескольких чатов	boolean	True
OnChange	Обработчик события изменения названия чата; в качестве параметра принимает идентефикатор чата	undefined
OnClick	Обработчик события нажатия кнопки мыши	undefined
OnCreate	Обработчик события создания чата	undefined
OnDelete	Обработчик события удаления чата; в качестве параметра принимает идентефикатор удаляемого чата	undefined
OnKeyDown	Обработчик события KeyDown	undefined
OnKeyUp	Обработчик события KeyUp	undefined
OnMouseDown	Обработчик события MouseDown	undefined
OnMouseEnter	Обработчик события MouseEnter	undefined
OnMouseLeave	Обработчик события MouseLeave	undefined
OnMouseMove	Обработчик события MouseMove	undefined
OnMouseOut	Обработчик события MouseOut	undefined
OnMouseOver	Обработчик события MouseOver	undefined
OnMouseUp	Обработчик события MouseUp	undefined
OnRequest	Обработчик события запроса к языковой модели; в качестве параметра принимает объект с полями query (запрос), chatId (идентефикатор чата), parameters (параметры запроса)	undefined
OnSelect	Обработчик события выбора чата; в качестве параметра принимает идентефикатор выбранного чата	undefined
OnUnmount	Обработчик события Unmount	undefined
OutputChatId	Выходной параметр компонента: идентефикатор открытого чата	string
OutputChats	Выходной параметр компонента: массив параметров чатов согласно установленному формату (см. описание компонента)	array
SendOnEnter	Признак назначения комбинаций клавиш "Enter" и "Shift+Enter"	boolean	True
Slot	Метка для динамического добавления другого компонента по его идентификатору	string
Tooltip	Всплывающая подсказка над компонентом, чаще используемая для пояснения назначения значка	any
TraceId	Идентификатор для отслеживания состояния компонента исходя из хронологической последовательности: создание, отрисовка, обновление, удаление; используется для выполнения фрагмента кода по изменению состояния компонента	string
Visible	Признак инверсии состояния компонента Скрыт	boolean	True

Примеры

Данные:

  
"Chats": [
  {
    "id": "0",
    "title": "Мой новый чат",
    "count": 4,
    "lastMessage": "2024-07-22T13:08:18.958155",
    "parameters": {
      "server": "http://llm02.pub.dmz.cifrum.local:8000",
      "model": "openchat-3.5",
      "filterQueryByLlm": true,
      "historyLength": 0,
      "retriever": "lexer",
      "retrieverParams": {
        "lexMode": null,
        "lexK": 8
      }
    }
  },
  {
    "id": "1",
    "title": "Еще чат",
    "count": 2,
    "lastMessage": "2024-07-22T13:08:18.958155",
    "parameters": {
      "server": "http://llm02.pub.dmz.cifrum.local:8000",
      "model": "openchat-3.5",
      "filterQueryByLlm": true,
      "historyLength": 0,
      "retriever": "lexer",
      "retrieverParams": {
        "lexMode": null,
        "lexK": 8
      }
    }
  }
],
"ChatId": '0',
"HistoryMap": {
  "0": [
    {
      "role": "human",
      "content": "Можно ли использовать Платформу на мобильных устройствах?",
      "timestamp": "2024-07-22T13:08:06.420996"
    },
    {
      "role": "ai",
      "content": "Да, Платформа может быть использована на мобильных устройствах. Она поддерживает различные мобильные платформы, такие как iOS и Android, и позволяет создавать мобильные приложения с использованием своих инструментов и технологий. Это позволяет разработчикам создавать мобильные приложения, которые могут быть запущены на различных мобильных устройствах.",
      "timestamp": "2024-07-22T13:08:06.421111"
    },
    {
      "role": "human",
      "content": "Как настроить доступ разных пользователей к различным функциям моего приложения?",
      "timestamp": "2024-07-22T13:08:18.957967"
    },
    {
      "role": "ai",
      "content": "Для настройки доступа разных пользователей к различным функциям моего приложения, можно использовать группы объектов и правила для ролей пользователей.\n\n1. Создайте группы объектов для объектов, которые вы хотите предоставить доступ на различных уровнях. Например, вы можете создать группы объектов для компонентов экранной формы, классов модели данных и т.д.\n2. Добавьте объекты в созданные группы.\n3. Создайте роли пользователей, которые будут иметь доступ к этим группам объектов.\n4. Создайте правила для ролей пользователей, определяющие доступ к функциям приложения. Например, вы можете создать правило для доступа к договорам в статусе "завершен" и суммой "более 2 миллионов":\n```C#\n.State == State.Done &&.Sum > 2000000\n```\n5. Назначьте роли пользователей к группам объектов, для которых они имеют доступ.\n\nТаким образом, вы сможете настроить доступ разных пользователей к различным функциям моего приложения, определяя правила для ролей пользователей и назначая их к группам объектов.",
      "timestamp": "2024-07-22T13:08:18.958155"
    }
  ],
  "1": [
    {
      "role": "human",
      "content": "Как назначить действие на кнопку?",
      "timestamp": "2024-07-18T23:18:01.510334"
    },
    {
      "role": "ai",
      "content": "Для назначения действия на кнопку, вы можете использовать инструкцию `SetAction`. Эта инструкция назначает действие на кнопку, указанную в файле с расширением `mdcontainer`.\n\nВот пример инструкции `SetAction`:\n```\nSetAction(\n    Container="MyScreenForm",\n    Component="MyButton",\n    Action="MyAction"\n)\n```\nВ этом примере кнопка "MyButton" на экранной форме "MyScreenForm" получает действие "MyAction".\n\nПосле назначения действия на кнопку, вы можете отредактировать файл с расширением `mdcontainer` для этой экранной формы, чтобы добавить код для обработки событий кнопки. Например, вы можете добавить код для выполнения определенных действий при нажатии на кнопку.\n\nТакже вы можете использовать инструкцию `CreateDataSource` для определения источника данных, который будет связан с кнопкой. Это позволит применять действия к кнопке и выполнять запросы данных с помощью GraphQL-запросов или бэкенд-сервисов Платформы",
      "timestamp": "2024-07-18T23:18:01.511336"
    }
  ]
}
    
}

JSX:

<Group Height="80vh">
  <AiChat
      Chats-var="Chats"
      ChatId-var="ChatId"
      ChatHistoryMap-var="HistoryMap"
      MultiChat={true}
      SidebarHeaderDesc="Ваш умный помощник"
      OnCreate={() => {
        const chats = getValue("Chats")
        
        const newChatItem = {
          id: (Number(chats[chats.length - 1].id) + 1).toString(),
          title: 'Новый разговор'
        };
        
        setState({
          "Chats": [...chats, newChatItem],
          "ChatId": newChatItem.id,
          "HistoryMap": {...getValue("HistoryMap"), [newChatItem.id]: []}
        });
      }}
      OnRequest={async () => {
        const { query, chatId, parameters } = getEvent();
        
        const historyMap = getValue("HistoryMap");
        historyMap[chatId].push({
          role: 'human',
          content: query,
          timestamp: new Date()
        });
        
        // Обновление истории через создание новой копии обязательно в целях корректной работы
        setState({
          "HistoryMap": { ...historyMap }
        });
        
        if (query === "error") {
          historyMap[chatId].push({
            role: 'error',
            content: "Demo error",
            timestamp: new Date()
          });
        } else {
          await new Promise(resolve => setTimeout(resolve, 3000));
          
          historyMap[chatId].push({
            role: 'ai',
            content: "Demo response from LLM",
            timestamp: new Date()
          });
        }
        
        setState({
          "HistoryMap": { ...historyMap }
        });
      }}
      LocalizationDictionary="FrontendProject"
  />
</Group>