Перейти к основному содержимому

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-стилей, описанных в файле CSS.css DevTools-проекта или встроенных CSS-стилей Платформы. Пример: // CSS-стиль, определяющий внешние (m) и внутренние (p) отступы для компонента. Число после символа "-" (в этом примере - 4) должно быть кратно величине, указанной в параметре, определяющем кратность отступов, в файле Style.mdtheme DevTools-проекта CSS={["m-4", "p-4"]}

Тип: array

ChatHistoryMap​

Словарь с ключами, которые являются идентификаторами чатов, и значениями, которые являются массивами сообщений согласно установленному формату (см. описание компонента)

Тип: array

ChatId​

Псевдоним свойств InputChatId и OutputChatId

Тип: string

Chats​

Псевдоним свойств InputChats и OutputChats

Тип: array

CombineConfig​

Служебное свойство, используемое в визуальном режиме Редактора Форм, для присваивания значений свойствам компонента в виде генерируемых фрагментов кода. Запрещено изменять значение

Тип: object

ContextsList​

Массив контекстов поиска согласно установленному формату (см. описание компонента)

Тип: array

Hidden​

Признак состояния компонента Скрыт

Тип: boolean

Hint​

Текст, отображаемый при наведении указателя мыши на компонент. Текст отображается на белом фоне

Тип: any

Id​

Идентификатор компонента для навигации к нему на HTML-странице. Подробнее см. HTML id Attribute или ID

Тип: string

InputChatId​

Входной параметр компонента: идентификатор открытого чата

Тип: string

InputChats​

Входной параметр компонента: массив параметров чатов согласно установленному формату (см. описание компонента)

Тип: array

LocalizationDictionary​

Имя словаря для локализации строк в чате

Тип: string

MessagesDeclensionHandler​

Функция получения плюральной формы для строки с ключом MessageNumeral из словаря локализации LocalizationDictionary. В качестве параметров принимает число, которое должно быть согласовано со значением в MessageNumeral в текущей локали

Тип: undefined

MultiChat​

Признак организации нескольких чатов

Тип: boolean

Значение по умолчанию: True

OnChange​

Обработчик события изменения названия чата; в качестве параметра принимает идентификатор чата

Тип: undefined

OnClick​

Обработчик события нажатия левой кнопки мыши, когда указатель мыши находится на компоненте.

В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent. Пример:

OnClick={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnCreate​

Обработчик события создания чата

Тип: undefined

OnDelete​

Обработчик события удаления чата; в качестве параметра принимает идентификатор удаляемого чата

Тип: undefined

OnKeyDown​

Обработчик события нажатия любой клавиши клавиатуры. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа KeyboardEvent. Пример: OnKeyDown={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnKeyUp​

Обработчик события отпускания любой клавиши клавиатуры. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа KeyboardEvent. Пример: OnKeyUp={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnMouseDown​

Обработчик события нажатия любой кнопки мыши, когда указатель мыши находится на компоненте. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent. Пример: OnMouseDown={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnMouseEnter​

Обработчик события перемещения указателя мыши на компонент. Событие срабатывает только в случае, если указатель мыши находится за пределами компонента и пользователь перемещает указатель мыши внутрь компонента. Если указатель мыши в текущий момент находится внутри компонента, для срабатывания события пользователь должен переместить указатель мыши за пределы компонента, а затем обратно внутрь компонента. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent. Пример: OnMouseEnter={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnMouseLeave​

Обработчик события перемещения указателя мыши за пределы компонента. Событие срабатывает, только если указатель мыши находится внутри компонента, а пользователь перемещает указатель мыши за пределы компонента. Если указатель мыши в текущий момент находится за пределами компонента, для срабатывания события пользователь должен переместить указатель мыши внутрь компонента, а затем обратно за пределы компонента. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent. Пример: OnMouseLeave={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnMouseMove​

Обработчик события наведения указателя мыши на компонент. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent. Пример: OnMouseMove={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnMouseOut​

Обработчик события перемещения указателя мыши за пределы компонента. Когда пользователь наводит указатель мыши на компонент, происходит одно событие MouseOver, за которым следует одно или несколько событий MouseMove, когда пользователь перемещает указатель мыши внутри компонента. Одно событие MouseOut возникает, когда пользователь выводит указатель мыши за пределы компонента. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent. Пример: OnMouseOut={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnMouseOver​

Обработчик события перемещения указателя мыши на компонент. Событие возникает, когда пользователь наводит указатель мыши на компонент, и не повторяется до тех пор, пока пользователь не выведет указатель мыши за пределы компонента и затем не вернет его обратно. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent. Пример: OnMouseOver={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnMouseUp​

Обработчик события отпускания кнопки мыши, когда указатель мыши находится на компоненте. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent. Пример: OnMouseUp={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnRequest​

Обработчик события отправки запроса к языковой модели; в качестве параметра принимает объект с полями query (запрос), chatId (идентификатор чата), parameters (параметры запроса)

Тип: undefined

OnSelect​

Обработчик события выбора чата; в качестве параметра принимает идентификатор выбранного чата

Тип: undefined

OnSettingsClick​

Обработчик события нажатия по кнопке настроек

Тип: undefined

OnUnmount​

Обработчик события размонтирования согласно жизненному циклу экранной формы. Не имеет параметров. Пример:

OnUnmount={() => { // Отмена выполнения периодического действия при размонтировании экранной формы return clearInterval(getValue("pleerInterval")) } }

Тип: undefined

OutputChatId​

Выходной параметр компонента: идентификатор открытого чата

Тип: string

OutputChats​

Выходной параметр компонента: массив параметров чатов согласно установленному формату (см. описание компонента)

Тип: array

SendOnEnter​

Признак назначения клавиши "Enter" для отправки сообщения в чат и комбинации клавиш "Shift+Enter" для переноса сообщения на следующую строку

Тип: boolean

Значение по умолчанию: True

Slot​

Именованное пространство во фрагменте экранной формы.

Тип: string

ThinkModeAvailable​

Признак отображения переключателя режима Think

Тип: boolean

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&gt; 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"
    }
  ]
},
"ContextsList": [
  {
    "id": "docs",
    "name": "docs",
    "files": 6,
    "available": true
  },
  {
    "id": "test",
    "name": "test",
    "files": 1,
    "available": true
  },
  {
    "id": "broken",
    "name": "broken",
    "files": 0,
    "available": false
  },
  {
    "id": "test2",
    "name": "test2",
    "files": 4,
    "available": true
  },
  {
    "id": "LNA",
    "name": "LNA",
    "files": 12,
    "available": true
  },
  {
    "id": "uploadfiles",
    "name": "uploadfiles",
    "files": 22,
    "available": true
  },
  {
    "id": "big one",
    "name": "big one",
    "files": 123,
    "available": true
  }
],
    
}

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 }
        });
      }}
      ContextsList-var="ContextsList"
      OnSettingsClick={() => {
        Alert("Chat Settings");
      }}
      LocalizationDictionary="FrontendProject"
  />
</Group>