Setting Properties of the AI Assistant Widget

Data Binding

Basic Properties

After basic properties are bound through data, the values of the bound data are used during running.

• Name: Set the name of the AI assistant. Default value: AI Assistant.
• Logo: Set the logo for the AI assistant. Recommended formats: JPG, JPEG, PNG, GIF. Maximum image size: 50 MB.
• Content Area Background: Set the content area background image for the AI assistant. Recommended formats: JPG, JPEG, PNG, GIF. Maximum image size: 50 MB.
  Figure 4 Content area
  
• Placeholder: Set the placeholder of the input card for the AI assistant.
  Figure 5 Placeholders
  
• Welcome Message: Set the greeting of the AI assistant widget.
  Figure 6 Greetings
  
• Show Shortcuts: Whether to display shortcuts. It is enabled by default. After this function is enabled, you need to set the shortcut.
• Shortcuts: Set shortcuts to improve efficiency and simplify operations. When Show Shortcuts is enabled, this parameter must be set to a JSON string.
  Figure 7 Shortcuts
  

  [
      {
          "key": "text abstract",
          "label": "Text Abstract",
          "desc": "What are the advantages of low-code"
      },
      {
          "key": "keyword extraction",
          "label": "Keyword Extraction",
          "desc": "Extract keywords from the document for me"
      },
      {
          "key": "text translation",
          "label": "Text Translation",
          "desc": "Translate a sentence for me"
      }
  ]

• Show Suggested Questions: Specifies whether to display Suggested Questions on the AI assistant UI. This function is enabled by default. After this function is enabled, you need to set the questions.
• Suggested Questions: Set questions users might ask to help them quickly find relevant content. When Show Suggested Questions is enabled, this parameter must be set to a JSON string.
  Figure 8 Suggested questions
  

  [
      {
          "label": "Typical Usage Scenarios of Low-Code",
          "value": "Lightweight app building, no-code app building, and industry app building"
      },
      {
          "label": "What Are the Advantages of Low-Code"
          "value": "Lower the application building threshold, accelerate agile service innovation, and support large-scale enterprise application building."
      }
  ]

• Description: Set the AI assistant's description in JSON format.
  Figure 9 Description
  

  [
      "AI assistant's description",
      "Develops code, searches for knowledge and task info, and creates documentation."
  ]

• Show Likes: Show likes in the answer area. By default, this function is disabled.
• Show Dislikes: Show dislikes in the answer area. By default, this function is disabled.
• Show Chat History: Show older dialogs. By default, this function is enabled. After enabling this function, developers can view common user questions.
  Figure 10 Chat history
  
• Chats: Shows the historical dialog list, which must be in JSON format.
  Figure 11 Historical dialog list
  

  [
      {
          "id": 15453742,
          "sessionId": "c19809****202a4dab1",
          "title": "title",
          "createTime": "2025-03-31 17:37:46",
          "updateTime": "2025-04-01 19:47:14",
          "messages": []
      }
  ]

• Terms of Use Link: Add link if you want to display your terms of use.
  Figure 12 Effect after setting the terms of use link
  
• Privacy Statement Link: Add link if you want to display your privacy statement.
  Figure 13 Effect after setting the privacy statement link
  

Advanced Properties

• Knowledge: Whether to use the knowledge base. By default, this function is disabled. If you have a large number of documents that are hard to use and query efficiency is low, the AI assistant can call the foundation model API to get answers. Additionally, RAG technology works with the knowledge base to provide a more intelligent and natural dialog experience, improving the accuracy and relevance of information retrieval.
  To enable the function of building a knowledge base, submit a service ticket.

  Figure 14 Enabling the knowledge base
  
• Show Model: Whether to enable connection to the foundation model connector. This function is disabled by default. To enable it, you need to first configure the foundation model connection details in the connector and select the corresponding connector in the AI assistant widget. For details about how to create a foundation model connector, see Using a Connector to Call a Foundation Model.
  Figure 15 Enabling the Show Model function
  
• Default Model: Click Set Default Model and add the created foundation model connector.
• Temperature: Controls how random the output is. The higher this setting, the more random the results.
• Diversity: Returns content whose probability sum is greater than or equal to top_p and controls how diversified the output is. The higher this setting, the more diverse the results. top_p is the name of the foundation model core sampling parameter.
• Repetition Penalty: 0 indicates no penalty. Positive: discourages repetition. Negative: encourages repetition

Common

• Name: Name of the current widget.
• Hid: Whether to hide the widget. In this mode, the widget is statically hidden. You can set this property to a Boolean model field. By controlling the value of this field in custom JavaScript code, you can dynamically determine whether to hide the widget. This dynamic setting has the highest priority.

Style

• Layout: Set the width and height of the widget.
• Font: Set the font size, style, and color.
• Background: Set the background color and transparency.
• Border: Set the border color and width. The unit can be px, em, or %.
• Shadow: Set the shadow color and style. The units px, em, and % are supported.
• Advance
  • Style Code: Style code of the widget. After the widget style is set, the style code is automatically displayed in this area. You can also customize the style code to configure the widget in detail. The customized code can be entered in multiple lines and the style parameters are highlighted.
  • Style Class: Name of the CSS style class of the widget, which can be referenced in the CSS code.

Event

Click the AI assistant widget and add events for the widget on the Events tab page.

Figure 16 Adding an event

// Current widget
const _component = context.$component.current;
// Obtain the current conversation data.
const messages = _component.getMessages()
console.log(messages );

// Current widget
const _component = context.$component.current;
// Obtain the data of the current operation column.
const currentRecord = _component.getCurrentRecord();
console.log(currentRecord);

// Current widget
const _component = context.$component.current;
// Obtain the content of the clicked item.
var currentChat = _component.getCurrentHistoryData();
console.log(currentChat );

// Current widget
const _component = context.$component.current;
// Obtain the content of the clicked item.
var currentChat = _component.getCurrentHistoryData();
console.log(currentChat );

// Obtain the data to be deleted based on the current widget.
const _component = context.$component.current;
const currentData = _component.getCurrentHistoryData();

// Current widget
const _component = context.$component.current;
// Obtain the data of the current operation column.
const currentRecord = _component.getCurrentRecord();
console.log(currentRecord);

// Current widget
const _component = context.$component.current;
// Obtain the modified data.
const currentRecord = _component.getCurrentRecord();
console.log(currentRecord);

// Current widget
const _component = context.$component.current;
// Obtain the current conversation data.
const messages = _component.getMessages()
console.log(messages );