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

package/src/components/Chat/ui/Button.tsx

@@ -1,55 +0,0 @@
-import { Slot } from '@radix-ui/react-slot';
-import { cn } from '../../../utils/commonUtils';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { ButtonHTMLAttributes, forwardRef } from 'react';
-
-const buttonVariants = cva(
-  'inline-flex items-center gap-2 justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
-  {
-    variants: {
-      variant: {
-        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
-        destructive:
-          'bg-destructive text-destructive-foreground hover:bg-destructive/90',
-        outline:
-          'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
-        secondary:
-          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
-        ghost: 'hover:bg-accent hover:text-accent-foreground',
-        link: 'text-primary underline-offset-4 hover:underline',
-      },
-      size: {
-        default: 'h-10 px-4 py-2',
-        sm: 'h-9 rounded-md px-3',
-        lg: 'h-11 rounded-md px-8',
-        icon: 'h-10 w-10',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-      size: 'default',
-    },
-  }
-);
-
-export interface ButtonProps
-  extends ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
-  asChild?: boolean;
-}
-
-const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : 'button';
-    return (
-      <Comp
-        className={cn(buttonVariants({ variant, size, className }))}
-        ref={ref}
-        {...props}
-      />
-    );
-  }
-);
-Button.displayName = 'Button';
-
-export { Button, buttonVariants };

package/src/components/Chat/ui/Textarea.tsx

@@ -1,23 +0,0 @@
-import { cn } from '../../../utils/commonUtils';
-import { forwardRef, TextareaHTMLAttributes } from 'react';
-
-export interface TextareaProps
-  extends TextareaHTMLAttributes<HTMLTextAreaElement> {}
-
-const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
-  ({ className, ...props }, ref) => {
-    return (
-      <textarea
-        className={cn(
-          'flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
-          className
-        )}
-        ref={ref}
-        {...props}
-      />
-    );
-  }
-);
-Textarea.displayName = 'Textarea';
-
-export { Textarea };

package/src/constants.ts

@@ -1 +0,0 @@
-export const agentWidgetElementName = 'clik-agent-widget';

package/src/env.d.ts

@@ -1,10 +0,0 @@
-// export {};
-//
-// declare module 'solid-js' {
-//   namespace JSX {
-//     interface CustomEvents {
-//       click: MouseEvent;
-//       pointerdown: PointerEvent;
-//     }
-//   }
-// }

package/src/features/AgentWidget/index.tsx

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