Skip to content

Commit f5117fe

Browse files
harshilp24harshilp24
committed
widget+askai
1 parent 4d4a9e3 commit f5117fe

33 files changed

+10029
-22
lines changed

‎website/docs/build-apps/widgets/reference/AIChat.md‎

Lines changed: 210 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,210 @@
1+
---
2+
title: AI Chat
3+
hide_title: true
4+
toc_max_heading_level: 2
5+
---
6+
<!-- vale off -->
7+
8+
<div className="tag-wrapper">
9+
<h1>AI Chat (AI Assistant)</h1>
10+
11+
<Tags
12+
tags={[
13+
{ name: "Business", link: "https://www.appsmith.com/pricing", additionalClass: "business" }
14+
]}
15+
/>
16+
17+
18+
</div>
19+
20+
<!-- vale on -->
21+
22+
This page provides information on using the AI Chat Widget *(available in AI Assistant Apps)*, which allows users to interact with AI models using the Appsmith AI Datasource.
23+
24+
The widget automatically creates an Appsmith AI query, which you can configure to provide additional context to the model by integrating data from various platforms (e.g., Zendesk, Salesforce, etc.)
25+
26+
27+
28+
<ZoomImage
29+
src="/img/appsmith-ai.gif"
30+
alt=""
31+
caption=""
32+
/>
33+
34+
35+
## Content Properties
36+
37+
These properties are customizable options present in the property pane of the widget, allowing users to modify the widget according to their preferences.
38+
39+
### Data
40+
41+
These properties allow you to set and manage data for the AI Chat widget.
42+
43+
#### Chat Query
44+
45+
<dd>
46+
47+
When the Chat widget is added to the canvas, a default AI Chat Query is automatically created to process messages. This query contains the main logic and data required for the Chat widget to function. You can change this query by selecting a different one from the Chat Query dropdown in the widget's property pane.
48+
49+
In the query, you can upload files or connect to various platforms like Zendesk, Salesforce, Google, etc., to provide data. However, you can only connect a query from the Appsmith AI datasource with the [AI Chat Assistant](/connect-data/integrations/appsmith-ai#ai-chat-assistant) as a command.
50+
51+
</dd>
52+
53+
### General
54+
55+
General properties are essential configurations that provide overall control over the widget's behavior and appearance.
56+
57+
#### Description
58+
59+
<dd>
60+
61+
The Description property allows you to add text that guides users on how to use the Chat widget. This section can include instructions, context, or any additional information to help users interact with the chat effectively. You can also use `{{}}` to dynamically display data from JavaScript functions or queries.
62+
63+
When users click on the info icon in the Chat widget, a modal is displayed showing this description, providing additional guidance or context.
64+
65+
66+
</dd>
67+
68+
69+
#### Placeholder
70+
71+
<dd>
72+
73+
The Placeholder property allows you to add placeholder text to the message input box of the Chat widget. This text serves as a hint or example to guide users on what type of input is expected. The placeholder disappears when users start typing in the input box.
74+
75+
You can also use `{{}}` to dynamically generate placeholder text based on data from JavaScript functions or queries.
76+
77+
</dd>
78+
79+
#### Initial Assistant Suggestions
80+
81+
<dd>
82+
83+
The Initial Assistant Suggestions property allows you to define a set of pre-defined prompts that appear when the chat starts. These prompts help users by providing suggestions on what they can ask or interact with next. Each suggestion consists of a label (the text shown to the user) and a value (the underlying data that triggers specific actions or responses). When a user clicks on a prompt, the associated value is sent to the AI to initiate a response.
84+
85+
*Format*:
86+
87+
```JS
88+
[
89+
{ "label": "Create support dashboard", "value": "How do I build a support dashboard?" },
90+
{ "label": "View account settings", "value": "How can I update my account information?" }
91+
]
92+
```
93+
94+
You can use JavaScript to dynamically generate these suggestions. For example, the `map()` function can be used to create suggestions from an array of data.
95+
96+
```JS
97+
{{usersAPI.data.map(suggestion => ({
98+
label: suggestion.title,
99+
value: suggestion.description
100+
}))}}
101+
```
102+
103+
</dd>
104+
105+
106+
#### Visible `boolean`
107+
108+
<dd>
109+
110+
Controls the visibility of the widget. If you turn off this property, the widget is not visible in View Mode. Additionally, you can use JavaScript by clicking on **JS** next to the **Visible** property to control the widget's visibility conditionally.
111+
112+
For example, if you want to make the widget visible only when the user selects "Yes" from a Select widget, you can use the following JavaScript expression:
113+
```js
114+
{{Select1.selectedOptionValue === "Yes"}}
115+
```
116+
117+
</dd>
118+
119+
### Assistant
120+
121+
These properties allow you to configure the name and description of the Chat widget.
122+
123+
#### Assistant Name
124+
125+
<dd>
126+
127+
The Assistant Name property allows you to define the name displayed for the AI Assistant in the chat widget. This name appears at the top of the chat interface, helping users identify the assistant they are interacting with.
128+
129+
130+
</dd>
131+
132+
#### Initial message
133+
134+
<dd>
135+
136+
The Initial Message property sets the default message displayed to users when the chat widget is loaded. This message appears below the chat title and provides context or a starting point for the user.
137+
138+
You can use static text or bind dynamic data using `{{}}` to tailor the message.
139+
140+
```js
141+
Hello, {{appsmith.user.email}}. How can we help you today?
142+
```
143+
144+
</dd>
145+
146+
147+
## Style properties
148+
Style properties allow you to change the look and feel of the widget.
149+
150+
### General
151+
152+
General properties are essential configurations that provide overall control over the widget's behavior and appearance.
153+
154+
155+
#### Height
156+
157+
<dd>
158+
159+
This property controls the vertical size of the Chat widget:
160+
161+
- Medium
162+
- Large
163+
- Fit to Page
164+
165+
You can also set it dynamically using JavaScript with `{{}}`, and apply values like `MEDIUM`, `LARGE`, or `FIT_PAGE`.
166+
167+
</dd>
168+
169+
170+
## Reference properties
171+
172+
Reference properties are properties that are not available in the property pane but can be accessed using the dot operator in other widgets or JavaScript functions. They provide additional information or allow interaction with the widget programmatically. For instance, to get the visibility status, you can use `AIChat1.isVisible`.
173+
174+
175+
#### isVisible `boolean`
176+
177+
<dd>
178+
179+
The `isVisible` property indicates the visibility state of a widget, with true indicating it is visible and false indicating it is hidden.
180+
181+
*Example:*
182+
```js
183+
{{AIChat1.isVisible}}
184+
```
185+
186+
</dd>
187+
188+
## Methods
189+
190+
Widget property setters enable you to modify the values of widget properties at runtime, eliminating the need to manually update properties in the editor.
191+
192+
These methods are asynchronous, and you can use the `.then()` block to ensure execution and sequencing of subsequent lines of code in Appsmith.
193+
194+
195+
#### setVisibility `boolean`
196+
197+
<dd>
198+
199+
Sets the visibility of the widget.
200+
201+
*Example*:
202+
203+
```js
204+
AIChat1.setVisibility(true).then(() => {
205+
// code to be executed after visibility is set
206+
})
207+
208+
```
209+
210+
</dd>

0 commit comments

Comments
 (0)