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

package/src/components/Chat/MultimodalInput.tsx

@@ -1,479 +0,0 @@
-import {
-  type ChangeEvent,
-  FC,
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-} from 'react';
-import { motion } from 'framer-motion';
-import { useLocalStorage, useWindowSize } from 'usehooks-ts';
-import {
-  cn,
-  generateExtendedFileName,
-  generateUUID,
-} from '../../utils/commonUtils';
-import { PreviewAttachment } from './PreviewAttachment';
-import {
-  ArrowUpIcon,
-  CircleDotIcon,
-  MicrophoneIcon,
-  PlusIcon,
-  StopIcon,
-  TrashIcon,
-  VolumeIcon,
-} from './Icons';
-import { ChatMessageType, IFileUpload } from '../../types/flowise.type';
-import { BotType } from '../../types/bot.type';
-
-import { createAttachments } from '../../services/chat.service';
-import { Button } from './ui/Button';
-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;
-  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();
-  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();
-  };
-
-  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 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 && (
-        <div className="grid sm:grid-cols-2 gap-2 w-full">
-          {suggestedActions.map((suggestedAction, index) => (
-            <motion.div
-              initial={{ opacity: 0, y: 20 }}
-              animate={{ opacity: 1, y: 0 }}
-              exit={{ opacity: 0, y: 20 }}
-              transition={{ delay: 0.05 * index }}
-              key={`suggested-action-${suggestedAction.title}-${index}`}
-              className={index > 1 ? 'hidden sm:block' : 'block'}
-            >
-              <Button
-                variant="ghost"
-                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>
-            </motion.div>
-          ))}
-        </div>
-      )}
-
-      <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',
-          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"
-          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"
-          onClick={(event) => {
-            event.preventDefault();
-            handleSend();
-          }}
-          disabled={
-            !isRecording && (input.length === 0 || !!uploadQueue.length)
-          } // zero input or uploading
-        >
-          <ArrowUpIcon size={14} />
-        </Button>
-      )}
-      {isRecording ? (
-        <>
-          <div
-            className="rounded-full bg-background flex absolute p-1 bottom-2 right-[80px]"
-            data-testid="input"
-          >
-            <div className="flex items-center gap-3">
-              <span>
-                <CircleDotIcon color="red" />
-              </span>
-              <span>{elapsedTime || '00:00'}</span>
-              {isLoadingRecording && <span className="ml-1.5">Sending...</span>}
-            </div>
-          </div>
-          <Button
-            className="rounded-full p-1.5 h-fit absolute bottom-2 right-11 m-0.5 dark:border-zinc-700"
-            variant="outline"
-            onClick={(event) => {
-              event.preventDefault();
-              onRecordingCancelled();
-            }}
-          >
-            <TrashIcon size={14} color="red" />
-          </Button>
-        </>
-      ) : (
-        <>
-          <Button
-            className="rounded-full p-1.5 h-fit absolute bottom-2 right-11 m-0.5 dark:border-zinc-700"
-            onClick={(event) => {
-              event.preventDefault();
-              setIsRecording(true);
-            }}
-            variant="outline"
-            disabled={isLoading}
-          >
-            <MicrophoneIcon size={14} />
-          </Button>
-          <Button
-            className={`rounded-full p-1.5 h-fit absolute bottom-2 right-[80px] m-0.5 dark:border-zinc-700 ${enableTTS ? 'text-white hover:bg-primary/90 bg-primary' : ''}`}
-            onClick={(event) => {
-              event.preventDefault();
-              setEnableTTS(!enableTTS);
-            }}
-            variant="outline"
-            disabled={isLoading}
-          >
-            <VolumeIcon />
-          </Button>
-        </>
-      )}
-
-      <Button
-        className="rounded-full p-1.5 h-fit absolute bottom-2 left-2 m-0.5 dark:border-zinc-700"
-        onClick={(event) => {
-          event.preventDefault();
-          fileInputRef.current?.click();
-        }}
-        variant="outline"
-        disabled={isLoading || isRecording}
-      >
-        <PlusIcon size={14} />
-      </Button>
-    </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/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;
-//     }
-//   }
-// }