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

package/src/features/AgentWidget/index.tsx

@@ -1,57 +0,0 @@
-import { FC } from 'react';
-import { ConfigurationProvider } from '../../hooks/useConfiguration';
-import { EVENT_TYPE } from '../../models';
-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';
-
-export type AgentWidgetType = {
-  apiHost: string;
-  agentId: string;
-  overrideConfig?: {
-    chatId?: string | undefined;
-    overrideConfig?: Record<string, unknown>;
-    suggestedActions?: SuggestionType[];
-  } & Record<string, unknown>;
-  theme?: {
-    avatar?: string;
-    input?: {
-      placeholder?: string;
-    };
-    overview?: {
-      title: string;
-      description?: string;
-    };
-  } & Record<string, unknown>;
-  listeners?: Record<EVENT_TYPE, (props: any) => void>;
-};
-const AgentWidget: FC<AgentWidgetType> = (props: AgentWidgetType) => {
-  return (
-    <div className="w-full h-full">
-      <style>{styles}</style>
-      <style>{commonStyles}</style>
-      <ConfigurationProvider
-        config={{
-          apiHost: props.apiHost,
-          agentId: props.agentId,
-          overrideConfig: props.overrideConfig?.overrideConfig,
-          theme: props.theme,
-        }}
-      >
-        <ChatDataProvider
-          data={{
-            chatId: props.overrideConfig?.chatId,
-            suggestedActions: props.overrideConfig?.suggestedActions,
-            listeners: props.listeners,
-          }}
-        >
-          <Agent />
-        </ChatDataProvider>
-      </ConfigurationProvider>
-    </div>
-  );
-};
-
-export default AgentWidget;

package/src/global.d.ts

@@ -1 +0,0 @@
-declare module '*.css';

package/src/hooks/useAudioRecording.ts

@@ -1,50 +0,0 @@
-import { useEffect, useState } from 'react';
-import {
-  cancelAudioRecording,
-  startAudioRecording,
-  stopAudioRecording,
-} from '../utils/audioRecording';
-
-export const useAudioRecording = () => {
-  const [elapsedTime, setElapsedTime] = useState('00:00');
-  const [recordingNotSupported, setRecordingNotSupported] = useState(false);
-  const [isLoadingRecording, setIsLoadingRecording] = useState(false);
-  const [isRecording, setIsRecording] = useState(false);
-
-  useEffect(() => {
-    if (isRecording) {
-      onRecordingStarted();
-    }
-  }, [isRecording]);
-  const onRecordingStarted = () => {
-    setIsRecording(true);
-    setIsLoadingRecording(false);
-    startAudioRecording(
-      setIsRecording,
-      setRecordingNotSupported,
-      setElapsedTime
-    );
-  };
-
-  const onRecordingCancelled = () => {
-    if (!recordingNotSupported) cancelAudioRecording();
-    setIsRecording(false);
-    setRecordingNotSupported(false);
-  };
-
-  const onRecordingStopped = (onStop: null | ((blob: Blob) => void)) => {
-    setIsLoadingRecording(true);
-    stopAudioRecording(onStop);
-  };
-
-  return {
-    elapsedTime,
-    recordingNotSupported,
-    isLoadingRecording,
-    isRecording,
-    setIsRecording,
-    onRecordingCancelled,
-    onRecordingStopped,
-    onRecordingStarted,
-  };
-};

package/src/hooks/useChat.ts

@@ -1,262 +0,0 @@
-import useSWR from 'swr';
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { StreamResponse } from '../models/FlowiseClient';
-import { getSuggestions, predict } from '../services/chat.service';
-import {
-  ChatMessageMetadataType,
-  ChatMessageType,
-  IFileUpload,
-  PredictionData,
-  SourceDocument,
-  ToolUsage,
-} from '../types/flowise.type';
-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;
-  agentId?: string;
-  initialMessages: ChatMessageType[];
-  initialInput?: string;
-};
-
-type ReturnType = {
-  messages?: ChatMessageType[];
-  setMessages: (messages: ChatMessageType[]) => void;
-  handleSubmit: (event?: { preventDefault?: () => void }) => void;
-  input?: string;
-  setInput: (input: string) => void;
-  isLoading: boolean;
-  stop: () => void;
-  chatId: string;
-  append: (message: ChatMessageType) => Promise<void>;
-  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, 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;
-    setChatId(uuid);
-  };
-
-  useEffect(() => {
-    if (id) {
-      updateChatId(id);
-    }
-  }, [id]);
-
-  useEffect(() => {
-    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
-  ) => {
-    // Do an optimistic update to the chat state to show the updated messages immediately:
-    mutateMessages(msgs, false);
-
-    const newMessage: ChatMessageType = {
-      id: generateUUID(),
-      chatId: chatIdRef.current,
-      role: 'apiMessage',
-      content: '',
-      createdDate: new Date().toISOString(),
-    };
-
-    const onUpdate = (chunk: StreamResponse) => {
-      if (chunk?.event === 'token') {
-        newMessage.content = newMessage.content + (chunk.data as string);
-        mutateMessages([...msgs, { ...newMessage }]);
-      } else if (chunk.event == 'usedTools') {
-        newMessage.usedTools = chunk.data as ToolUsage[];
-        mutateMessages([...msgs, { ...newMessage }]);
-      } else if (chunk.event == 'sourceDocuments') {
-        newMessage.sourceDocuments = chunk.data as SourceDocument[];
-        mutateMessages([...msgs, { ...newMessage }]);
-      } else if (chunk.event == 'metadata') {
-        newMessage.metaData = chunk.data as ChatMessageMetadataType;
-        const lastMsg = msgs[msgs.length - 1];
-        if (lastMsg) {
-          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 }]);
-      }
-    };
-
-    return await predict({
-      req,
-      apiHost,
-      onUpdate,
-    });
-  };
-
-  // Store a empty array as the initial messages
-  // (instead of using a default parameter value that gets re-created each time)
-  // to avoid re-renders:
-  const [initialMessagesFallback] = useState([]);
-
-  // Store the chat state in SWR, using the chatId as the key to share states.
-  const { data: messages, mutate: mutateMessages } = useSWR<ChatMessageType[]>(
-    [chatId, 'messages'],
-    null,
-    { fallbackData: initialMessages ?? initialMessagesFallback }
-  );
-
-  // Keep the latest messages in a ref.
-  const messagesRef = useRef<ChatMessageType[]>(messages || []);
-  useEffect(() => {
-    messagesRef.current = messages || [];
-  }, [messages]);
-
-  // We store loading state in another hook to sync loading states across hook invocations
-  const { data: isLoading = false, mutate: mutateLoading } = useSWR<boolean>(
-    [chatId, 'loading'],
-    null
-  );
-
-  // Abort controller to cancel the current API call.
-  const abortControllerRef = useRef<AbortController | null>(null);
-
-  const triggerRequest = useCallback(
-    async (msgs: ChatMessageType[], req: PredictionData) => {
-      try {
-        mutateLoading(true);
-
-        const abortController = new AbortController();
-        abortControllerRef.current = abortController;
-
-        await processResponseStream(msgs, req);
-
-        abortControllerRef.current = null;
-      } catch (err) {
-        // Ignore abort errors as they are expected.
-        if ((err as any).name === 'AbortError') {
-          abortControllerRef.current = null;
-          return null;
-        }
-
-        console.error(err);
-      } finally {
-        mutateLoading(false);
-      }
-    },
-    [mutateMessages, mutateLoading]
-  );
-
-  const append = async (message: ChatMessageType) => {
-    if (!message.content) {
-      return;
-    }
-    const msgs = messagesRef.current.concat({
-      id: generateUUID(),
-      chatId: chatIdRef.current,
-      role: 'userMessage',
-      content: message.content,
-      createdDate: new Date().toISOString(),
-    });
-
-    triggerRequest(msgs, {
-      chatId: chatIdRef.current,
-      question: message.content,
-      chatflowId: bot?.id,
-      overrideConfig: overrideConfig,
-      tts: enableTTS,
-    });
-    setInput('');
-  };
-
-  const stop = useCallback(() => {
-    if (abortControllerRef.current) {
-      abortControllerRef.current?.abort();
-      abortControllerRef.current = null;
-    }
-  }, []);
-
-  const setMessages = useCallback(
-    (msgs: ChatMessageType[]) => {
-      mutateMessages(msgs, false);
-      messagesRef.current = msgs;
-    },
-    [mutateMessages]
-  );
-
-  // Input state and handlers.
-  const [input, setInput] = useState(initialInput);
-
-  const handleSubmit = useCallback(
-    async (event?: { preventDefault?: () => void }, files?: IFileUpload[]) => {
-      event?.preventDefault?.();
-
-      if (!input && !files) return;
-
-      const msgs = messagesRef.current.concat({
-        id: generateUUID(),
-        chatId: chatIdRef.current,
-        role: 'userMessage',
-        content: input || '',
-        createdDate: new Date().toISOString(),
-        fileUploads: files || [],
-      });
-
-      triggerRequest(msgs, {
-        chatId: chatIdRef.current,
-        question: input || '',
-        uploads: files || [],
-        chatflowId: bot?.id,
-        overrideConfig: overrideConfig,
-        tts: enableTTS,
-      });
-      setInput('');
-    },
-    [input, triggerRequest, bot]
-  );
-
-  return {
-    messages,
-    setMessages,
-    input,
-    setInput,
-    isLoading,
-    handleSubmit,
-    stop,
-    chatId,
-    append,
-    bot,
-    enableTTS,
-    setEnableTTS,
-    suggestions
-  };
-};

package/src/hooks/useChatData.tsx

@@ -1,68 +0,0 @@
-import React, { createContext, useEffect, useState } from 'react';
-import { EVENT_TYPE } from '../models';
-import { getChatMessage } from '../services/chat.service';
-import { ChatMessageType } from '../types/flowise.type';
-import { generateUUID } from '../utils/commonUtils';
-import { useConfiguration } from './useConfiguration';
-import { SuggestionType } from '../types/common.type';
-
-type ChatData = {
-  chatId?: string | undefined;
-  listeners?: Record<EVENT_TYPE, (props: any) => void>;
-  initialMessages?: ChatMessageType[];
-  suggestedActions?: SuggestionType[];
-};
-
-const ChatDataContext = createContext<ChatData | undefined>(undefined);
-
-export const ChatDataProvider = ({
-  children,
-  data,
-}: {
-  children: React.ReactNode;
-  data: ChatData;
-}) => {
-  const [chatData, setChatData] = useState<ChatData>({
-    ...data,
-    chatId: data.chatId || generateUUID(),
-  });
-
-  const { apiHost } = useConfiguration();
-
-  const fetchHistory = async () => {
-    if (!chatData?.chatId) {
-      return;
-    }
-
-    const initialMessages = await getChatMessage({
-      chatId: chatData.chatId!,
-      apiHost,
-    });
-    setChatData({
-      ...chatData,
-      initialMessages,
-    });
-  };
-
-  useEffect(() => {
-    setChatData({ ...data, chatId: chatData.chatId });
-  }, [data]);
-
-  useEffect(() => {
-    fetchHistory();
-  }, [chatData?.chatId]);
-
-  return (
-    <ChatDataContext.Provider value={chatData}>
-      {children}
-    </ChatDataContext.Provider>
-  );
-};
-
-export const useChatData = () => {
-  const context = React.useContext(ChatDataContext);
-  if (context === undefined) {
-    throw new Error('useChatData must be used within a ChatDataContext');
-  }
-  return context;
-};

package/src/hooks/useConfiguration.tsx

@@ -1,56 +0,0 @@
-import React, { createContext, useEffect, useState } from 'react';
-
-type ConfigurationData = {
-  apiHost: string;
-  agentId: string;
-  overrideConfig?: Record<string, any>;
-  theme?: {
-    avatar?: string;
-    input?: {
-      placeholder?: string;
-    };
-    overview?: {
-      title: string;
-      description?: string;
-    };
-  } & Record<string, unknown>;
-};
-
-const ConfigurationContext = createContext<ConfigurationData | undefined>(
-  undefined
-);
-
-export const ConfigurationProvider = ({
-  children,
-  config,
-}: {
-  children: React.ReactNode;
-  config: ConfigurationData;
-}) => {
-  const [configuration, setConfiguration] = useState<ConfigurationData>({
-    ...config,
-  });
-
-  useEffect(() => {
-    if (!config.apiHost) {
-      throw new Error('apiHost is required');
-    }
-    setConfiguration(config);
-  }, [config]);
-
-  return (
-    <ConfigurationContext.Provider value={configuration}>
-      {children}
-    </ConfigurationContext.Provider>
-  );
-};
-
-export const useConfiguration = () => {
-  const context = React.useContext(ConfigurationContext);
-  if (context === undefined) {
-    throw new Error(
-      'useConfiguration must be used within a ConfigurationProvider'
-    );
-  }
-  return context;
-};

package/src/hooks/useScrollToBottom.ts

@@ -1,31 +0,0 @@
-import { type RefObject, useEffect, useRef } from 'react';
-
-export function useScrollToBottom<T extends HTMLElement>(): [
-  RefObject<T>,
-  RefObject<T>,
-] {
-  const containerRef = useRef<T>(null);
-  const endRef = useRef<T>(null);
-
-  useEffect(() => {
-    const container = containerRef.current;
-    const end = endRef.current;
-
-    if (container && end) {
-      const observer = new MutationObserver(() => {
-        end.scrollIntoView({ behavior: 'instant', block: 'end' });
-      });
-
-      observer.observe(container, {
-        childList: true,
-        subtree: true,
-        attributes: true,
-        characterData: true,
-      });
-
-      return () => observer.disconnect();
-    }
-  }, []);
-
-  return [containerRef, endRef];
-}

package/src/index.ts

@@ -1 +0,0 @@
-export type { AgentWidgetType } from './features/AgentWidget';

package/src/models/FlowiseClient.ts

@@ -1,103 +0,0 @@
-import { PredictionData } from '../types/flowise.type';
-import { BE_API, LANGUAGE_HEADER } from '../commons/constants';
-
-interface FlowiseClientOptions {
-  baseUrl: string;
-  accessToken?: string;
-  host?: string;
-}
-
-export interface StreamResponse {
-  event: string;
-  data: unknown;
-}
-
-type PredictionResponse<T extends PredictionData> = T['streaming'] extends true
-  ? AsyncGenerator<StreamResponse, void, unknown> // Streaming returns an async generator
-  : Record<string, any>;
-
-export default class FlowiseClient {
-  private baseUrl: string;
-  private accessToken: string | undefined;
-  private host: string | undefined;
-
-  constructor(options: FlowiseClientOptions) {
-    this.baseUrl = options.baseUrl;
-    this.accessToken = options.accessToken || '';
-    this.host = options.host || BE_API;
-  }
-
-  // Method to create a new prediction and handle streaming response
-  async createPrediction<T extends PredictionData>(
-    data: T
-  ): Promise<PredictionResponse<T>> {
-    const { chatId, streaming = true, language } = data;
-
-    const predictionUrl = `${this.host}${this.baseUrl}/${chatId}`;
-    let apiLanguage: string = LANGUAGE_HEADER.en;
-    if (language) {
-      apiLanguage = LANGUAGE_HEADER[language];
-    }
-
-    const options: any = {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify(data),
-      language: apiLanguage,
-    };
-
-    if (this.accessToken) {
-      options.headers['Authorization'] = `Bearer ${this.accessToken}`;
-    }
-
-    if (streaming) {
-      return {
-        async *[Symbol.asyncIterator]() {
-          const response = await fetch(predictionUrl, options);
-
-          if (!response.ok) {
-            throw new Error(`HTTP error! status: ${response.status}`);
-          }
-
-          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-          // @ts-ignore
-          const reader = response.body.getReader();
-          const decoder = new TextDecoder();
-          let buffer = '';
-
-          try {
-            while (true) {
-              const { done, value } = await reader.read();
-              if (done) break;
-
-              buffer += decoder.decode(value, { stream: true });
-              const lines = buffer.split('\n');
-              buffer = lines.pop() || '';
-
-              for (const line of lines) {
-                if (line.trim() === '') continue;
-                if (line.startsWith('data:')) {
-                  const stringifiedJson = line.replace('data:', '');
-                  const event = JSON.parse(stringifiedJson);
-                  yield event;
-                }
-              }
-            }
-          } finally {
-            reader.releaseLock();
-          }
-        },
-      } as unknown as Promise<PredictionResponse<T>>;
-    } else {
-      try {
-        const response = await fetch(predictionUrl, options);
-        const resp = await response.json();
-        return resp as Promise<PredictionResponse<T>>;
-      } catch (error) {
-        throw new Error('Error creating prediction');
-      }
-    }
-  }
-}

package/src/models.ts

@@ -1 +0,0 @@
-export type EVENT_TYPE = 'CONNECT' | 'DISCONNECT';