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

package/src/components/Chat/MultimodalInput.tsx

@@ -1,505 +0,0 @@
-import { motion } from 'framer-motion';
-import {
-  type ChangeEvent,
-  FC,
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-} from 'react';
-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 {
-  ArrowUpIcon,
-  CheckCirclFillIcon,
-  ClikCloseIcon,
-  ClikMessageIcon,
-  ClikMicrophoneIcon,
-  ClikPlusIcon,
-  ClikVolumeIcon,
-  ClikWaveIcon,
-  StopIcon,
-} from './Icons';
-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 { 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;
-  setInput: (value: string) => void;
-  isLoading: boolean;
-  stop: () => void;
-  messages: ChatMessageType[];
-  setMessages: (messages: ChatMessageType[]) => void;
-  chatId: string;
-  handleSubmit: (
-    event?: { preventDefault?: () => void },
-    files?: IFileUpload[]
-  ) => void;
-  className?: string;
-  append?: (message: ChatMessageType) => Promise<void>;
-  attachments?: IFileUpload[];
-  setAttachments?: (func: (files: IFileUpload[]) => IFileUpload[]) => void;
-  bot: BotType | null;
-  apiHost: string;
-  setEnableTTS: (value: boolean) => void;
-  enableTTS: boolean;
-  suggestedActions?: SuggestionType[];
-};
-
-export const MultimodalInput: FC<PropsType> = ({
-  input,
-  setInput,
-  isLoading,
-  stop,
-  messages,
-  setMessages,
-  chatId,
-  handleSubmit,
-  className,
-  append,
-  attachments,
-  setAttachments,
-  bot,
-  apiHost,
-  setEnableTTS,
-  enableTTS,
-  suggestedActions,
-}) => {
-  const { theme } = useConfiguration();
-  const {
-    isRecording,
-    setIsRecording,
-    onRecordingCancelled,
-    onRecordingStopped,
-    elapsedTime,
-    isLoadingRecording,
-  } = 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();
-    }
-  }, []);
-
-  const adjustHeight = () => {
-    if (textareaRef.current) {
-      (textareaRef.current as HTMLTextAreaElement).style.height = 'auto';
-      (textareaRef.current as HTMLTextAreaElement).style.height =
-        `${textareaRef.current?.scrollHeight + 2}px`;
-    }
-  };
-
-  const [localStorageInput, setLocalStorageInput] = useLocalStorage(
-    'input',
-    ''
-  );
-
-  useEffect(() => {
-    if (textareaRef.current) {
-      const domValue = textareaRef.current?.value;
-      // Prefer DOM value over localStorage to handle hydration
-      const finalValue = domValue || localStorageInput || '';
-      setInput(finalValue);
-      adjustHeight();
-    }
-    // Only run once after hydration
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  useEffect(() => {
-    setLocalStorageInput(input);
-  }, [input, setLocalStorageInput]);
-
-  const handleInput = (event: ChangeEvent<HTMLTextAreaElement>) => {
-    setInput(event.target.value);
-    adjustHeight();
-    if (suggestedActionRows !== defaultRows)
-      setSuggestedActionRows(defaultRows);
-  };
-
-  const fileInputRef = useRef<HTMLInputElement | null>(null);
-  const [uploadQueue, setUploadQueue] = useState<Array<string>>([]);
-
-  const submitForm = useCallback(async () => {
-    handleSubmit(undefined, attachments);
-    setLocalStorageInput('');
-    if (setAttachments) {
-      setAttachments((_) => []);
-      if (fileInputRef.current) {
-        (fileInputRef.current as HTMLInputElement).value = '';
-      }
-    }
-    if (width && width > 768) {
-      textareaRef.current?.focus();
-    }
-  }, [handleSubmit, setLocalStorageInput, width, attachments, chatId, bot]);
-
-  const uploadFile = useCallback(
-    async (file: File) => {
-      const formData = new FormData();
-      formData.append('file', file, generateExtendedFileName(file.name));
-      try {
-        return await createAttachments({
-          chatId,
-          apiHost,
-          body: formData,
-        });
-      } catch (error) {
-        console.error('Failed to upload file, please try again!');
-      }
-    },
-    [chatId]
-  );
-
-  const toAudioBase64 = (blob: Blob) => {
-    return new Promise<IFileUpload>((resolve) => {
-      let mimeType = '';
-      const pos = blob.type.indexOf(';');
-      if (pos === -1) {
-        mimeType = blob.type;
-      } else {
-        mimeType = blob.type.substring(0, pos);
-      }
-
-      // read blob and add to previews
-      const reader = new FileReader();
-      reader.readAsDataURL(blob);
-      reader.onloadend = () => {
-        const base64data = reader.result as string;
-        const upload: IFileUpload = {
-          tempId: generateUUID(),
-          data: base64data,
-          type: 'audio',
-          name: `audio_${Date.now()}.wav`,
-          mime: mimeType,
-        };
-        resolve(upload);
-      };
-    });
-  };
-
-  const toBase64 = async (
-    file: File,
-    type = 'file'
-  ): Promise<IFileUpload | undefined> => {
-    return new Promise((resolve, reject) => {
-      const reader = new FileReader();
-      reader.readAsDataURL(file);
-      reader.onload = () => {
-        resolve({
-          tempId: generateUUID(),
-          data: reader.result as string,
-          type,
-          name: generateExtendedFileName(file.name),
-          mime: file.type,
-        });
-      };
-      reader.onerror = () => {
-        reject();
-      };
-    });
-  };
-
-  const checkUploadFile = useCallback(
-    async (file: File): Promise<IFileUpload | undefined> => {
-      if (file.type.startsWith('image')) {
-        return toBase64(file);
-      } else {
-        setUploadQueue([file.name]);
-        const response: any = await uploadFile(file);
-        if (response?.type == 'file:full') {
-          const f = response.result[0];
-          if (!f) {
-            return;
-          }
-          return {
-            tempId: generateUUID(),
-            data: f.content,
-            name: f.name,
-            mime: f.mimeType,
-            type: response?.type,
-          };
-        } else if (response?.type == 'file:rag') {
-          const { addedDocs } = response.result;
-          if (!addedDocs.length) {
-            return;
-          }
-          return toBase64(file, response?.type);
-        }
-      }
-    },
-    [setUploadQueue, uploadFile]
-  );
-
-  const handleLogicShowFAQ = () => {
-    setSuggestedActionRows(
-      suggestedActionRows === defaultRows ? expandedRows : defaultRows
-    );
-  };
-
-  const handleFileChange = useCallback(
-    async (event: ChangeEvent<HTMLInputElement>) => {
-      const files = Array.from(event.target.files || []);
-      try {
-        const uploadPromises = files.map((file) => checkUploadFile(file));
-        const uploadedAttachments = await Promise.all(uploadPromises);
-        const successfullyUploadedAttachments = uploadedAttachments.filter(
-          (attachment) => attachment !== undefined
-        ) as IFileUpload[];
-        if (setAttachments) {
-          setAttachments((currentAttachments: IFileUpload[]) => [
-            ...currentAttachments,
-            ...successfullyUploadedAttachments,
-          ]);
-        }
-      } catch (error) {
-        console.error('Error uploading files!', error);
-      } finally {
-        setUploadQueue([]);
-      }
-    },
-    [setAttachments, checkUploadFile]
-  );
-
-  const handleSubmitRecording = useCallback(
-    async (blob: Blob) => {
-      try {
-        const audioFile = await toAudioBase64(blob);
-        handleSubmit(undefined, [audioFile]);
-        setIsRecording(false);
-      } catch (error) {
-        console.error('Error uploading files!', error);
-      }
-    },
-    [handleSubmit, setIsRecording]
-  );
-
-  const handleSend = useCallback(async () => {
-    if (isRecording) {
-      onRecordingStopped(handleSubmitRecording);
-    } else {
-      submitForm();
-    }
-  }, [submitForm, onRecordingStopped, handleSubmitRecording]);
-
-  return (
-    <div className="relative w-full flex flex-col gap-4">
-      {!!suggestedActions?.length && (
-        <SuggestedActions
-          suggestedActions={suggestedActions}
-          append={append}
-          layoutMode={suggestedActionLayoutMode}
-          suggestedActionRows={suggestedActionRows}
-        />
-      )}
-
-      <input
-        type="file"
-        className="fixed -top-4 -left-4 size-0.5 opacity-0 pointer-events-none"
-        ref={fileInputRef}
-        multiple
-        onChange={handleFileChange}
-        tabIndex={-1}
-      />
-
-      {((attachments && attachments.length > 0) || uploadQueue.length > 0) && (
-        <div className="flex flex-row gap-2 overflow-x-scroll items-end">
-          {attachments?.map((attachment) => (
-            <PreviewAttachment
-              key={attachment.tempId}
-              attachment={attachment}
-            />
-          ))}
-
-          {uploadQueue.map((filename) => (
-            <PreviewAttachment
-              key={filename}
-              attachment={{
-                data: '',
-                name: filename,
-                mime: '',
-                type: '',
-              }}
-              isUploading
-            />
-          ))}
-        </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 bg-[#ffffff]',
-          className
-        )}
-        rows={3}
-        autoFocus
-        onKeyDown={(event) => {
-          if (event.key === 'Enter' && !event.shiftKey) {
-            event.preventDefault();
-            if (isLoading) {
-              console.error(
-                'Please wait for the model to finish its response!'
-              );
-            } else if (uploadQueue.length) {
-              console.error('Please wait for file is uploading!');
-            } else {
-              handleSend();
-            }
-          }
-        }}
-      />
-
-      {isLoading ? (
-        <Button
-          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();
-            setMessages(messages);
-          }}
-        >
-          <StopIcon size={14} />
-        </Button>
-      ) : (
-        <Button
-          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();
-          }}
-          disabled={
-            !isRecording && (input.length === 0 || !!uploadQueue.length)
-          } // zero input or uploading
-        >
-          <ArrowUpIcon size={14} />
-        </Button>
-      )}
-
-      <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>
-        )}
-      </div>
-    </div>
-  );
-};

package/src/components/Chat/Overview.tsx

@@ -1,46 +0,0 @@
-import { motion } from 'framer-motion';
-import { FC } from 'react';
-import { BotType } from '../../types/bot.type';
-import { useConfiguration } from '../../hooks/useConfiguration';
-
-type PropsType = {
-  bot: BotType | null;
-};
-export const Overview: FC<PropsType> = ({ bot }: PropsType) => {
-  const { theme } = useConfiguration();
-  return (
-    <motion.div
-      key="overview"
-      className="max-w-3xl m-auto md:mt-20"
-      initial={{ opacity: 0, scale: 0.98 }}
-      animate={{ opacity: 1, scale: 1 }}
-      exit={{ opacity: 0, scale: 0.98 }}
-      transition={{ delay: 0.5 }}
-    >
-      <div className="rounded-xl p-6 flex flex-col gap-2 leading-relaxed text-center max-w-xl">
-        <p className="flex flex-row justify-center gap-4 items-center"></p>
-        {!theme?.overview ? (
-          <>
-            {bot?.avatar && (
-              <img
-                src={bot?.avatar}
-                alt={bot?.name ?? 'Avatar'}
-                width={40}
-                height={40}
-                className="rounded-full m-auto"
-              />
-            )}
-            <p className="font-semibold text-xl">{bot?.name}</p>
-          </>
-        ) : (
-          <>
-            <p className="font-semibold text-xl">{theme?.overview?.title}</p>
-            <p>{theme?.overview?.description}</p>
-          </>
-        )}
-      </div>
-    </motion.div>
-  );
-};
-
-export default Overview;

package/src/components/Chat/PreviewAttachment.tsx

@@ -1,46 +0,0 @@
-import { IFileUpload } from '../../types/flowise.type';
-import { LoaderIcon } from './Icons';
-import React from 'react';
-
-export const PreviewAttachment = ({
-  attachment,
-  isUploading = false,
-}: {
-  attachment: IFileUpload;
-  isUploading?: boolean;
-}) => {
-  const { name, data, mime, tempId } = attachment;
-  return (
-    <div className="flex flex-col gap-2">
-      <div className="w-30 p-0 max-w-[400px] bg-muted rounded-md relative flex flex-col items-center justify-center">
-        {data ? (
-          mime.startsWith('audio') ? (
-            <audio controls>
-              <source src={data} type={mime} />
-            </audio>
-          ) : mime.startsWith('image') ? (
-            <img
-              key={tempId}
-              src={data}
-              alt={name ?? 'An image attachment'}
-              className="rounded-md size-full object-contain"
-            />
-          ) : (
-            <div className="w-full text-left truncate">{name}</div>
-          )
-        ) : (
-          <div className="w-full text-left truncate">{name}</div>
-        )}
-
-        {isUploading && (
-          <div className="animate-spin absolute text-zinc-500">
-            <LoaderIcon />
-          </div>
-        )}
-      </div>
-      {/*<div className="text-xs text-zinc-500 max-w-[200px] truncate ">*/}
-      {/*  {name}*/}
-      {/*</div>*/}
-    </div>
-  );
-};

package/src/components/Chat/SuggestedActions.tsx

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