Skip to content

Commit aef0fac

Browse files
VijayakumarMariappanVijayakumarMariappan
authored
Merge pull request #1205 from syncfusion-content/FLUT-956813-Resolve-conflicts
FLUT-956813 - [Others] Resolved the conflicts in assist view and chat folder.
2 parents 1915456 + 243b0c8 commit aef0fac

38 files changed

+746
-735
lines changed

‎Flutter/ai-assistview/right-to-left.md‎

Lines changed: 161 additions & 133 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,25 @@
11
---
22
layout: post
3-
title: Placeholder in Flutter Chat widget | Syncfusion
4-
description: Learn here about the Right to Left(RTL) support in Syncfusion Flutter Chat (SfChat) widget and more.
3+
title: Placeholder in Flutter AIAssistView widget | Syncfusion
4+
description: Learn here about the RTL support in Syncfusion Flutter AIAssistView (SfAIAssistView) widget and more.
55
platform: flutter
6-
control: SfChat
6+
control: SfAIAssistView
77
documentation: ug
88
---
99

1010

11-
# Right To Left (RTL) in Flutter Chat (SfChat)
11+
# Right To Left (RTL) in Flutter AIAssistView (SfAIAssistView)
1212

1313

14-
Chat supports the right to left rendering for all the elements in the Chat widget.
14+
AIAssistView supports the right to left rendering for all the elements in the AIAssistView widget.
1515

1616
## RTL rendering ways
1717

1818
Right to left rendering can be switched in the following ways:
1919

20-
### Wrapping the SfChat with Directionality widget
20+
### Wrapping the SfAIAssistView with Directionality widget
2121

22-
To change the rendering direction from right to left, you can wrap the [`SfChat`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/SfChat-class.html) widget inside the [`Directionality`](https://api.flutter.dev/flutter/widgets/Directionality-class.html) widget and set the [`textDirection`](https://api.flutter.dev/flutter/widgets/Directionality/textDirection.html) property as [`TextDirection.rtl`](https://api.flutter.dev/flutter/dart-ui/TextDirection.html).
22+
To change the rendering direction from right to left, you can wrap the [`SfAIAssistView`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/assist_view/SfAIAssistView-class.html) widget inside the [`Directionality`](https://api.flutter.dev/flutter/widgets/Directionality-class.html) widget and set the [`textDirection`](https://api.flutter.dev/flutter/widgets/Directionality/textDirection.html) property as [`TextDirection.rtl`](https://api.flutter.dev/flutter/dart-ui/TextDirection.html).
2323

2424
{% tabs %}
2525
{% highlight dart hl_lines="5" %}
@@ -29,7 +29,7 @@ To change the rendering direction from right to left, you can wrap the [`SfChat`
2929
return Scaffold(
3030
body: Directionality(
3131
textDirection: TextDirection.rtl,
32-
child: SfChat(
32+
child: SfAIAssistView(
3333
//...
3434
),
3535
),
@@ -40,51 +40,73 @@ To change the rendering direction from right to left, you can wrap the [`SfChat`
4040
{% endtabs %}
4141

4242

43-
## RTL supported chat elements
43+
## RTL supported AIAssistView elements
4444

4545
### Placeholder
4646

47-
Right to left (RTL) rendering is supported for the [`placeholderBuilder`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/SfChat/placeholderBuilder.html) in the chat. The widget added in the placeholderBuilder will be rendered from right to left direction. But, the text widget or text entered in the widget will render from left to right direction.
47+
Right to left (RTL) rendering is supported for the [`placeholderBuilder`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/assist_view/SfAIAssistView/placeholderBuilder.html) in the AIAssistView. The widget added in the placeholderBuilder will be rendered from right to left direction. But, the text widget or text entered in the widget will render from left to right direction.
4848

4949
{% tabs %}
50-
{% highlight dart hl_lines="5 9" %}
51-
52-
@override
53-
Widget build(BuildContext context) {
54-
return Scaffold(
55-
body: Directionality(
56-
textDirection: TextDirection.rtl,
57-
child: SfChat(
58-
outgoingUser: '1010',
59-
messages: _messages,
60-
placeholderBuilder: (context) {
61-
return const Center(
62-
child: Row(
63-
mainAxisAlignment: MainAxisAlignment.center,
64-
children: [
65-
SizedBox(width: 10),
66-
Icon(
67-
size: 30,
68-
Icons.emoji_people_rounded,
69-
color: Colors.red,
70-
),
71-
SizedBox(width: 5),
72-
Text(
73-
'Start a conversation',
74-
style: TextStyle(
75-
color: Colors.deepPurple,
76-
fontSize: 16,
77-
fontWeight: FontWeight.bold,
78-
),
79-
),
80-
],
81-
),
82-
);
83-
},
84-
),
85-
),
86-
);
87-
}
50+
{% highlight dart hl_lines="5 10" %}
51+
52+
@override
53+
Widget build(BuildContext context) {
54+
return Scaffold(
55+
body: Directionality(
56+
textDirection: TextDirection.rtl,
57+
child: Padding(
58+
padding: const EdgeInsets.all(20.0),
59+
child: SfAIAssistView(
60+
messages: _messages,
61+
placeholderBuilder: (context) {
62+
return Column(
63+
mainAxisAlignment: MainAxisAlignment.center,
64+
children: [
65+
const Text(
66+
'Ask AI Anything',
67+
style: TextStyle(
68+
color: Colors.deepPurple,
69+
fontSize: 18,
70+
fontWeight: FontWeight.bold,
71+
),
72+
),
73+
const SizedBox(height: 20),
74+
Row(
75+
mainAxisAlignment: MainAxisAlignment.center,
76+
children: [
77+
OutlinedButton(
78+
onPressed: () {},
79+
child: const Row(
80+
mainAxisSize: MainAxisSize.min,
81+
children: [
82+
Text('Music'),
83+
SizedBox(width: 5),
84+
Icon(Icons.music_note)
85+
],
86+
),
87+
),
88+
const SizedBox(width: 5),
89+
OutlinedButton(
90+
onPressed: () {},
91+
child: const Row(
92+
mainAxisSize: MainAxisSize.min,
93+
children: [
94+
Text('Movies'),
95+
SizedBox(width: 5),
96+
Icon(Icons.movie_creation_rounded)
97+
],
98+
),
99+
),
100+
],
101+
),
102+
],
103+
);
104+
},
105+
),
106+
),
107+
),
108+
);
109+
}
88110

89111
{% endhighlight %}
90112
{% endtabs %}
@@ -94,27 +116,27 @@ Right to left (RTL) rendering is supported for the [`placeholderBuilder`](https:
94116

95117
### Composer
96118

97-
Right to left (RTL) rendering is supported for the [`composer`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/SfChat/composer.html) in the chat. Composer will be rendered from right to left direction. But, the text entered in the composer will render from the left to right in the composer.
119+
Right to left (RTL) rendering is supported for the [`composer`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/assist_view/SfAIAssistView/composer.html) in the AIAssistView. Composer will be rendered from right to left direction. But, the text entered in the composer will render from the left to right in the composer.
98120

99121
{% tabs %}
100-
{% highlight dart hl_lines="5 9" %}
122+
{% highlight dart hl_lines="5 8" %}
101123

102-
@override
103-
Widget build(BuildContext context) {
104-
return Scaffold(
105-
body: Directionality(
106-
textDirection: TextDirection.rtl,
107-
child: SfChat(
108-
outgoingUser: '1010',
109-
messages: _messages,
110-
composer: const ChatComposer(
124+
@override
125+
Widget build(BuildContext context) {
126+
return Scaffold(
127+
body: Directionality(
128+
textDirection: TextDirection.rtl,
129+
child: SfAIAssistView(
130+
messages: _messages,
131+
composer: const AssistComposer(
111132
decoration: InputDecoration(
112-
hintText: 'Enter Message here',
113-
)),
133+
hintText: 'Ask AI anything',
134+
),
135+
),
136+
),
114137
),
115-
),
116-
);
117-
}
138+
);
139+
}
118140

119141
{% endhighlight %}
120142
{% endtabs %}
@@ -125,91 +147,97 @@ Right to left (RTL) rendering is supported for the [`composer`](https://pub.dev/
125147

126148
### Action Button
127149

128-
Right to left (RTL) rendering is supported for the [`actionButton`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/SfChat/actionButton.html) in the chat. Action button will be rendered from right to left direction.
150+
Right to left (RTL) rendering is supported for the [`actionButton`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/assist_view/SfAIAssistView/actionButton.html) in the AIAssistView. Action button will be rendered from right to left direction.
129151

130152
{% tabs %}
131-
{% highlight dart hl_lines="5 9" %}
153+
{% highlight dart hl_lines="5 8" %}
132154

133-
@override
134-
Widget build(BuildContext context) {
135-
return Scaffold(
136-
body: Directionality(
137-
textDirection: TextDirection.rtl,
138-
child: SfChat(
139-
outgoingUser: '1010',
140-
messages: _messages,
141-
actionButton: ChatActionButton(
142-
onPressed: (value) {
143-
setState(() {
144-
_messages.add(
145-
ChatMessage(
146-
text: value,
147-
time: DateTime.now(),
148-
author: const ChatAuthor(
149-
id: '1010', name: 'Johnathan wick'),
150-
),
151-
);
152-
});
153-
},
155+
@override
156+
Widget build(BuildContext context) {
157+
return Scaffold(
158+
body: Directionality(
159+
textDirection: TextDirection.rtl,
160+
child: SfAIAssistView(
161+
messages: _messages,
162+
actionButton: AssistActionButton(
163+
onPressed: (String value) {
164+
// Handle the send button click action here.
165+
},
166+
),
154167
),
155168
),
156-
),
157-
);
158-
}
169+
);
170+
}
159171

160172
{% endhighlight %}
161173
{% endtabs %}
162174

163175
![Action Button RTL](images/rtl/action_button_rtl.gif)
164176

165177

166-
### Message Content
178+
### Conversation Area
167179

168-
Right to left (RTL) rendering is supported for [`Messages`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/ChatMessage-class.html) in the chat conversation area. In RTL mode, message content, header and suggestions will render the widget in right to left direction.
180+
Right to left (RTL) rendering is supported for both [`request`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/assist_view/AssistMessage/AssistMessage.request.html) and [`response`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/assist_view/AssistMessage/AssistMessage.response.html) [`Messages`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/assist_view/SfAIAssistView/messages.html) in the AIAssistView conversation area. In RTL mode, request and response message, header and suggestions will render the widget in right to left direction.
169181

170182
{% tabs %}
171-
{% highlight dart hl_lines="5 8" %}
172-
173-
@override
174-
Widget build(BuildContext context) {
175-
return Scaffold(
176-
body: Directionality(
177-
textDirection: TextDirection.rtl,
178-
child: SfChat(
179-
outgoingUser: '1010',
180-
messages: <ChatMessage>[
181-
ChatMessage(
182-
text: 'Hey, Any plans for today?',
183-
time: DateTime.parse('2025-03-21T10:02:00Z'),
184-
author: const ChatAuthor(
185-
id: '1010',
186-
name: 'Johnathan wick',
187-
avatar: AssetImage('assets/images/People_Circle23.png'),
188-
),
189-
),
190-
ChatMessage(
191-
text:
192-
"I'm thinking of watching a web series. Can you suggest some?",
193-
time: DateTime.parse('2025-03-21T10:03:00Z'),
194-
author: const ChatAuthor(
195-
id: '1020',
196-
name: 'John carter',
197-
avatar: AssetImage('assets/images/People_Circle5.png'),
198-
),
199-
suggestions: [
200-
const ChatMessageSuggestion(data: 'Peaky Blinders'),
201-
const ChatMessageSuggestion(data: 'Breaking Bad'),
202-
const ChatMessageSuggestion(data: 'Prison Break'),
203-
const ChatMessageSuggestion(data: 'Blacklist'),
204-
],
205-
),
206-
],
207-
),
208-
),
209-
);
210-
}
183+
{% highlight dart %}
184+
185+
final List<AssistMessage> _messages = <AssistMessage>[];
186+
187+
void _generativeResponse(String data) async {
188+
final String response = await _getAIResponse(data);
189+
setState(() {
190+
_messages.add(
191+
AssistMessage.response(
192+
data: response,
193+
time: DateTime.now(),
194+
suggestions: [
195+
const AssistMessageSuggestion(data: 'Provier'),
196+
const AssistMessageSuggestion(data: 'Riverpoad'),
197+
const AssistMessageSuggestion(data: 'Bloc'),
198+
const AssistMessageSuggestion(data: 'GetX'),
199+
],
200+
),
201+
);
202+
});
203+
}
204+
205+
Future<String> _getAIResponse(String data) async {
206+
String response = '';
207+
// Connect with your preferred AI to generate a response to the request.
208+
return response;
209+
}
210+
211+
@override
212+
Widget build(BuildContext context) {
213+
return Scaffold(
214+
body: Directionality(
215+
textDirection: TextDirection.rtl,
216+
child: SfAIAssistView(
217+
messages: _messages,
218+
actionButton: AssistActionButton(
219+
onPressed: (String data) {
220+
if (data.trim().isNotEmpty) {
221+
setState(() {
222+
_messages.add(
223+
AssistMessage.request(
224+
data: data,
225+
time: DateTime.now(),
226+
author: const AssistMessageAuthor(
227+
id: 'User ID', name: 'User name'),
228+
),
229+
);
230+
_generativeResponse(data);
231+
});
232+
}
233+
},
234+
),
235+
),
236+
),
237+
);
238+
}
211239

212240
{% endhighlight %}
213241
{% endtabs %}
214242

215-
![Message Content RTL](images/rtl/message_content_rtl.png)
243+
![Message Content RTL](images/rtl/conversation_area_rtl.gif)

0 commit comments

Comments
 (0)