@clikvn/agent-widget-embedded 0.0.1-dev

package/src/hooks/useChat.ts

@@ -0,0 +1,225 @@
+import useSWR from 'swr';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { StreamResponse } from '../models/FlowiseClient';
+import { predict } from '../services/chat.service';
+import {
+  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';
+
+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;
+};
+
+export const useChat = (props: PropsType): ReturnType => {
+  const { id, initialMessages, initialInput, agentId } = props;
+  const { apiHost } = useConfiguration();
+
+  const idKey = id ?? generateUUID();
+  const chatIdRef = useRef<string>(idKey);
+  const [chatId, setChatId] = useState(idKey);
+  const [bot, setBot] = useState<BotType | null>(null);
+
+  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]);
+
+  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 }]);
+      }
+    };
+
+    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,
+    });
+    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) 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,
+      });
+      setInput('');
+    },
+    [input, triggerRequest, bot]
+  );
+
+  return {
+    messages,
+    setMessages,
+    input,
+    setInput,
+    isLoading,
+    handleSubmit,
+    stop,
+    chatId,
+    append,
+    bot,
+  };
+};

package/src/hooks/useChatData.tsx

@@ -0,0 +1,68 @@
+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';
+
+type ChatData = {
+  chatId?: string | undefined;
+  theme?: {
+    avatar?: string;
+  } & Record<string, unknown>;
+  listeners?: Record<EVENT_TYPE, (props: any) => void>;
+  initialMessages?: ChatMessageType[];
+};
+
+const ChatDataContext = createContext<ChatData | undefined>(undefined);
+
+export const ChatDataProvider = ({
+  children,
+  data,
+}: {
+  children: React.ReactNode;
+  data: ChatData;
+}) => {
+  const [chatData, setChatData] = useState<ChatData>({
+    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

@@ -0,0 +1,54 @@
+import React, { createContext, useEffect, useState } from 'react';
+import { EVENT_TYPE } from '../models';
+
+type ConfigurationData = {
+  apiHost: string;
+  agentId: string;
+  overrideConfig?: {
+    chatId?: string | undefined;
+  } & Record<string, unknown>;
+  theme?: {
+    avatar?: string;
+  } & Record<string, unknown>;
+  listeners?: Record<EVENT_TYPE, (props: any) => void>;
+};
+
+const ConfigurationContext = createContext<ConfigurationData | undefined>(
+  undefined
+);
+
+export const ConfigurationProvider = ({
+  children,
+  config,
+}: {
+  children: React.ReactNode;
+  config: ConfigurationData;
+}) => {
+  const [configuration, setConfiguration] = useState<ConfigurationData>({
+    apiHost: config.apiHost,
+    agentId: config.agentId,
+  });
+
+  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

@@ -0,0 +1,31 @@
+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

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

package/src/models/FlowiseClient.ts

@@ -0,0 +1,103 @@
+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

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

package/src/register.tsx

@@ -0,0 +1,66 @@
+import { agentWidgetElementName } from './constants';
+import * as ReactDom from 'react-dom';
+import AgentWidget from './features/AgentWidget';
+import { EVENT_TYPE } from './models';
+
+type AgentType = {
+  apiHost: string;
+  agentId: string;
+  overrideConfig?: {
+    chatId?: string | undefined;
+  } & Record<string, unknown>;
+  theme?: {
+    avatar?: string;
+  } & Record<string, unknown>;
+  listeners?: Record<EVENT_TYPE, (props: any) => void>;
+};
+
+export class AgentWidgetComponent extends HTMLElement {
+  apiHost?: string;
+  agentId?: string;
+  overrideConfig?: {
+    chatId?: string | undefined;
+  } & Record<string, unknown>;
+  theme?: {
+    avatar?: string;
+  } & Record<string, unknown>;
+  listeners?: Record<EVENT_TYPE, (props: any) => void>;
+  constructor() {
+    super();
+    this.updateAttributes = this.updateAttributes.bind(this);
+  }
+
+  updateAttributes(attributes: AgentType) {
+    this.apiHost = attributes.apiHost;
+    this.agentId = attributes.agentId;
+    this.overrideConfig = attributes.overrideConfig;
+    this.listeners = attributes.listeners;
+    this.theme = attributes.theme;
+    this.render();
+  }
+
+  connectedCallback() {
+    if (this.apiHost) {
+      this.render();
+    }
+  }
+
+  render() {
+    ReactDom.render(
+      <AgentWidget
+        apiHost={this.apiHost || ''}
+        agentId={this.agentId || ''}
+        overrideConfig={this.overrideConfig}
+        listeners={this.listeners}
+        theme={this.theme}
+      />,
+      this
+    );
+  }
+}
+export const registerWebComponents = () => {
+  if (typeof window === 'undefined') return;
+  if (!customElements.get(agentWidgetElementName)) {
+    customElements.define(agentWidgetElementName, AgentWidgetComponent);
+  }
+};

package/src/services/apis.ts

@@ -0,0 +1,10 @@
+export const API_VERSION = '/ext/v1';
+export const API_CHATS = `/chats`;
+
+export const API_CHAT_MESSAGE = `${API_CHATS}/chatmessage`;
+
+export const API_PREDICTION = `${API_CHATS}/prediction`;
+
+export const API_CHATBOTS = `${API_VERSION}/bots`;
+
+export const API_CREATE_ATTACHMENTS = `${API_CHATS}/attachments`;

package/src/services/bot.service.ts

@@ -0,0 +1,15 @@
+import { API_CHATBOTS } from './apis';
+import { BotType } from '../types/bot.type';
+import { request } from '../utils/requestUtils';
+
+export const getBot = async (id: string, apiHost: string): Promise<BotType> => {
+  const headers = {
+    'Content-Type': 'application/json',
+  };
+
+  return request({
+    host: apiHost,
+    url: `${API_CHATBOTS}/${id}`,
+    headers,
+  });
+};