@clikvn/agent-widget-embedded 0.0.8-dev → 0.0.10-dev

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@clikvn/agent-widget-embedded",
   "description": "This is agent widget",
-  "version": "0.0.8-dev",
+  "version": "0.0.10-dev",
   "author": "Clik JSC",
   "license": "ISC",
   "type": "module",

package/src/components/Chat/Chat.tsx

@@ -27,6 +27,7 @@ export const Chat: FC<PropsType> = ({ id, agentId, initialMessages = [] }) => {
     bot,
     enableTTS,
     setEnableTTS,
+    suggestions
   } = useChat({ id, initialMessages, agentId });
   const { apiHost } = useConfiguration();
   const [messagesContainerRef, messagesEndRef] =
@@ -81,6 +82,7 @@ export const Chat: FC<PropsType> = ({ id, agentId, initialMessages = [] }) => {
             apiHost={apiHost}
             setEnableTTS={setEnableTTS}
             enableTTS={enableTTS}
+            suggestedActions={suggestions}
           />
         </form>
       </div>

package/src/components/Chat/MultimodalInput.tsx

@@ -32,6 +32,7 @@ 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';
 
 type PropsType = {
   input: string;
@@ -53,6 +54,7 @@ type PropsType = {
   apiHost: string;
   setEnableTTS: (value: boolean) => void;
   enableTTS: boolean;
+  suggestedActions?: SuggestionType[];
 };
 
 export const MultimodalInput: FC<PropsType> = ({
@@ -72,9 +74,9 @@ export const MultimodalInput: FC<PropsType> = ({
   apiHost,
   setEnableTTS,
   enableTTS,
+  suggestedActions,
 }) => {
   const { theme } = useConfiguration();
-  const { suggestedActions = [] } = useChatData();
   const {
     isRecording,
     setIsRecording,
@@ -286,7 +288,7 @@ export const MultimodalInput: FC<PropsType> = ({
 
   return (
     <div className="relative w-full flex flex-col gap-4">
-      {messages.length === 0 && (
+      {!!suggestedActions?.length && (
         <div className="grid sm:grid-cols-2 gap-2 w-full">
           {suggestedActions.map((suggestedAction, index) => (
             <motion.div
@@ -299,7 +301,8 @@ export const MultimodalInput: FC<PropsType> = ({
             >
               <Button
                 variant="ghost"
-                onClick={async () => {
+                onClick={(e) => {
+                  e.preventDefault();
                   if (append) {
                     append({
                       role: 'apiMessage',
@@ -309,10 +312,14 @@ export const MultimodalInput: FC<PropsType> = ({
                 }}
                 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 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>
             </motion.div>
           ))}

package/src/features/AgentWidget/index.tsx

@@ -17,6 +17,13 @@ export type AgentWidgetType = {
   } & Record<string, unknown>;
   theme?: {
     avatar?: string;
+    input?: {
+      placeholder?: string;
+    };
+    overview?: {
+      title: string;
+      description?: string;
+    };
   } & Record<string, unknown>;
   listeners?: Record<EVENT_TYPE, (props: any) => void>;
 };

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/services/apis.ts

@@ -8,3 +8,5 @@ export const API_PREDICTION = `${API_CHATS}/prediction`;
 export const API_CHATBOTS = `${API_VERSION}/bots`;
 
 export const API_CREATE_ATTACHMENTS = `${API_CHATS}/attachments`;
+
+export const API_SUGGESTIONS = `${API_CHATS}/suggestions`;

package/src/services/chat.service.ts

@@ -4,10 +4,11 @@ import {
   API_CHATS,
   API_CREATE_ATTACHMENTS,
   API_PREDICTION,
+  API_SUGGESTIONS,
   API_VERSION,
 } from './apis';
 import { ChatRequestType, ChatType } from '../types/chat.type';
-import { CommonChatType } from '../types/common.type';
+import { CommonChatType, SuggestionType } from '../types/common.type';
 import {
   AttachmentUploadResult,
   ChatMessageType,
@@ -162,3 +163,37 @@ export const getById = async ({
     method: 'GET',
   });
 };
+
+export const getSuggestions = async ({
+  accessToken,
+  id,
+  question,
+  apiHost
+}: {
+  accessToken?: string;
+  id: string;
+  question?: string;
+  apiHost: string;
+}): Promise<SuggestionType[]> => {
+  const headers = accessToken
+    ? {
+        Authorization: `Bearer ${accessToken}`,
+        'Content-Type': 'application/json',
+      }
+    : {};
+  const url = accessToken
+    ? `${API_SUGGESTIONS}/${id}`
+    : `${API_VERSION}${API_SUGGESTIONS}/${id}`;
+  const req = {
+    question
+  }
+  const formData = new FormData();
+  formData.append('question', `${question}`);
+  return request({
+    host: apiHost,
+    url,
+    headers,
+    method: 'POST',
+    body: formData,
+  });
+};