@clikvn/agent-widget-embedded 0.0.9-dev → 0.0.11-dev

package/src/components/Chat/Message.tsx

@@ -11,6 +11,7 @@ import {
 } from '../../types/flowise.type';
 import { cn } from '../../utils/commonUtils';
 import AudioPlayer from './AudioPlayer';
+import { useConfiguration } from 'hooks/useConfiguration';
 
 type PropsType = {
   chatId?: string;
@@ -35,6 +36,7 @@ export const PreviewMessage: FC<PropsType> = ({
   bot,
   enableTTS,
 }) => {
+  const { theme } = useConfiguration();
   const parseOutput = (outputData: any) => {
     try {
       return JSON.parse(outputData);
@@ -56,12 +58,21 @@ export const PreviewMessage: FC<PropsType> = ({
     return { customToolResults, toolResults };
   }, [message.usedTools]);
 
+  const role = useMemo(() => {
+    return getRole(message.role);
+  }, [message.role]);
+
+  const assistantAvatar =
+    role === 'user'
+      ? theme?.userMessage?.avatarSrc
+      : theme?.botMessage?.avatarSrc || bot?.avatar;
+
   return (
     <motion.div
       className="w-full mx-auto max-w-3xl px-4 group/message"
       initial={{ y: 5, opacity: 0 }}
       animate={{ y: 0, opacity: 1 }}
-      data-role={getRole(message.role)}
+      data-role={role}
     >
       <div className="flex justify-end text-[14px]">
         {message?.fileUploads && !!message.fileUploads.length && (
@@ -70,15 +81,21 @@ export const PreviewMessage: FC<PropsType> = ({
       </div>
       <div
         className={cn(
-          'group-data-[role=user]/message:bg-primary group-data-[role=user]/message:text-primary-foreground flex gap-4 group-data-[role=user]/message:px-3 w-full group-data-[role=user]/message:w-fit group-data-[role=user]/message:ml-auto group-data-[role=user]/message:max-w-2xl group-data-[role=user]/message:py-2 rounded-xl'
+          `group-data-[role=user]/message:bg-primary group-data-[role=user]/message:text-primary-foreground flex gap-4 px-3 w-full group-data-[role=user]/message:w-fit group-data-[role=user]/message:ml-auto group-data-[role=user]/message:max-w-2xl py-2 rounded-xl `
         )}
+        style={{
+          backgroundColor:
+            role === 'user'
+              ? theme?.userMessage?.backgroundColor
+              : theme?.botMessage?.backgroundColor || undefined,
+        }}
       >
-        {message.role === 'apiMessage' && (
+        {theme?.botMessage?.showAvatar && message.role === 'apiMessage' && (
           <div className="size-8 flex items-center rounded-full justify-center ring-1 shrink-0 ring-border">
-            {bot?.avatar ? (
+            {assistantAvatar ? (
               <img
-                src={bot.avatar}
-                alt={bot.name ?? 'User Avatar'}
+                src={assistantAvatar}
+                alt={bot?.name ?? 'User Avatar'}
                 width={24}
                 height={24}
                 className="rounded-full"
@@ -133,7 +150,15 @@ export const PreviewMessage: FC<PropsType> = ({
           {/*    </div>*/}
           {/*  )}*/}
           {message.content && (
-            <div className="flex flex-col gap-4">
+            <div
+              className="flex flex-col gap-4"
+              style={{
+                color:
+                  getRole(message.role) === 'user'
+                    ? theme?.userMessage?.textColor
+                    : theme?.botMessage?.textColor || undefined,
+              }}
+            >
               <Markdown usedTools={message?.usedTools}>
                 {message.content as string}
               </Markdown>
@@ -151,6 +176,10 @@ export const PreviewMessage: FC<PropsType> = ({
 export const ThinkingMessage = ({ bot }: { bot: BotType | null }) => {
   const role = 'assistant';
 
+  const { theme } = useConfiguration();
+
+  const assistantAvatar = theme?.botMessage?.avatarSrc || bot?.avatar;
+
   return (
     <motion.div
       className="w-full mx-auto max-w-3xl px-4 group/message "
@@ -166,20 +195,17 @@ export const ThinkingMessage = ({ bot }: { bot: BotType | null }) => {
           }
         )}
       >
-        <div className="size-8 flex items-center rounded-full justify-center ring-1 shrink-0 ring-border">
-          {bot?.avatar ? (
+        {theme?.botMessage?.showAvatar && (
+          <div className="size-8 flex items-center rounded-full justify-center ring-1 shrink-0 ring-border">
             <img
-              src={bot.avatar}
-              alt={bot.name ?? 'User Avatar'}
+              src={assistantAvatar}
+              alt={bot?.name ?? 'User Avatar'}
               width={24}
               height={24}
               className="rounded-full"
             />
-          ) : (
-            <SparklesIcon size={14} />
-          )}
-        </div>
-
+          </div>
+        )}
         <div className="flex flex-col gap-2 w-full">
           <div className="flex flex-col gap-4 text-muted-foreground">
             Thinking...

package/src/components/Chat/MultimodalInput.tsx

@@ -1,3 +1,4 @@
+import { motion } from 'framer-motion';
 import {
   type ChangeEvent,
   FC,
@@ -6,32 +7,38 @@ import {
   useRef,
   useState,
 } from 'react';
-import { motion } from 'framer-motion';
 import { useLocalStorage, useWindowSize } from 'usehooks-ts';
+import { BotType } from '../../types/bot.type';
+import { ChatMessageType, IFileUpload } from '../../types/flowise.type';
 import {
   cn,
   generateExtendedFileName,
   generateUUID,
 } from '../../utils/commonUtils';
-import { PreviewAttachment } from './PreviewAttachment';
 import {
   ArrowUpIcon,
-  CircleDotIcon,
-  MicrophoneIcon,
-  PlusIcon,
+  CheckCirclFillIcon,
+  ClikCloseIcon,
+  ClikMessageIcon,
+  ClikMicrophoneIcon,
+  ClikPlusIcon,
+  ClikVolumeIcon,
+  ClikWaveIcon,
   StopIcon,
-  TrashIcon,
-  VolumeIcon,
 } from './Icons';
-import { ChatMessageType, IFileUpload } from '../../types/flowise.type';
-import { BotType } from '../../types/bot.type';
+import { PreviewAttachment } from './PreviewAttachment';
 
 import { createAttachments } from '../../services/chat.service';
 import { Button } from './ui/Button';
 import { Textarea } from './ui/Textarea';
 import { useAudioRecording } from '../../hooks/useAudioRecording';
-import { useChatData } from '../../hooks/useChatData';
 import { useConfiguration } from '../../hooks/useConfiguration';
+import { SuggestionType } from 'types/common.type';
+import SuggestedActions from './SuggestedActions';
+import { LAYOUT_MODE } from 'commons/constants';
+
+const DEFAULT_COLOR_ICON = '#595959';
+const ACTIVE_COLOR_ICON = '#0A82F7';
 
 type PropsType = {
   input: string;
@@ -53,6 +60,7 @@ type PropsType = {
   apiHost: string;
   setEnableTTS: (value: boolean) => void;
   enableTTS: boolean;
+  suggestedActions?: SuggestionType[];
 };
 
 export const MultimodalInput: FC<PropsType> = ({
@@ -72,9 +80,9 @@ export const MultimodalInput: FC<PropsType> = ({
   apiHost,
   setEnableTTS,
   enableTTS,
+  suggestedActions,
 }) => {
   const { theme } = useConfiguration();
-  const { suggestedActions = [] } = useChatData();
   const {
     isRecording,
     setIsRecording,
@@ -85,6 +93,15 @@ export const MultimodalInput: FC<PropsType> = ({
   } = useAudioRecording();
   const textareaRef = useRef<HTMLTextAreaElement | null>(null);
   const { width } = useWindowSize();
+
+  const defaultRows = theme?.suggestion?.defaultRows || 1;
+  const expandedRows = theme?.suggestion?.expandedRows || 2;
+  const suggestedActionLayoutMode =
+    theme?.suggestion?.layoutMode || LAYOUT_MODE.SCROLL;
+
+  const [suggestedActionRows, setSuggestedActionRows] =
+    useState<number>(defaultRows); // only use for scroll mode SuggestedActions
+
   useEffect(() => {
     if (textareaRef.current) {
       adjustHeight();
@@ -123,6 +140,8 @@ export const MultimodalInput: FC<PropsType> = ({
   const handleInput = (event: ChangeEvent<HTMLTextAreaElement>) => {
     setInput(event.target.value);
     adjustHeight();
+    if (suggestedActionRows !== defaultRows)
+      setSuggestedActionRows(defaultRows);
   };
 
   const fileInputRef = useRef<HTMLInputElement | null>(null);
@@ -239,6 +258,12 @@ export const MultimodalInput: FC<PropsType> = ({
     [setUploadQueue, uploadFile]
   );
 
+  const handleLogicShowFAQ = () => {
+    setSuggestedActionRows(
+      suggestedActionRows === defaultRows ? expandedRows : defaultRows
+    );
+  };
+
   const handleFileChange = useCallback(
     async (event: ChangeEvent<HTMLInputElement>) => {
       const files = Array.from(event.target.files || []);
@@ -286,37 +311,13 @@ export const MultimodalInput: FC<PropsType> = ({
 
   return (
     <div className="relative w-full flex flex-col gap-4">
-      {messages.length === 0 && (
-        <div className="grid sm:grid-cols-2 gap-2 w-full">
-          {suggestedActions.map((suggestedAction, index) => (
-            <motion.div
-              initial={{ opacity: 0, y: 20 }}
-              animate={{ opacity: 1, y: 0 }}
-              exit={{ opacity: 0, y: 20 }}
-              transition={{ delay: 0.05 * index }}
-              key={`suggested-action-${suggestedAction.title}-${index}`}
-              className={index > 1 ? 'hidden sm:block' : 'block'}
-            >
-              <Button
-                variant="ghost"
-                onClick={async () => {
-                  if (append) {
-                    append({
-                      role: 'apiMessage',
-                      content: suggestedAction.action,
-                    });
-                  }
-                }}
-                className="text-left border rounded-xl px-4 py-3.5 text-sm flex-1 gap-1 sm:flex-col w-full h-auto justify-start items-start"
-              >
-                <span className="font-medium">{suggestedAction.title}</span>
-                <span className="text-muted-foreground">
-                  {suggestedAction.label}
-                </span>
-              </Button>
-            </motion.div>
-          ))}
-        </div>
+      {!!suggestedActions?.length && (
+        <SuggestedActions
+          suggestedActions={suggestedActions}
+          append={append}
+          layoutMode={suggestedActionLayoutMode}
+          suggestedActionRows={suggestedActionRows}
+        />
       )}
 
       <input
@@ -351,14 +352,13 @@ export const MultimodalInput: FC<PropsType> = ({
           ))}
         </div>
       )}
-
       <Textarea
         ref={textareaRef}
         placeholder={theme?.input?.placeholder || 'Send a message...'}
         value={input}
         onChange={handleInput}
         className={cn(
-          'min-h-[24px] max-h-[calc(75dvh)] overflow-hidden resize-none rounded-xl text-base bg-muted',
+          'min-h-[24px] max-h-[calc(75dvh)] overflow-hidden resize-none rounded-xl text-base bg-muted bg-[#ffffff]',
           className
         )}
         rows={3}
@@ -381,7 +381,7 @@ export const MultimodalInput: FC<PropsType> = ({
 
       {isLoading ? (
         <Button
-          className="rounded-full p-1.5 h-fit absolute bottom-2 right-2 m-0.5 border dark:border-zinc-600"
+          className="rounded-full p-1.5 h-fit absolute bottom-2 right-2 m-0.5 border dark:border-zinc-600 bg-[#000000D9]"
           onClick={(event) => {
             event.preventDefault();
             stop();
@@ -392,7 +392,7 @@ export const MultimodalInput: FC<PropsType> = ({
         </Button>
       ) : (
         <Button
-          className="rounded-full p-1.5 h-fit absolute bottom-2 right-2 m-0.5 border dark:border-zinc-600"
+          className="rounded-full p-1.5 h-fit absolute bottom-2 right-2 m-0.5 border dark:border-zinc-600 bg-[#000000D9]"
           onClick={(event) => {
             event.preventDefault();
             handleSend();
@@ -404,69 +404,102 @@ export const MultimodalInput: FC<PropsType> = ({
           <ArrowUpIcon size={14} />
         </Button>
       )}
-      {isRecording ? (
-        <>
-          <div
-            className="rounded-full bg-background flex absolute p-1 bottom-2 right-[80px]"
-            data-testid="input"
-          >
-            <div className="flex items-center gap-3">
-              <span>
-                <CircleDotIcon color="red" />
-              </span>
-              <span>{elapsedTime || '00:00'}</span>
-              {isLoadingRecording && <span className="ml-1.5">Sending...</span>}
+
+      <div className="absolute left-2 right-2 bottom-2 flex items-center">
+        <Button
+          className="rounded-full p-1.5 h-fit m-0.5 dark:border-zinc-700"
+          onClick={(event) => {
+            event.preventDefault();
+            fileInputRef.current?.click();
+          }}
+          variant="outline"
+          disabled={isLoading || isRecording}
+        >
+          <ClikPlusIcon size={14} />
+        </Button>
+
+        <Button
+          className={`rounded-full py-1 px-2 h-fit m-0.5 dark:border-zinc-700 text-[#595959] ${suggestedActionRows === expandedRows && 'border border-[#B9C6D6] bg-[#CBE1F3] text-[#0A82F7]'} `}
+          onClick={(event) => {
+            event.preventDefault();
+            handleLogicShowFAQ();
+          }}
+          variant="outline"
+          disabled={isLoading || isRecording}
+        >
+          <ClikMessageIcon
+            color={
+              suggestedActionRows === expandedRows
+                ? ACTIVE_COLOR_ICON
+                : DEFAULT_COLOR_ICON
+            }
+          />
+          FAQ
+        </Button>
+
+        {isRecording ? (
+          <>
+            <div
+              className="rounded-[100px] flex items-center bg-[#F3F3F3] gap-2 p-2"
+              data-testid="input"
+            >
+              <Button
+                className="rounded-full dark:border-zinc-700 p-0 h-6"
+                variant="outline"
+                onClick={(event) => {
+                  event.preventDefault();
+                  onRecordingCancelled();
+                }}
+              >
+                <ClikCloseIcon className="!w-full !h-full" />
+              </Button>
+              <div className="flex items-center gap-2 ">
+                <span>
+                  <ClikWaveIcon />
+                </span>
+                <span>{elapsedTime || '00:00'}</span>
+                {isLoadingRecording && (
+                  <span className="ml-1.5">Sending...</span>
+                )}
+              </div>
+              <Button
+                className="rounded-full dark:border-zinc-700 p-0 h-6"
+                variant="outline"
+                onClick={(event) => {
+                  event.preventDefault();
+                }}
+              >
+                <CheckCirclFillIcon className="!w-full !h-full" />
+              </Button>
             </div>
+          </>
+        ) : (
+          <div>
+            <Button
+              className={`rounded-full py-1 px-2 h-fit m-0.5 dark:border-zinc-700 text-[#595959] ${enableTTS ? 'text-white hover:bg-primary/90 bg-primary' : ''}`}
+              onClick={(event) => {
+                event.preventDefault();
+                setEnableTTS(!enableTTS);
+              }}
+              variant="outline"
+              disabled={isLoading}
+            >
+              <ClikVolumeIcon /> Speak
+            </Button>
+            <Button
+              className="rounded-full py-1 px-2 gap-[4px] h-fit m-0.5 dark:border-zinc-700 text-[#595959]"
+              onClick={(event) => {
+                event.preventDefault();
+                setIsRecording(true);
+              }}
+              variant="outline"
+              disabled={isLoading}
+            >
+              <ClikMicrophoneIcon size={14} /> Talk
+            </Button>
           </div>
-          <Button
-            className="rounded-full p-1.5 h-fit absolute bottom-2 right-11 m-0.5 dark:border-zinc-700"
-            variant="outline"
-            onClick={(event) => {
-              event.preventDefault();
-              onRecordingCancelled();
-            }}
-          >
-            <TrashIcon size={14} color="red" />
-          </Button>
-        </>
-      ) : (
-        <>
-          <Button
-            className="rounded-full p-1.5 h-fit absolute bottom-2 right-11 m-0.5 dark:border-zinc-700"
-            onClick={(event) => {
-              event.preventDefault();
-              setIsRecording(true);
-            }}
-            variant="outline"
-            disabled={isLoading}
-          >
-            <MicrophoneIcon size={14} />
-          </Button>
-          <Button
-            className={`rounded-full p-1.5 h-fit absolute bottom-2 right-[80px] m-0.5 dark:border-zinc-700 ${enableTTS ? 'text-white hover:bg-primary/90 bg-primary' : ''}`}
-            onClick={(event) => {
-              event.preventDefault();
-              setEnableTTS(!enableTTS);
-            }}
-            variant="outline"
-            disabled={isLoading}
-          >
-            <VolumeIcon />
-          </Button>
-        </>
-      )}
-
-      <Button
-        className="rounded-full p-1.5 h-fit absolute bottom-2 left-2 m-0.5 dark:border-zinc-700"
-        onClick={(event) => {
-          event.preventDefault();
-          fileInputRef.current?.click();
-        }}
-        variant="outline"
-        disabled={isLoading || isRecording}
-      >
-        <PlusIcon size={14} />
-      </Button>
+        )}
+      </div>
     </div>
   );
 };

package/src/components/Chat/SuggestedActions.tsx

@@ -0,0 +1,99 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { SuggestionType } from 'types/common.type';
+import { ChatMessageType } from 'types/flowise.type';
+import { LAYOUT_MODE } from 'commons/constants';
+
+interface SuggestedActionsProps {
+  suggestedActions?: SuggestionType[];
+  append?: (message: ChatMessageType) => Promise<void>;
+  layoutMode?: string;
+  suggestedActionRows?: number;
+}
+
+const SuggestedActions: React.FC<SuggestedActionsProps> = ({
+  suggestedActions,
+  append,
+  layoutMode = LAYOUT_MODE.SCROLL,
+  suggestedActionRows = 1,
+}) => {
+  if (!suggestedActions?.length) return null;
+
+  const containerHeight = suggestedActionRows * 60;
+
+  const animation = {
+    initial: { opacity: 0, y: 20 },
+    animate: { opacity: 1, y: 0 },
+    exit: { opacity: 0, y: 20 },
+  };
+
+  return layoutMode === LAYOUT_MODE.GRID ? (
+    // UI  Grid (2 columns)
+    <div className="grid sm:grid-cols-2 gap-2 w-full">
+      {suggestedActions.map((suggestedAction, index) => (
+        <motion.div
+          key={`suggested-action-${suggestedAction.title}-${index}`}
+          {...animation}
+          transition={{ delay: 0.05 * index }}
+          className={index > 1 ? 'hidden sm:block' : 'block'}
+        >
+          <ActionButton suggestedAction={suggestedAction} append={append} />
+        </motion.div>
+      ))}
+    </div>
+  ) : (
+    // UI  Scroll
+    <div
+      className="w-full overflow-x-auto scrollbar-hide"
+      style={{ maxHeight: `${containerHeight}px` }}
+    >
+      <div
+        style={{
+          gap: '8px',
+          display: 'grid',
+          gridAutoFlow: 'column',
+          gridTemplateRows: `repeat(${suggestedActionRows}, minmax(0, 1fr))`,
+        }}
+      >
+        {suggestedActions.map((suggestedAction, index) => (
+          <motion.div
+            key={`suggested-action-${suggestedAction.title}-${index}`}
+            {...animation}
+            transition={{ delay: 0.05 * index }}
+          >
+            <ActionButton suggestedAction={suggestedAction} append={append} />
+          </motion.div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+interface ActionButtonProps {
+  suggestedAction: SuggestionType;
+  append?: (message: ChatMessageType) => Promise<void>;
+}
+
+const ActionButton: React.FC<ActionButtonProps> = ({
+  suggestedAction,
+  append,
+}) => (
+  <button
+    onClick={(e) => {
+      e.preventDefault();
+      if (append) {
+        append({ role: 'apiMessage', content: suggestedAction.action });
+      }
+    }}
+    className="text-left border rounded-xl px-4 py-3.5 text-sm flex-1 gap-1 sm:flex-col w-full h-auto justify-start items-start"
+  >
+    <span className="font-medium overflow-hidden whitespace-nowrap text-ellipsis w-full group-hover:overflow-visible group-hover:whitespace-normal">
+      {suggestedAction.title}
+    </span>
+    {!!suggestedAction.label && (
+      <span className="text-muted-foreground">{suggestedAction.label}</span>
+    )}
+  </button>
+);
+
+export default SuggestedActions;

package/src/features/AgentWidget/index.tsx

@@ -5,7 +5,7 @@ import Agent from '../../components/Agent';
 import { ChatDataProvider } from '../../hooks/useChatData';
 import styles from '../../assets/tailwindcss.css';
 import commonStyles from '../../assets/common.css';
-import { SuggestionType } from '../../types/common.type';
+import { ConfigMessageType, SuggestionType } from '../../types/common.type';
 
 export type AgentWidgetType = {
   apiHost: string;
@@ -16,7 +16,13 @@ export type AgentWidgetType = {
     suggestedActions?: SuggestionType[];
   } & Record<string, unknown>;
   theme?: {
-    avatar?: string;
+    botMessage?: ConfigMessageType;
+    userMessage?: ConfigMessageType;
+    suggestion?: {
+      defaultRows?: number; // only for scroll mode
+      expandedRows?: number; // only for scroll mode
+      layoutMode?: 'grid' | 'scroll';
+    };
     input?: {
       placeholder?: string;
     };

package/src/hooks/useChat.ts

@@ -1,7 +1,7 @@
 import useSWR from 'swr';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { StreamResponse } from '../models/FlowiseClient';
-import { predict } from '../services/chat.service';
+import { getSuggestions, predict } from '../services/chat.service';
 import {
   ChatMessageMetadataType,
   ChatMessageType,
@@ -14,6 +14,7 @@ import { generateUUID } from '../utils/commonUtils';
 import { getBot } from '../services/bot.service';
 import { BotType } from '../types/bot.type';
 import { useConfiguration } from './useConfiguration';
+import { SuggestionType } from 'types/common.type';
 
 type PropsType = {
   id?: string;
@@ -35,17 +36,20 @@ type ReturnType = {
   bot: BotType | null;
   enableTTS: boolean;
   setEnableTTS: (value: boolean) => void;
+  suggestions: SuggestionType[]
 };
 
 export const useChat = (props: PropsType): ReturnType => {
   const { id, initialMessages, initialInput, agentId } = props;
-  const { apiHost, overrideConfig } = useConfiguration();
+  const { apiHost, overrideConfig, theme } = useConfiguration();
 
   const idKey = id ?? generateUUID();
   const chatIdRef = useRef<string>(idKey);
   const [chatId, setChatId] = useState(idKey);
   const [bot, setBot] = useState<BotType | null>(null);
   const [enableTTS, setEnableTTS] = useState(false);
+  const [suggestions, setSuggestions] = useState<SuggestionType[]>([]);
+
 
   const updateChatId = (uuid: string) => {
     chatIdRef.current = uuid;
@@ -62,6 +66,17 @@ export const useChat = (props: PropsType): ReturnType => {
     getBot(agentId || 'default', apiHost).then((res) => setBot(res));
   }, [agentId, apiHost]);
 
+  useEffect(() => {
+    if (bot?.id && chatId) {
+      updateSuggestions(`Agent name: ${bot.name}, Title: ${theme?.overview?.title}`)
+    }
+  }, [bot?.id, chatId])
+
+  const updateSuggestions = useCallback(async (question?: string) => {
+    const resSuggestions = await getSuggestions({ id: chatId, question, apiHost });
+    setSuggestions(resSuggestions);
+  }, [setSuggestions, chatId]);
+
   const processResponseStream = async (
     msgs: ChatMessageType[],
     req: PredictionData
@@ -94,6 +109,7 @@ export const useChat = (props: PropsType): ReturnType => {
           lastMsg.content = newMessage.metaData.question;
         }
         mutateMessages([...msgs, { ...newMessage }]);
+        updateSuggestions(`Agent name: ${bot?.name}, Title: ${theme?.overview?.title}`);
       } else if (chunk.event == 'audio') {
         newMessage.ttsUrl = chunk.data as string;
         mutateMessages([...msgs, { ...newMessage }]);
@@ -241,5 +257,6 @@ export const useChat = (props: PropsType): ReturnType => {
     bot,
     enableTTS,
     setEnableTTS,
+    suggestions
   };
 };

package/src/hooks/useConfiguration.tsx

@@ -1,11 +1,18 @@
 import React, { createContext, useEffect, useState } from 'react';
+import { ConfigMessageType } from 'types/common.type';
 
 type ConfigurationData = {
   apiHost: string;
   agentId: string;
   overrideConfig?: Record<string, any>;
   theme?: {
-    avatar?: string;
+    suggestion?: {
+      defaultRows?: number; // only for scroll mode
+      expandedRows?: number; // only for scroll mode
+      layoutMode?: 'grid' | 'scroll';
+    };
+    botMessage?: ConfigMessageType;
+    userMessage?: ConfigMessageType;
     input?: {
       placeholder?: string;
     };