@clikvn/agent-widget-embedded 0.0.1-dev

package/src/components/Chat/MultimodalInput.tsx

@@ -0,0 +1,371 @@
+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, PaperclipIcon, StopIcon } 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';
+
+const suggestedActions = [
+  {
+    title: 'What is the weather',
+    label: 'in Ha Noi?',
+    action: 'What is the weather in Ha Noi?',
+  },
+  {
+    title: 'Create a travel plan for an traveling',
+    label: 'to Ha Noi',
+    action: 'Create a travel plan for an traveling to Ha Noi',
+  },
+  {
+    title: 'Top of tourist attractions',
+    label: 'in Ha Noi',
+    action: 'Top of tourist attractions in Ha Noi',
+  },
+  {
+    title: 'List of museums',
+    label: 'in Ha Noi',
+    action: 'List of museums in Ha Noi',
+  },
+];
+
+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;
+};
+
+export const MultimodalInput: FC<PropsType> = ({
+  input,
+  setInput,
+  isLoading,
+  stop,
+  messages,
+  setMessages,
+  chatId,
+  handleSubmit,
+  className,
+  append,
+  attachments,
+  setAttachments,
+  bot,
+  apiHost,
+}) => {
+  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((currentAttachments: IFileUpload[]) => []);
+      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 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]
+  );
+
+  return (
+    <div className="relative w-full flex flex-col gap-4">
+      {messages.length === 0 && (
+        <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={async () => {
+                  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">{suggestedAction.title}</span>
+                <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="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 {
+              submitForm();
+            }
+          }
+        }}
+      />
+
+      {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();
+            submitForm();
+          }}
+          disabled={input.length === 0 || !!uploadQueue.length}
+        >
+          <ArrowUpIcon size={14} />
+        </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();
+          fileInputRef.current?.click();
+        }}
+        variant="outline"
+        disabled={isLoading}
+      >
+        <PaperclipIcon size={14} />
+      </Button>
+    </div>
+  );
+};

package/src/components/Chat/Overview.tsx

@@ -0,0 +1,47 @@
+import { motion } from 'framer-motion';
+import { FC } from 'react';
+import { BotType } from '../../types/bot.type';
+
+type PropsType = {
+  bot: BotType | null;
+};
+export const Overview: FC<PropsType> = ({ bot }: PropsType) => {
+  return (
+    <motion.div
+      key="overview"
+      className="max-w-3xl mx-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>
+        {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>
+          {/* You can learn more about the AI by visiting the{' '}*/}
+          {/* <Link*/}
+          {/*  className="font-medium underline underline-offset-4"*/}
+          {/*  href="https://showai.ai"*/}
+          {/*  target="_blank"*/}
+          {/* >*/}
+          {/*  ShowAI*/}
+          {/* </Link>*/}
+          {/* .*/}
+        </p>
+      </div>
+    </motion.div>
+  );
+};
+
+export default Overview;

package/src/components/Chat/PreviewAttachment.tsx

@@ -0,0 +1,41 @@
+import { IFileUpload } from '../../types/flowise.type';
+import { LoaderIcon } from './Icons';
+
+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-2 max-w-[200px] bg-muted rounded-md relative flex flex-col items-center justify-center">
+        {data ? (
+          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

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

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

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

package/src/env.d.ts

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

package/src/features/AgentWidget/index.tsx

@@ -0,0 +1,47 @@
+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';
+
+export type AgentWidgetType = {
+  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 AgentWidget: FC<AgentWidgetType> = (props: AgentWidgetType) => {
+  return (
+    <div className="w-full h-full text-sm">
+      <style>{styles}</style>
+      <style>{commonStyles}</style>
+      <ConfigurationProvider
+        config={{
+          apiHost: props.apiHost,
+          agentId: props.agentId,
+          listeners: props.listeners,
+          overrideConfig: props.overrideConfig,
+          theme: props.theme,
+        }}
+      >
+        <ChatDataProvider
+          data={{
+            chatId: props.overrideConfig?.chatId,
+            theme: props.theme,
+          }}
+        >
+          <Agent />
+        </ChatDataProvider>
+      </ConfigurationProvider>
+    </div>
+  );
+};
+
+export default AgentWidget;

package/src/global.d.ts

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