diff --git a/Flutter/assistview/assistview-theme.md b/Flutter/AIAssistView/AIAssistview-theme.md similarity index 71% rename from Flutter/assistview/assistview-theme.md rename to Flutter/AIAssistView/AIAssistview-theme.md index e0c746358..36839a920 100644 --- a/Flutter/assistview/assistview-theme.md +++ b/Flutter/AIAssistView/AIAssistview-theme.md @@ -1,7 +1,7 @@ --- layout: post title: Theme in Flutter AssistView widget | Syncfusion -description: Learn here all about the Theme feature of Syncfusion Flutter Chat (SfAIAssistViewTheme) widget and how it enhances user interaction and customization. +description: Learn here all about Theme feature of Syncfusion Flutter AI AssistView (SfAIAssistViewTheme) widget and how it enhances user interaction and customization. platform: flutter control: SfAIAssistViewTheme documentation: ug @@ -9,7 +9,7 @@ documentation: ug # Theme in Flutter AssistView (SfAIAssistViewTheme) -This section explains the customization properties available in [`AssistThemeData`]. +This section explains the customization properties available in [`AssistThemeData`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfThemeData/assistThemeData.html). **Import the Chat library** @@ -25,7 +25,7 @@ Import the following library to use the assist theme data: ## Action button foreground color -The [`actionButtonForegroundColor`] property is used to specify the color for the default action button icon. +The [`actionButtonForegroundColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfAIAssistViewThemeData/actionButtonForegroundColor.html) property is used to specify the color for the default action button icon. {% tabs %} {% highlight Dart %} @@ -52,7 +52,7 @@ The [`actionButtonForegroundColor`] property is used to specify the color for th ## Action button background color -The [`actionButtonBackgroundColor`] property is used to specify the background color for the action button in its default state. +The [`actionButtonBackgroundColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfAIAssistViewThemeData/actionButtonBackgroundColor.html) property is used to specify the background color for the action button in its default state. {% tabs %} {% highlight Dart %} @@ -79,7 +79,7 @@ The [`actionButtonBackgroundColor`] property is used to specify the background c ## Action button focus color -The [`actionButtonFocusColor`] property is used to specify the background color for the action button when it is in the focused state. +The [`actionButtonFocusColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfAIAssistViewThemeData/actionButtonFocusColor.html) property is used to specify the background color for the action button when it is in the focused state. {% tabs %} {% highlight Dart %} @@ -106,7 +106,7 @@ The [`actionButtonFocusColor`] property is used to specify the background color ## Action button hover color -The [`actionButtonHoverColor`] property is used to specify the background color for the action button when it is hovered over. +The [`actionButtonHoverColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfAIAssistViewThemeData/actionButtonHoverColor.html) property is used to specify the background color for the action button when it is hovered over. {% tabs %} {% highlight Dart %} @@ -133,7 +133,7 @@ The [`actionButtonHoverColor`] property is used to specify the background color ## Action button splash color -The [`actionButtonSplashColor`] property is used to specify the color of the ripple effect when the action button is tapped. +The [`actionButtonSplashColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfAIAssistViewThemeData/actionButtonSplashColor.html) property is used to specify the color of the ripple effect when the action button is tapped. {% tabs %} {% highlight Dart %} @@ -160,7 +160,7 @@ The [`actionButtonSplashColor`] property is used to specify the color of the rip ## Action button disabled foreground color -The [`actionButtonDisabledForegroundColor`] property is used to specify the color of the text or icon on the action button when it is disabled. +The [`actionButtonDisabledForegroundColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfAIAssistViewThemeData/actionButtonDisabledForegroundColor.html) property is used to specify the color of the text or icon on the action button when it is disabled. {% tabs %} {% highlight Dart %} @@ -187,7 +187,7 @@ The [`actionButtonDisabledForegroundColor`] property is used to specify the colo ## Action button disabled background color -The [`actionButtonDisabledBackgroundColor`] property is used to specify the background color of the action button when it is disabled. +The [`actionButtonDisabledBackgroundColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfAIAssistViewThemeData/actionButtonDisabledBackgroundColor.html) property is used to specify the background color of the action button when it is disabled. {% tabs %} {% highlight Dart %} @@ -214,7 +214,7 @@ The [`actionButtonDisabledBackgroundColor`] property is used to specify the back ## Action button elevation -The [`actionButtonElevation`] property is used to specify the elevation of the action button in its default state. +The [`actionButtonElevation`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfAIAssistViewThemeData/actionButtonElevation.html) property is used to specify the elevation of the action button in its default state. {% tabs %} {% highlight Dart %} @@ -241,7 +241,7 @@ The [`actionButtonElevation`] property is used to specify the elevation of the a ## Action button focus elevation -The [`actionButtonFocusElevation`] property is used to specify the elevation of the action button when it is focused. +The [`actionButtonFocusElevation`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfAIAssistViewThemeData/actionButtonFocusElevation.html) property is used to specify the elevation of the action button when it is focused. {% tabs %} {% highlight Dart %} @@ -268,7 +268,7 @@ The [`actionButtonFocusElevation`] property is used to specify the elevation of ## Action button hover elevation -The [`actionButtonHoverElevation`] property is used to specify the elevation of the action button when it is hovered over. +The [`actionButtonHoverElevation`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfAIAssistViewThemeData/actionButtonHoverElevation.html) property is used to specify the elevation of the action button when it is hovered over. {% tabs %} {% highlight Dart %} @@ -295,7 +295,7 @@ The [`actionButtonHoverElevation`] property is used to specify the elevation of ## Action button highlight elevation -The [`actionButtonHighlightElevation`] property is used to specify the elevation of the action button when it is highlighted. +The [`actionButtonHighlightElevation`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfAIAssistViewThemeData/actionButtonHighlightElevation.html) property is used to specify the elevation of the action button when it is highlighted. {% tabs %} {% highlight Dart %} @@ -322,7 +322,7 @@ The [`actionButtonHighlightElevation`] property is used to specify the elevation ## Action button disabled elevation -The [`actionButtonDisabledElevation`] property is used to specify the elevation of the action button when it is disabled. +The [`actionButtonDisabledElevation`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfAIAssistViewThemeData/actionButtonDisabledElevation.html) property is used to specify the elevation of the action button when it is disabled. {% tabs %} {% highlight Dart %} @@ -349,7 +349,7 @@ The [`actionButtonDisabledElevation`] property is used to specify the elevation ## Action button mouse cursor -The [`actionButtonMouseCursor`] property is used to specify the type of cursor displayed when hovering over the action button. +The [`actionButtonMouseCursor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfAIAssistViewThemeData/actionButtonMouseCursor.html) property is used to specify the type of cursor displayed when hovering over the action button. {% tabs %} {% highlight Dart %} @@ -376,7 +376,7 @@ The [`actionButtonMouseCursor`] property is used to specify the type of cursor d ## Action button shape -The [`actionButtonShape`] property is used to specify the shape and border radius of the action button. +The [`actionButtonShape`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfAIAssistViewThemeData/actionButtonShape.html) property is used to specify the shape and border radius of the action button. {% tabs %} {% highlight Dart %} @@ -405,7 +405,7 @@ The [`actionButtonShape`] property is used to specify the shape and border radiu ## Request avatar background color -The [`requestAvatarBackgroundColor`] property is used to specify the background color of request message avatar. +The [`requestAvatarBackgroundColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfAIAssistViewThemeData/requestAvatarBackgroundColor.html) property is used to specify the background color of request message avatar. {% tabs %} {% highlight Dart %} @@ -432,7 +432,7 @@ The [`requestAvatarBackgroundColor`] property is used to specify the background ## Response avatar background color -The [`responseAvatarBackgroundColor`] property is used to specify the background color of response message avatar. +The [`responseAvatarBackgroundColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfAIAssistViewThemeData/responseAvatarBackgroundColor.html) property is used to specify the background color of response message avatar. {% tabs %} {% highlight Dart %} @@ -459,7 +459,7 @@ The [`responseAvatarBackgroundColor`] property is used to specify the background ## Request bubble content background color -The [`requestBubbleContentBackgroundColor`] property is used to specify the background color of bubbles containing request messages. +The [`requestBubbleContentBackgroundColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfAIAssistViewThemeData/requestBubbleContentBackgroundColor.html) property is used to specify the background color of bubbles containing request messages. {% tabs %} {% highlight Dart %} @@ -486,7 +486,7 @@ The [`requestBubbleContentBackgroundColor`] property is used to specify the back ## Response bubble content background color -The [`responseBubbleContentBackgroundColor`] property is used to specify the background color of bubbles containing response messages. +The [`responseBubbleContentBackgroundColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfAIAssistViewThemeData/responseBubbleContentBackgroundColor.html) property is used to specify the background color of bubbles containing response messages. {% tabs %} {% highlight Dart %} @@ -513,7 +513,7 @@ The [`responseBubbleContentBackgroundColor`] property is used to specify the bac ## Editor text style -The [`editorTextStyle`] property is used to specify the style for text in the message editor. +The [`editorTextStyle`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfAIAssistViewThemeData/editorTextStyle.html) property is used to specify the style for text in the message editor. {% tabs %} {% highlight Dart %} @@ -544,7 +544,7 @@ The [`editorTextStyle`] property is used to specify the style for text in the me ## Request content text style -The [`requestContentTextStyle`] property is used to specify the style for text in request message bubbles. +The [`requestContentTextStyle`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfAIAssistViewThemeData/requestContentTextStyle.html) property is used to specify the style for text in request message bubbles. {% tabs %} {% highlight Dart %} @@ -575,7 +575,7 @@ The [`requestContentTextStyle`] property is used to specify the style for text i ## Response content text style -The [`responseContentTextStyle`] property is used to specify the style for text in response message bubbles +The [`responseContentTextStyle`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfAIAssistViewThemeData/responseContentTextStyle.html) property is used to specify the style for text in response message bubbles {% tabs %} {% highlight Dart %} @@ -606,7 +606,7 @@ The [`responseContentTextStyle`] property is used to specify the style for text ## Request primary header text style -The [`requestPrimaryHeaderTextStyle`] property is used to specify the style for the primary header text in request message bubbles. +The [`requestPrimaryHeaderTextStyle`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfAIAssistViewThemeData/requestPrimaryHeaderTextStyle.html) property is used to specify the style for the primary header text in request message bubbles. {% tabs %} {% highlight Dart %} @@ -637,7 +637,7 @@ The [`requestPrimaryHeaderTextStyle`] property is used to specify the style for ## Response primary header text style -The [`responsePrimaryHeaderTextStyle`] property is used to specify the style for the primary header text in response message bubbles. +The [`responsePrimaryHeaderTextStyle`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfAIAssistViewThemeData/responsePrimaryHeaderTextStyle.html) property is used to specify the style for the primary header text in response message bubbles. {% tabs %} {% highlight Dart %} @@ -668,7 +668,7 @@ The [`responsePrimaryHeaderTextStyle`] property is used to specify the style for ## Request secondary header text style -The [`requestSecondaryHeaderTextStyle`] property is used to specify the style for the secondary header text in request message bubbles. +The [`requestSecondaryHeaderTextStyle`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfAIAssistViewThemeData/requestSecondaryHeaderTextStyle.html) property is used to specify the style for the secondary header text in request message bubbles. {% tabs %} {% highlight Dart %} @@ -699,7 +699,7 @@ The [`requestSecondaryHeaderTextStyle`] property is used to specify the style fo ## Response secondary header text style -The [`responseSecondaryHeaderTextStyle`] property is used to specify the style for the secondary header text in response message bubbles. +The [`responseSecondaryHeaderTextStyle`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfAIAssistViewThemeData/responseSecondaryHeaderTextStyle.html) property is used to specify the style for the secondary header text in response message bubbles. {% tabs %} {% highlight Dart %} @@ -730,7 +730,7 @@ The [`responseSecondaryHeaderTextStyle`] property is used to specify the style f ## Suggestion item text style -The [`suggestionItemTextStyle`] property is used to specify the text style for response message suggestion items. +The [`suggestionItemTextStyle`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfAIAssistViewThemeData/suggestionItemTextStyle.html) property is used to specify the text style for response message suggestion items. {% tabs %} {% highlight Dart %} @@ -785,7 +785,7 @@ The [`suggestionItemTextStyle`] property is used to specify the text style for r ## Request bubble content shape -The [`requestBubbleContentShape`] property is used to specify the shape and border radius of request message bubbles. +The [`requestBubbleContentShape`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfAIAssistViewThemeData/requestBubbleContentShape.html) property is used to specify the shape and border radius of request message bubbles. {% tabs %} {% highlight Dart %} @@ -814,7 +814,7 @@ The [`requestBubbleContentShape`] property is used to specify the shape and bord ## Response bubble content shape -The [`responseBubbleContentShape`] property is used to specify the shape and border radius of response message bubbles. +The [`responseBubbleContentShape`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfAIAssistViewThemeData/responseBubbleContentShape.html) property is used to specify the shape and border radius of response message bubbles. {% tabs %} {% highlight Dart %} @@ -843,7 +843,7 @@ The [`responseBubbleContentShape`] property is used to specify the shape and bor ## Suggestion background color -The [`suggestionBackgroundColor`] property is used to specify the background color of response message suggestion bubble. +The [`suggestionBackgroundColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfAIAssistViewThemeData/suggestionBackgroundColor.html) property is used to specify the background color of response message suggestion bubble. {% tabs %} {% highlight Dart %} @@ -870,7 +870,7 @@ The [`suggestionBackgroundColor`] property is used to specify the background col ## Suggestion background shape -The [`suggestionBackgroundShape`] property is used to specify the background shape of response message suggestion bubble. +The [`suggestionBackgroundShape`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfAIAssistViewThemeData/suggestionBackgroundShape.html) property is used to specify the background shape of response message suggestion bubble. {% tabs %} {% highlight Dart %} @@ -899,7 +899,7 @@ The [`suggestionBackgroundShape`] property is used to specify the background sha ## Suggestion item background color -The [`suggestionItemBackgroundColor`] property is used to specify the background color for response message suggestion items. +The [`suggestionItemBackgroundColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfAIAssistViewThemeData/suggestionItemBackgroundColor.html) property is used to specify the background color for response message suggestion items. {% tabs %} {% highlight Dart %} @@ -939,7 +939,7 @@ The [`suggestionItemBackgroundColor`] property is used to specify the background ## Suggestion item shape -The [`suggestionItemShape`] property is used to specify the shape for response message suggestion items. +The [`suggestionItemShape`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfAIAssistViewThemeData/suggestionItemShape.html) property is used to specify the shape for response message suggestion items. {% tabs %} {% highlight Dart %} @@ -989,7 +989,7 @@ The [`suggestionItemShape`] property is used to specify the shape for response m ## Response toolbar background color -The [`responseToolbarBackgroundColor`] property is used to specify the background color of response message toolbar bubble. +The [`responseToolbarBackgroundColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfAIAssistViewThemeData/responseToolbarBackgroundColor.html) property is used to specify the background color of response message toolbar bubble. {% tabs %} {% highlight Dart %} @@ -1016,7 +1016,7 @@ The [`responseToolbarBackgroundColor`] property is used to specify the backgroun ## Response toolbar background shape -The [`responseToolbarBackgroundShape`] property is used to specify the background shape of response message toolbar bubble. +The [`responseToolbarBackgroundShape`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfAIAssistViewThemeData/responseToolbarBackgroundShape.html) property is used to specify the background shape of response message toolbar bubble. {% tabs %} {% highlight Dart %} @@ -1045,7 +1045,7 @@ The [`responseToolbarBackgroundShape`] property is used to specify the backgroun ## Response toolbar item background color -The [`responseToolbarItemBackgroundColor`] property is used to specify the background color of response message toolbar items. +The [`responseToolbarItemBackgroundColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfAIAssistViewThemeData/responseToolbarItemBackgroundColor.html) property is used to specify the background color of response message toolbar items. {% tabs %} {% highlight Dart %} @@ -1086,7 +1086,7 @@ The [`responseToolbarItemBackgroundColor`] property is used to specify the backg ## Response toolbar item shape -The [`responseToolbarItemShape`] property is used to specify the shape of response message toolbar items. +The [`responseToolbarItemShape`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfAIAssistViewThemeData/responseToolbarItemShape.html) property is used to specify the shape of response message toolbar items. {% tabs %} {% highlight Dart %} @@ -1134,4 +1134,4 @@ The [`responseToolbarItemShape`] property is used to specify the shape of respon {% endhighlight %} {% endtabs %} ->You can refer to our [Flutter AssistView](https://www.syncfusion.com/flutter-widgets/flutter-chat) feature tour page for its groundbreaking feature representations. You can also explore our [Flutter AssistView example](https://flutter.syncfusion.com/#/chat/getting-started) which demonstrates conversations between two or more users in a fully customizable layout and shows how to easily configure the assist view with built-in support for creating stunning visual effects. \ No newline at end of file +>You can refer to our [`Flutter AI AssistView`](https://www.syncfusion.com/flutter-widgets/flutter-aiassistview) feature tour page for its groundbreaking feature representations. You can also explore our [`Flutter AI AssistView example`](https://flutter.syncfusion.com/#/ai-assist-view/getting-started) which demonstrates interaction between users and AI services in a fully customizable layout and shows how to easily configure the AI AssistView with built-in support for creating stunning visual effects. \ No newline at end of file diff --git a/Flutter/assistview/action-button.md b/Flutter/AIAssistView/action-button.md similarity index 52% rename from Flutter/assistview/action-button.md rename to Flutter/AIAssistView/action-button.md index a76669353..a1849a62a 100644 --- a/Flutter/assistview/action-button.md +++ b/Flutter/AIAssistView/action-button.md @@ -13,13 +13,13 @@ This section explains how to add and customize the action button using the vario ## Action button -The [`actionButton`] represents the send button and is not included in the chat by default. To add it, create an instance of [`AssistActionButton`] and assign it to the [`actionButton`] property. +The [`actionButton`](https://pub.dev/documentation/syncfusion_flutter_chat/28.1.33-beta/assist_view/SfAIAssistView/actionButton.html) represents the send button and is not included in the chat by default. To add it, create an instance of [`AssistActionButton`](https://pub.dev/documentation/syncfusion_flutter_chat/28.1.33-beta/assist_view/AssistActionButton-class.html) and assign it to the [`actionButton`](https://pub.dev/documentation/syncfusion_flutter_chat/28.1.33-beta/assist_view/SfAIAssistView/actionButton.html) property. The default action button is a send button. Pressing or clicking this button triggers a callback, allowing the user to request a response to their composed message from their preferred AI service. -If [`AssistComposer.builder`] is used, the parameter of onPressed will always be an empty string. +If [`AssistComposer.builder`](https://pub.dev/documentation/syncfusion_flutter_chat/28.1.33-beta/assist_view/AssistComposer/AssistComposer.builder.html) is used, the parameter of onPressed will always be an empty string. -If [`AssistActionButton.onPressed`] is null, the action button will always be disabled. +If [`AssistActionButton.onPressed`](https://pub.dev/documentation/syncfusion_flutter_chat/28.1.33-beta/assist_view/AssistActionButton/onPressed.html) is null, the action button will always be disabled. If the default composer is disabled, the action button will also be disabled. @@ -49,7 +49,7 @@ If no composer is added (by specifying the composer as null), the action button ### Child -The [child] property allows you to define a custom widget consisting of one or more interactive elements to serve as action buttons, such as a send button, microphone icon for voice input, file attachment button, or other interactive widgets. +The [child](https://pub.dev/documentation/syncfusion_flutter_chat/28.1.33-beta/assist_view/AssistActionButton/child.html) property allows you to define a custom widget consisting of one or more interactive elements to serve as action buttons, such as a send button, microphone icon for voice input, file attachment button, or other interactive widgets. {% tabs %} {% highlight dart %} @@ -76,7 +76,7 @@ The [child] property allows you to define a custom widget consisting of one or m ### onPressed callback -It is a callback that is invoked whenever the action button is pressed. Since the assist widget does not rebuild itself to update the newly composed message, it provides the default text from the composer as a parameter. The user can create a message object and include it in the existing [`messages`] list by rebuilding the assist widget to add the newly composed message to the conversational area. +It is a callback that is invoked whenever the action button is pressed. Since the assist widget does not rebuild itself to update the newly composed message, it provides the default text from the composer as a parameter. The user can create a message object and include it in the existing [`messages`](https://pub.dev/documentation/syncfusion_flutter_chat/28.1.33-beta/assist_view/SfAIAssistView/messages.html) list by rebuilding the assist widget to add the newly composed message to the conversational area. {% tabs %} {% highlight dart %} @@ -118,7 +118,7 @@ It is a callback that is invoked whenever the action button is pressed. Since th ### Tooltip -The [`tooltip`] text describes the button's action when pressed. It is displayed when the user long-presses on touch devices or hovers the mouse over it on desktop devices. By default, it is set to null, so no tooltip is shown. +The [`tooltip`](https://pub.dev/documentation/syncfusion_flutter_chat/28.1.33-beta/assist_view/AssistActionButton/tooltip.html) text describes the button's action when pressed. It is displayed when the user long-presses on touch devices or hovers the mouse over it on desktop devices. By default, it is set to null, so no tooltip is shown. {% tabs %} {% highlight dart %} @@ -145,15 +145,15 @@ The [`tooltip`] text describes the button's action when pressed. It is displayed ### Colors -The [`foregroundColor`] property is the color of the default send button icon. The default color is set to `colorScheme.onPrimary`. +The [`foregroundColor`](https://pub.dev/documentation/syncfusion_flutter_chat/28.1.33-beta/assist_view/AssistActionButton/foregroundColor.html) property is the color of the default send button icon. The default color is set to `colorScheme.onPrimary`. -The [`backgroundColor`] property is the color of the button's background. The default color is set to `colorScheme.primary`. +The [`backgroundColor`](https://pub.dev/documentation/syncfusion_flutter_chat/28.1.33-beta/assist_view/AssistActionButton/backgroundColor.html) property is the color of the button's background. The default color is set to `colorScheme.primary`. -The [`focusColor`] property will replace the background color when the button is in a focused state. The default color is set to `colorScheme.primary.withOpacity(0.86)`. +The [`focusColor`](https://pub.dev/documentation/syncfusion_flutter_chat/28.1.33-beta/assist_view/AssistActionButton/focusColor.html) property will replace the background color when the button is in a focused state. The default color is set to `colorScheme.primary.withOpacity(0.86)`. -The [`hoverColor`] property color will replace the background color when a pointer is hovering over the button. The default color is set to `colorScheme.primary.withOpacity(0.91)`. +The [`hoverColor`](https://pub.dev/documentation/syncfusion_flutter_chat/28.1.33-beta/assist_view/AssistActionButton/hoverColor.html) property color will replace the background color when a pointer is hovering over the button. The default color is set to `colorScheme.primary.withOpacity(0.91)`. -The [`splashColor`] property is the splash color of the button's InkWell. The default color is set to `colorScheme.primary.withOpacity(0.86)`. +The [`splashColor`](https://pub.dev/documentation/syncfusion_flutter_chat/28.1.33-beta/assist_view/AssistActionButton/splashColor.html) property is the splash color of the button's InkWell. The default color is set to `colorScheme.primary.withOpacity(0.86)`. {% tabs %} {% highlight dart %} @@ -184,13 +184,13 @@ The [`splashColor`] property is the splash color of the button's InkWell. The de ### Elevation -The [`elevation`] property is the size of the shadow below the action button in normal state. Defaults to `0.0`. +The [`elevation`](https://pub.dev/documentation/syncfusion_flutter_chat/28.1.33-beta/assist_view/AssistActionButton/elevation.html) property is the size of the shadow below the action button in normal state. Defaults to `0.0`. -The [`focusElevation`] property defines the elevation of the button when it has focus. Defaults to `0.0`. +The [`focusElevation`](https://pub.dev/documentation/syncfusion_flutter_chat/28.1.33-beta/assist_view/AssistActionButton/focusElevation.html) property defines the elevation of the button when it has focus. Defaults to `0.0`. -The [`hoverElevation`] property sets the elevation of the button when it is hovered over. Defaults to `0.0`. +The [`hoverElevation`](https://pub.dev/documentation/syncfusion_flutter_chat/28.1.33-beta/assist_view/AssistActionButton/hoverElevation.html) property sets the elevation of the button when it is hovered over. Defaults to `0.0`. -The [`highlightElevation`] property determines the elevation when the button is pressed. Defaults to `0.0`. +The [`highlightElevation`](https://pub.dev/documentation/syncfusion_flutter_chat/28.1.33-beta/assist_view/AssistActionButton/highlightElevation.html) property determines the elevation when the button is pressed. Defaults to `0.0`. {% tabs %} {% highlight dart %} @@ -220,7 +220,7 @@ The [`highlightElevation`] property determines the elevation when the button is ### Mouse cursor -The [`mouseCursor`] property defines the type of cursor that appears when hovering over the button. It can be set to different values to customize the cursor shape (e.g., [`SystemMouseCursors.click`], [`SystemMouseCursors.forbidden`], etc.). If not specified, the default cursor will be used. +The [`mouseCursor`](https://pub.dev/documentation/syncfusion_flutter_chat/28.1.33-beta/assist_view/AssistActionButton/mouseCursor.html) property defines the type of cursor that appears when hovering over the button. It can be set to different values to customize the cursor shape (e.g., [`SystemMouseCursors.click`](https://api.flutter.dev/flutter/services/SystemMouseCursors/click-constant.html), [`SystemMouseCursors.forbidden`](https://api.flutter.dev/flutter/services/SystemMouseCursors/forbidden-constant.html), etc.). If not specified, the default cursor will be used. {% tabs %} {% highlight dart %} @@ -247,7 +247,7 @@ The [`mouseCursor`] property defines the type of cursor that appears when hoveri ### Shape -The [`shape`] property sets the shape of the button's border, such as rounded or circular. By default, it is set to `RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(20.0)))`. +The [`shape`](https://pub.dev/documentation/syncfusion_flutter_chat/28.1.33-beta/assist_view/AssistActionButton/shape.html) property sets the shape of the button's border, such as rounded or circular. By default, it is set to `RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(20.0)))`. {% tabs %} {% highlight dart %} @@ -281,7 +281,7 @@ The [`shape`] property sets the shape of the button's border, such as rounded or ### Padding -The [`padding`] property defines the space inside the button between its border and the content. By default, it is set to `EdgeInsetsDirectional.only(start: 8.0)`. +The [`padding`](https://pub.dev/documentation/syncfusion_flutter_chat/28.1.33-beta/assist_view/AssistActionButton/padding.html) property defines the space inside the button between its border and the content. By default, it is set to `EdgeInsetsDirectional.only(start: 8.0)`. {% tabs %} {% highlight dart %} @@ -308,7 +308,7 @@ The [`padding`] property defines the space inside the button between its border ### Size -The [`size`] property specifies the width and height of the button. By default, it is set to `Size.square(40.0)`. +The [`size`](https://pub.dev/documentation/syncfusion_flutter_chat/28.1.33-beta/assist_view/AssistActionButton/size.html) property specifies the width and height of the button. By default, it is set to `Size.square(40.0)`. {% tabs %} {% highlight dart %} @@ -333,8 +333,8 @@ The [`size`] property specifies the width and height of the button. By default, {% endhighlight %} {% endtabs %} ->You can refer to our [Flutter Chat] feature tour page for its groundbreaking feature representations. You can also explore our [Flutter Chat example] which demonstrates conversations between two or more users in a fully customizable layout and shows how to easily configure the chat with built-in support for creating stunning visual effects. +>You can refer to our [`Flutter AI AssistView`](https://www.syncfusion.com/flutter-widgets/flutter-aiassistview) feature tour page for its groundbreaking feature representations. You can also explore our [`Flutter AI AssistView example`](https://flutter.syncfusion.com/#/ai-assist-view/getting-started) which demonstrates interaction between users and AI services in a fully customizable layout and shows how to easily configure the AI AssistView with built-in support for creating stunning visual effects. #### See Also -* You can also customize the above properties using [`SfAIAssistViewTheme`] by wrapping with [`SfAIAssistView`]. \ No newline at end of file +* You can also customize the above properties using [`SfAIAssistViewTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfAIAssistViewTheme-class.html) by wrapping with [`SfAIAssistView`](https://pub.dev/documentation/syncfusion_flutter_chat/28.1.33-beta/assist_view/SfAIAssistView-class.html). \ No newline at end of file diff --git a/Flutter/assistview/composer.md b/Flutter/AIAssistView/composer.md similarity index 57% rename from Flutter/assistview/composer.md rename to Flutter/AIAssistView/composer.md index a9ae91478..c1eea49f3 100644 --- a/Flutter/assistview/composer.md +++ b/Flutter/AIAssistView/composer.md @@ -9,18 +9,18 @@ documentation: ug # Composer in Flutter AI AssistView (SfAIAssistView) -This section explains the customization options available in [`AssistComposer`], including the option to add any type of widget as a composer. +This section explains the customization options available in [`AssistComposer`](https://pub.dev/documentation/syncfusion_flutter_chat/28.1.33-beta/assist_view/AssistComposer-class.html), including the option to add any type of widget as a composer. ## Default Composer -The default [`composer`] is a rounded rectangular text editor that allows users to compose request messages. You can customize its appearance by adding hint text, borders, prefix icons, suffix icons, and more. +The default [`composer`](https://pub.dev/documentation/syncfusion_flutter_chat/28.1.33-beta/assist_view/SfAIAssistView/composer.html) is a rounded rectangular text editor that allows users to compose request messages. You can customize its appearance by adding hint text, borders, prefix icons, suffix icons, and more. When the composer is null, no default text field is added to the AI AssistView widget. ### Minimum and maximum lines -* [`minLines`] specifies the minimum number of lines in the text span, which affects the height of the text field. -* [`maxLines`] defines the maximum number of lines for the text, determining how many lines are visible when the text wraps. +* [`minLines`](https://pub.dev/documentation/syncfusion_flutter_chat/28.1.33-beta/assist_view/AssistComposer/minLines.html) specifies the minimum number of lines in the text span, which affects the height of the text field. +* [`maxLines`](https://pub.dev/documentation/syncfusion_flutter_chat/28.1.33-beta/assist_view/AssistComposer/maxLines.html) defines the maximum number of lines for the text, determining how many lines are visible when the text wraps. The default value for minLines is 1, and the default value for maxLines is 6. @@ -47,25 +47,25 @@ The default value for minLines is 1, and the default value for maxLines is 6. ### Decoration -The [`decoration`] property customizes the visual attributes of the message input field, such as hint text,borders, and internal padding, using an [`InputDecoration`]. +The [`decoration`](https://pub.dev/documentation/syncfusion_flutter_chat/28.1.33-beta/assist_view/AssistComposer/decoration.html) property customizes the visual attributes of the message input field, such as hint text,borders, and internal padding, using an [`InputDecoration`](https://api.flutter.dev/flutter/material/InputDecoration-class.html). The [`InputDecoration`] class enhances the composer by utilizing its properties, such as borders, labels, icons, and styles. -The following are the major features available in [`InputDecoration`] for decorating the composer: -* [`enabled`] -* [`border`] -* [`contentPadding`] -* [`hintText`] -* [`hintStyle`] -* [`prefixIcon`] and [`suffixIcon`] +The following are the major features available in [`InputDecoration`](https://api.flutter.dev/flutter/material/InputDecoration-class.html) for decorating the composer: +* [`enabled`](https://api.flutter.dev/flutter/material/InputDecoration/enabled.html) +* [`border`](https://api.flutter.dev/flutter/material/InputDecoration/border.html) +* [`contentPadding`](https://api.flutter.dev/flutter/material/InputDecoration/contentPadding.html) +* [`hintText`](https://api.flutter.dev/flutter/material/InputDecoration/hintText.html) +* [`hintStyle`](https://api.flutter.dev/flutter/material/InputDecoration/hintStyle.html) +* [`prefixIcon`](https://api.flutter.dev/flutter/material/InputDecoration/prefixIcon.html) and [`suffixIcon`](https://api.flutter.dev/flutter/material/InputDecoration/suffixIcon.html) #### Enabled -The [`enabled`] property defines whether the compose feature is in an enabled or disabled state. By default, it is set to true. If set to false, the compose feature will be disabled, and the default action button will also be disabled. +The [`enabled`](https://api.flutter.dev/flutter/material/InputDecoration/enabled.html) property defines whether the compose feature is in an enabled or disabled state. By default, it is set to true. If set to false, the compose feature will be disabled, and the default action button will also be disabled. #### Border -The [`border`] property defines shape of the border that is drawn around the text field. By default, an [`OutlineInputBorder`] is used. +The [`border`](https://api.flutter.dev/flutter/material/InputDecoration/border.html) property defines shape of the border that is drawn around the text field. By default, an [`OutlineInputBorder`](https://api.flutter.dev/flutter/material/OutlineInputBorder-class.html) is used. {% tabs %} {% highlight dart %} @@ -93,7 +93,7 @@ The [`border`] property defines shape of the border that is drawn around the tex #### Content padding -The [`contentPadding`] property defines the padding surrounding the text added inside the text field. By default, the padding is set to 16 horizontally and 18 vertically. +The [`contentPadding`](https://api.flutter.dev/flutter/material/InputDecoration/contentPadding.html) property defines the padding surrounding the text added inside the text field. By default, the padding is set to 16 horizontally and 18 vertically. {% tabs %} {% highlight dart hl_lines="28" %} @@ -119,7 +119,7 @@ The [`contentPadding`] property defines the padding surrounding the text added i #### Hint text -The [`hintText`] property sets the placeholder text for the text field. By default, it is set to null. +The [`hintText`](https://api.flutter.dev/flutter/material/InputDecoration/hintText.html) property sets the placeholder text for the text field. By default, it is set to null. {% tabs %} {% highlight dart %} @@ -145,7 +145,7 @@ The [`hintText`] property sets the placeholder text for the text field. By defau #### Hint text style -The [`hintStyle`] property refers to the text style of the hint text. +The [`hintStyle`](https://api.flutter.dev/flutter/material/InputDecoration/hintStyle.html) property refers to the text style of the hint text. {% tabs %} {% highlight dart %} @@ -176,7 +176,7 @@ The [`hintStyle`] property refers to the text style of the hint text. #### Prefix and suffix icons -The [`prefixIcon`] and [`suffixIcon`] properties are used to add icons at the beginning and end of the text field, respectively. +The [`prefixIcon`](https://api.flutter.dev/flutter/material/InputDecoration/prefixIcon.html) and [`suffixIcon`](https://api.flutter.dev/flutter/material/InputDecoration/suffixIcon.html) properties are used to add icons at the beginning and end of the text field, respectively. {% tabs %} {% highlight dart %} @@ -209,7 +209,7 @@ The [`prefixIcon`] and [`suffixIcon`] properties are used to add icons at the be ### Padding -The [`padding`] property defines the space around the text field, which is used to create space between the conversion area and the text field. +The [`padding`](https://pub.dev/documentation/syncfusion_flutter_chat/28.1.33-beta/assist_view/AssistComposer/padding.html) property defines the space around the text field, which is used to create space between the conversion area and the text field. By default, the top padding is set to 16. @@ -235,9 +235,9 @@ By default, the top padding is set to 16. ### Text style -The [`textStyle`] property is used to set the style for the default [`AssistComposer`] text. +The [`textStyle`](https://pub.dev/documentation/syncfusion_flutter_chat/28.1.33-beta/assist_view/AssistComposer/textStyle.html) property is used to set the style for the default [`AssistComposer`](https://pub.dev/documentation/syncfusion_flutter_chat/28.1.33-beta/assist_view/AssistComposer/AssistComposer.html) text. -The specified text style will be merged with the [`bodyMedium`] and `editorTextStyle` text styles. +The specified text style will be merged with the [`bodyMedium`](https://api.flutter.dev/flutter/material/TextTheme/bodyMedium.html) and `editorTextStyle` text styles. {% tabs %} {% highlight dart %} @@ -263,9 +263,9 @@ The specified text style will be merged with the [`bodyMedium`] and `editorTextS ## Builder -The [AssistComposer.builder] is used to specify a custom widget for the composer, allowing you to enable multiple options for composing messages, such as text, voice, and image messages. +The [AssistComposer.builder](https://pub.dev/documentation/syncfusion_flutter_chat/28.1.33-beta/assist_view/AssistComposer/builder.html) is used to specify a custom widget for the composer, allowing you to enable multiple options for composing messages, such as text, voice, and image messages. -If [`AssistComposer.builder`] is used, the action button will always be enabled. +If [`AssistComposer.builder`](https://pub.dev/documentation/syncfusion_flutter_chat/28.1.33-beta/assist_view/AssistComposer/builder.html) is used, the action button will always be enabled. {% tabs %} {% highlight dart %} @@ -353,4 +353,4 @@ If [`AssistComposer.builder`] is used, the action button will always be enabled. {% endhighlight %} {% endtabs %} ->You can refer to our [`Flutter Chat`](https://www.syncfusion.com/flutter-widgets/flutter-chat) feature tour page for its groundbreaking feature representations. You can also explore our [`Flutter Chat example`](https://flutter.syncfusion.com/#/chat/getting-started) which demonstrates conversations between two or more users in a fully customizable layout and shows how to easily configure the chat with built-in support for creating stunning visual effects. +>You can refer to our [`Flutter AI AssistView`](https://www.syncfusion.com/flutter-widgets/flutter-aiassistview) feature tour page for its groundbreaking feature representations. You can also explore our [`Flutter AI AssistView example`](https://flutter.syncfusion.com/#/ai-assist-view/getting-started) which demonstrates interaction between users and AI services in a fully customizable layout and shows how to easily configure the AI AssistView with built-in support for creating stunning visual effects. diff --git a/Flutter/assistview/conversation-area.md b/Flutter/AIAssistView/conversation-area.md similarity index 91% rename from Flutter/assistview/conversation-area.md rename to Flutter/AIAssistView/conversation-area.md index aa86360f7..32a45ef1d 100644 --- a/Flutter/assistview/conversation-area.md +++ b/Flutter/AIAssistView/conversation-area.md @@ -126,7 +126,7 @@ The header displays the username of the message's author along with the time sta _messages.add(AssistMessage.response( data: response, time: DateTime.now(), - author: const AssistMessageAuthor(id: '123-002', name: 'AI'), + author: const AssistMessageAuthor(id: 'AI AssistView ID', name: 'AI'), )); }); } @@ -184,7 +184,7 @@ Showcases additional functionalities and information, including feedback options _messages.add(AssistMessage.response( data: response, time: DateTime.now(), - author: const AssistMessageAuthor(id: '123-002', name: 'AI'), + author: const AssistMessageAuthor(id: 'AI AssistView ID', name: 'AI'), )); }); } @@ -238,7 +238,7 @@ The message author's avatar displays either an image or the initials of their na data: response, time: DateTime.now(), author: const AssistMessageAuthor( - id: '123-002', + id: 'AI AssistView ID', name: 'AI', avatar: AssetImage('asset/images/AI.png'), ), @@ -336,7 +336,7 @@ Customize the area where message content is displayed by changing its background ### Suggestions -Provide a list response suggestions. When the user selects one, it is considered a new request message. The suggestions' layout, background, colors, and more can be customized. +Provide a list of response suggestions. When the user selects one, it is considered a new request message. Additionally, the layout, background colors, and other elements of the suggestions can be customized. {% tabs %} {% highlight dart %} @@ -546,8 +546,8 @@ Append a toolbar to response messages that provides options to perform various a {% endhighlight %} {% endtabs %} ->You can refer to our [Flutter Chat](https://www.syncfusion.com/flutter-widgets/flutter-chat) feature tour page for its groundbreaking feature representations. You can also explore our [Flutter Chat example](https://flutter.syncfusion.com/#/chat/getting-started) which demonstrates conversations between two or more users in a fully customizable layout and shows how to easily configure the chat with built-in support for creating stunning visual effects. +>You can refer to our [`Flutter AI AssistView`](https://www.syncfusion.com/flutter-widgets/flutter-aiassistview) feature tour page for its groundbreaking feature representations. You can also explore our [`Flutter AI AssistView example`](https://flutter.syncfusion.com/#/ai-assist-view/getting-started) which demonstrates interaction between users and AI services in a fully customizable layout and shows how to easily configure the AI AssistView with built-in support for creating stunning visual effects. #### See Also -* You can also customize the bubble shapes and colors properties of both [`requestBubbleSettings`] and [`responseBubbleSettings`] using [`SfAIAssistViewTheme`] by wrapping with [`SfAIAssistView`]. \ No newline at end of file +* You can also customize the bubble shapes and colors properties of both [`requestBubbleSettings`](https://pub.dev/documentation/syncfusion_flutter_chat/28.1.33-beta/assist_view/SfAIAssistView/requestBubbleSettings.html) and [`responseBubbleSettings`](https://pub.dev/documentation/syncfusion_flutter_chat/28.1.33-beta/assist_view/SfAIAssistView/responseBubbleSettings.html) using [`SfAIAssistViewTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfAIAssistViewTheme-class.html) by wrapping with [`SfAIAssistView`](https://pub.dev/documentation/syncfusion_flutter_chat/28.1.33-beta/assist_view/SfAIAssistView/SfAIAssistView.html). \ No newline at end of file diff --git a/Flutter/assistview/getting-started.md b/Flutter/AIAssistView/getting-started.md similarity index 78% rename from Flutter/assistview/getting-started.md rename to Flutter/AIAssistView/getting-started.md index 06dca69c6..eeca5bfeb 100644 --- a/Flutter/assistview/getting-started.md +++ b/Flutter/AIAssistView/getting-started.md @@ -1,23 +1,23 @@ --- layout: post title: Getting started with Flutter AI AssistView widget | Syncfusion -description: Learn here about getting started with Syncfusion Flutter Chat (SfAIAssistView) widget, its elements, and more. +description: Learn here about getting started with Syncfusion Flutter AI AssistView (SfAIAssistView) widget, its elements, and more. platform: flutter control: SfAIAssistView documentation: ug --- -# Getting started with Flutter Chat (SfAIAssistView) +# Getting started with Flutter AI AssistView (SfAIAssistView) This section explains how to add the Flutter AI AssistView widget to a single Flutter application and how to use its basic features. ## Add Flutter AI AssistView to an application -Create a simple Flutter project by following the instructions provided in the [Getting Started with your first Flutter app] documentation. +Create a simple Flutter project by following the instructions provided in the [Getting Started with your first Flutter app](https://docs.flutter.dev/get-started/test-drive?tab=vscode#create-app) documentation. **Add dependency** -Add the [`Syncfusion Flutter Chat`] dependency to your pubspec.yaml file. +Add the [`Syncfusion Flutter Chat`](https://pub.dev/packages/syncfusion_flutter_chat/versions) dependency to your pubspec.yaml file. {% tabs %} {% highlight dart %} @@ -28,7 +28,7 @@ Add the [`Syncfusion Flutter Chat`] dependency to your pubspec.yaml file. {% endhighlight %} {% endtabs %} ->Here **x.x.x** denotes the current version of [`Syncfusion Flutter Chat`] package. It is recommended to use the latest available version from pub.dev for the best features and updates. +>Here **x.x.x** denotes the current version of [`Syncfusion Flutter Chat`](https://pub.dev/packages/syncfusion_flutter_chat/versions) package. It is recommended to use the latest available version from pub.dev for the best features and updates. **Get packages** @@ -42,7 +42,7 @@ Run the following command to get the required packages. {% endhighlight %} {% endtabs %} -**Import the Chat library** +**Import the AI AssistView library** Import the library using the code provided below. @@ -56,7 +56,7 @@ Import the library using the code provided below. ## Initialize AI AssistView widget -Add an AI AssistView widget with the required property, [messages]. +Add an AI AssistView widget with the required property, [messages](https://pub.dev/documentation/syncfusion_flutter_chat/28.1.33-beta/assist_view/SfAIAssistView/messages.html). {% tabs %} {% highlight dart %} @@ -77,7 +77,7 @@ Add an AI AssistView widget with the required property, [messages]. ## Add placeholder to composer -To add a placeholder to the [`AssistComposer`], use the [`decoration`] property, which is of type InputDecoration. The placeholder can be added using the [`hintText`] property. +To add a placeholder to the [`AssistComposer`](https://pub.dev/documentation/syncfusion_flutter_chat/28.1.33-beta/assist_view/AssistComposer-class.html), use the [`decoration`](https://pub.dev/documentation/syncfusion_flutter_chat/28.1.33-beta/assist_view/AssistComposer/decoration.html) property, which is of type InputDecoration. The placeholder can be added using the [`hintText`](https://api.flutter.dev/flutter/material/InputDecoration/hintText.html) property. {% tabs %} {% highlight dart %} @@ -103,7 +103,7 @@ To add a placeholder to the [`AssistComposer`], use the [`decoration`] property, ## Add placeholder to conversation area -By default, conversation messages are empty. It’s a good idea to show a message or design to indicate this. You can use the [`placeholderBuilder`] property to create a custom widget that appears in the conversation area, which can be removed once messages start coming in. +By default, conversation messages are empty. It’s a good idea to show a message or design to indicate this. You can use the [`placeholderBuilder`] (https://pub.dev/documentation/syncfusion_flutter_chat/28.1.33-beta/assist_view/SfAIAssistView/placeholderBuilder.html) property to create a custom widget that appears in the conversation area, which can be removed once messages start coming in. {% tabs %} {% highlight dart %} @@ -155,13 +155,11 @@ By default, conversation messages are empty. It’s a good idea to show a messag {% endhighlight %} {% endtabs %} - - ## Add action button -It represents the send button, which was not included by default. To add it, create an instance of [`AssistActionButton`] for the actionButton. +It represents the send button, which was not included by default. To add it, create an instance of [`AssistActionButton`](https://pub.dev/documentation/syncfusion_flutter_chat/28.1.33-beta/assist_view/AssistActionButton-class.html) for the actionButton. -When the send button is clicked, the [`AssistActionButton.onPressed`] callback is invoked, which rebuilds the AI AssistView widget with the newly composed message. +When the send button is clicked, the [`AssistActionButton.onPressed`](https://pub.dev/documentation/syncfusion_flutter_chat/28.1.33-beta/assist_view/AssistActionButton/onPressed.html) callback is invoked, which rebuilds the AI AssistView widget with the newly composed message. {% tabs %} {% highlight dart %} @@ -310,4 +308,4 @@ When the send button is clicked, the [`AssistActionButton.onPressed`] callback i ![Action button chat](images/getting-started/actionbutton-chat.gif) ->You can refer to our [Flutter Chat](https://www.syncfusion.com/flutter-widgets/flutter-chat) feature tour page for its groundbreaking feature representations. You can also explore our [Flutter Chat example](https://flutter.syncfusion.com/#/chat/getting-started) which demonstrates conversations between two or more users in a fully customizable layout and shows how to easily configure the chat with built-in support for creating stunning visual effects. \ No newline at end of file +>You can refer to our [`Flutter AI AssistView`](https://www.syncfusion.com/flutter-widgets/flutter-aiassistview) feature tour page for its groundbreaking feature representations. You can also explore our [`Flutter AI AssistView example`](https://flutter.syncfusion.com/#/ai-assist-view/getting-started) which demonstrates interaction between users and AI services in a fully customizable layout and shows how to easily configure the AI AssistView with built-in support for creating stunning visual effects. \ No newline at end of file diff --git a/Flutter/AIAssistView/images/getting-started/actionbutton-chat.gif b/Flutter/AIAssistView/images/getting-started/actionbutton-chat.gif new file mode 100644 index 000000000..8ca6271b6 Binary files /dev/null and b/Flutter/AIAssistView/images/getting-started/actionbutton-chat.gif differ diff --git a/Flutter/AIAssistView/images/overview/assist-overview.gif b/Flutter/AIAssistView/images/overview/assist-overview.gif new file mode 100644 index 000000000..051610752 Binary files /dev/null and b/Flutter/AIAssistView/images/overview/assist-overview.gif differ diff --git a/Flutter/AIAssistView/overview.md b/Flutter/AIAssistView/overview.md new file mode 100644 index 000000000..00dc56f03 --- /dev/null +++ b/Flutter/AIAssistView/overview.md @@ -0,0 +1,38 @@ +--- +layout: post +title: About Flutter AI AssistView widget | Syncfusion +description: Learn here all about the introduction of Syncfusion Flutter AI AssistView (SfAIAssistView) widget, its features, and more. +platform: flutter +control: SfAIAssistView +documentation: ug +--- + +# Flutter AI AssistView (SfAIAssistView) Overview + +The Syncfusion Flutter AI AssistView widget is a powerful and customizable tool designed to simplify the integration of AI assistant functionality. It allows users to customize message content, headers, footers, avatars, response toolbars, loading indicators, suggestion items, text editors, and action buttons. + +![AI AssistView overview](images/overview/assist-overview.gif) + +## Features + +* **Placeholder Builder** - The [`SfAIAssistView.placeholderBuilder`](https://pub.dev/documentation/syncfusion_flutter_chat/28.1.33-beta/assist_view/SfAIAssistView/placeholderBuilder.html) allows you to specify a custom widget to display when there are no messages in the chat. This is particularly useful for presenting users with a relevant or visually appealing message indicating that the conversation is currently empty. + +* **Composer** - This is the primary text editor where the user can compose new request messages. + +* **Action Button** - This represents the send button. Pressing this action button invokes the [`AssistActionButton.onPressed`](https://pub.dev/documentation/syncfusion_flutter_chat/28.1.33-beta/assist_view/AssistActionButton/onPressed.html) callback with the text entered in the default [`AssistComposer`](https://pub.dev/documentation/syncfusion_flutter_chat/28.1.33-beta/assist_view/AssistComposer-class.html). + +* **Message Bubble** - A list of [`AssistMessage`](https://pub.dev/documentation/syncfusion_flutter_chat/28.1.33-beta/assist_view/AssistMessage-class.html) objects that will be displayed in the chat interface as either a request message from the user or a response message from AI. Each [`AssistMessage`](https://pub.dev/documentation/syncfusion_flutter_chat/28.1.33-beta/assist_view/AssistMessage-class.html) includes details such as the message text, timestamp, and author information. + +* **Suggestions** - The response set for a message can be included with the response itself, and choosing this suggestion can be treated as a new request message. + +* **Footer items** - This is a collection action bar items for a response message. Particularly useful for adding action items such as like, dislike, copy, retry, etc. + +* **Bubble Header Builder** - The [`SfAIAssistView.bubbleHeaderBuilder`](https://pub.dev/documentation/syncfusion_flutter_chat/28.1.33-beta/assist_view/SfAIAssistView/bubbleHeaderBuilder.html) allows you to specify a custom widget to display as a header for each chat bubble. This is particularly useful for displaying additional information such as the sender's name and the timestamp associated with each message. + +* **Bubble Avatar Builder** - The [`SfAIAssistView.bubbleAvatarBuilder`](https://pub.dev/documentation/syncfusion_flutter_chat/28.1.33-beta/assist_view/SfAIAssistView/bubbleAvatarBuilder.html) allows you to specify a custom widget to display as an avatar within each chat bubble. This feature is especially useful for showing user avatars or profile pictures within the chat interface. + +* **Bubble Content Builder** - The [`SfAIAssistView.bubbleContentBuilder`](https://pub.dev/documentation/syncfusion_flutter_chat/28.1.33-beta/assist_view/SfAIAssistView/bubbleContentBuilder.html) allows you to specify a custom widget to display as the content within each chat bubble. This is useful for customizing how the message content is presented, such as using different background colors, borders, or padding. + +* **Bubble Footer Builder** - The [`SfAIAssistView.bubbleFooterBuilder`](https://pub.dev/documentation/syncfusion_flutter_chat/28.1.33-beta/assist_view/SfAIAssistView/bubbleFooterBuilder.html) allows you to specify a custom widget that will be displayed as a footer within each chat bubble. This is particularly useful for displaying timestamps or other additional information related to the message. + +>You can refer to our [`Flutter AI AssistView`](https://www.syncfusion.com/flutter-widgets/flutter-aiassistview) feature tour page for its groundbreaking feature representations. You can also explore our [`Flutter AI AssistView example`](https://flutter.syncfusion.com/#/ai-assist-view/getting-started) which demonstrates interaction between users and AI services in a fully customizable layout and shows how to easily configure the AI AssistView with built-in support for creating stunning visual effects. \ No newline at end of file diff --git a/Flutter/assistview/placeholder.md b/Flutter/AIAssistView/placeholder.md similarity index 87% rename from Flutter/assistview/placeholder.md rename to Flutter/AIAssistView/placeholder.md index 986609dbe..e03b5a282 100644 --- a/Flutter/assistview/placeholder.md +++ b/Flutter/AIAssistView/placeholder.md @@ -121,4 +121,4 @@ The placeholder can scroll along with messages. {% endhighlight %} {% endtabs %} ->You can refer to our [`Flutter Chat`](https://www.syncfusion.com/flutter-widgets/flutter-chat) feature tour page for its groundbreaking feature representations. You can also explore our [`Flutter Chat example`](https://flutter.syncfusion.com/#/chat/getting-started) which demonstrates conversations between two or more users in a fully customizable layout and shows how to easily configure the chat with built-in support for creating stunning visual effects. \ No newline at end of file +>You can refer to our [`Flutter AI AssistView`](https://www.syncfusion.com/flutter-widgets/flutter-aiassistview) feature tour page for its groundbreaking feature representations. You can also explore our [`Flutter AI AssistView example`](https://flutter.syncfusion.com/#/ai-assist-view/getting-started) which demonstrates interaction between users and AI services in a fully customizable layout and shows how to easily configure the AI AssistView with built-in support for creating stunning visual effects. \ No newline at end of file diff --git a/Flutter/assistview/images/getting-started/actionbutton-chat.gif b/Flutter/assistview/images/getting-started/actionbutton-chat.gif deleted file mode 100644 index 8b3b2d8c1..000000000 Binary files a/Flutter/assistview/images/getting-started/actionbutton-chat.gif and /dev/null differ diff --git a/Flutter/assistview/images/overview/assist-overview.gif b/Flutter/assistview/images/overview/assist-overview.gif deleted file mode 100644 index 8b3b2d8c1..000000000 Binary files a/Flutter/assistview/images/overview/assist-overview.gif and /dev/null differ diff --git a/Flutter/assistview/overview.md b/Flutter/assistview/overview.md deleted file mode 100644 index 778e366e4..000000000 --- a/Flutter/assistview/overview.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -layout: post -title: About Flutter AI AssistView widget | Syncfusion -description: Learn here all about the introduction of Syncfusion Flutter AI AssistView (SfAIAssistView) widget, its features, and more. -platform: flutter -control: SfAIAssistView -documentation: ug ---- - -# Flutter AI AssistView (SfAIAssistView) Overview - -The Syncfusion Flutter AI AssistView widget is a powerful and customizable tool designed to simplify the integration of AI assistant functionality. It allows users to customize message content, headers, footers, avatars, response toolbars, loading indicators, suggestion items, text editors, and action buttons. - -![AI AssistView overview](images/overview/assist-overview.gif) - -## Features - -* **Placeholder Builder** - The [`SfAIAssistView.placeholderBuilder`] allows you to specify a custom widget to display when there are no messages in the chat. This is particularly useful for presenting users with a relevant or visually appealing message indicating that the conversation is currently empty. - -* **Composer** - This is the primary text editor where the user can compose new request messages. - -* **Action Button** - This represents the send button. Pressing this action button invokes the [`AssistActionButton.onPressed`] callback with the text entered in the default [`AssistComposer`]. - -* **Message Bubble** - A list of [`AssistMessage`] objects that will be displayed in the chat interface as either a request message from the user or a response message from AI. Each [`AssistMessage`] includes details such as the message text, timestamp, and author information. - -* **Suggestions** - The response set for a message can be included with the response itself, and choosing this suggestion can be treated as a new request message. - -* **Footer items** - This is a collection action bar items for a response message. Particularly useful for adding action items such as like, dislike, copy, retry, etc. - -* **Bubble Header Builder** - The [`SfAIAssistView.bubbleHeaderBuilder`] allows you to specify a custom widget to display as a header for each chat bubble. This is particularly useful for displaying additional information such as the sender's name and the timestamp associated with each message. - -* **Bubble Avatar Builder** - The [`SfAIAssistView.bubbleAvatarBuilder`] allows you to specify a custom widget to display as an avatar within each chat bubble. This feature is especially useful for showing user avatars or profile pictures within the chat interface. - -* **Bubble Content Builder** - The [`SfAIAssistView.bubbleContentBuilder`] allows you to specify a custom widget to display as the content within each chat bubble. This is useful for customizing how the message content is presented, such as using different background colors, borders, or padding. - -* **Bubble Footer Builder** - The [`SfAIAssistView.bubbleFooterBuilder`] allows you to specify a custom widget that will be displayed as a footer within each chat bubble. This is particularly useful for displaying timestamps or other additional information related to the message. - ->You can refer to our [Flutter Chat](https://www.syncfusion.com/flutter-widgets/flutter-chat) feature tour page for its groundbreaking feature representations. You can also explore our [Flutter Chat example](https://flutter.syncfusion.com/#/chat/getting-started) which demonstrates conversations between two or more users in a fully customizable layout and shows how to easily configure the chat with built-in support for creating stunning visual effects. \ No newline at end of file diff --git a/Flutter/chat/chat-theme.md b/Flutter/chat/chat-theme.md index 8709108f9..0610dc707 100644 --- a/Flutter/chat/chat-theme.md +++ b/Flutter/chat/chat-theme.md @@ -419,7 +419,7 @@ The [`actionButtonShape`](https://pub.dev/documentation/syncfusion_flutter_core/ ## Outgoing avatar background color -The [`outgoingAvatarBackgroundColor`] property is used to specify the background color of outgoing message avatar. +The [`outgoingAvatarBackgroundColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfChatThemeData/outgoingAvatarBackgroundColor.html) property is used to specify the background color of outgoing message avatar. {% tabs %} {% highlight Dart %} @@ -446,7 +446,7 @@ The [`outgoingAvatarBackgroundColor`] property is used to specify the background ## Incoming avatar background color -The [`incomingAvatarBackgroundColor`] property is used to specify the background color of incoming message avatar. +The [`incomingAvatarBackgroundColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfChatThemeData/incomingAvatarBackgroundColor.html) property is used to specify the background color of incoming message avatar. {% tabs %} {% highlight Dart %} @@ -753,7 +753,7 @@ The [`incomingSecondaryHeaderTextStyle`](https://pub.dev/documentation/syncfusio ## Suggestion item text style -The [`suggestionItemTextStyle`] property is used to specify the text style for both outgoing and incoming message suggestion items. +The [`suggestionItemTextStyle`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfChatThemeData/suggestionItemTextStyle.html) property is used to specify the text style for both outgoing and incoming message suggestion items. {% tabs %} {% highlight Dart %} @@ -868,7 +868,7 @@ The [`incomingBubbleContentShape`](https://pub.dev/documentation/syncfusion_flut ## Suggestion background color -The [`suggestionBackgroundColor`] property is used to specify the background color of both outgoing and incoming message suggestion bubble. +The [`suggestionBackgroundColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfChatThemeData/suggestionBackgroundColor.html) property is used to specify the background color of both outgoing and incoming message suggestion bubble. {% tabs %} {% highlight Dart %} @@ -895,7 +895,7 @@ The [`suggestionBackgroundColor`] property is used to specify the background col ## Suggestion background shape -The [`suggestionBackgroundShape`] property is used to specify the background shape of both outgoing and incoming message suggestion bubble. +The [`suggestionBackgroundShape`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfChatThemeData/suggestionBackgroundShape.html) property is used to specify the background shape of both outgoing and incoming message suggestion bubble. {% tabs %} {% highlight Dart %} @@ -924,7 +924,7 @@ The [`suggestionBackgroundShape`] property is used to specify the background sha ## Suggestion item background color -The [`suggestionItemBackgroundColor`] property is used to specify the background color for both outgoing and incoming message suggestion items. +The [`suggestionItemBackgroundColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfChatThemeData/suggestionItemBackgroundColor.html) property is used to specify the background color for both outgoing and incoming message suggestion items. {% tabs %} {% highlight Dart %} @@ -964,7 +964,7 @@ The [`suggestionItemBackgroundColor`] property is used to specify the background ## Suggestion item shape -The [`suggestionItemShape`] property is used to specify the shape for both outgoing and incoming message suggestion items. +The [`suggestionItemShape`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfChatThemeData/suggestionItemShape.html) property is used to specify the shape for both outgoing and incoming message suggestion items. {% tabs %} {% highlight Dart %} diff --git a/flutter-toc.html b/flutter-toc.html index 434257355..8aa4e1cc0 100644 --- a/flutter-toc.html +++ b/flutter-toc.html @@ -98,15 +98,15 @@
  • Right to Left (RTL)
  • Themes
  • - AssistView + AI AssistView