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

package/src/components/Chat/Markdown.tsx

@@ -1,335 +0,0 @@
-import React, { FC, memo, useMemo, useState } from 'react';
-import ReactMarkdown, { type Components } from 'react-markdown';
-import remarkGfm from 'remark-gfm';
-import { ToolUsage } from '../../types/flowise.type';
-
-const PlaceName = ({ name, data, ...props }: any) => {
-  const [isDrawerOpen, setDrawerOpen] = useState(false);
-
-  const toggleDrawer = (show: boolean) => {
-    setDrawerOpen(show);
-  };
-
-  return (
-    <div className="relative group">
-      <a
-        {...props}
-        className="draggable-place relative -mx-1 -my-0.5 select-text items-baseline rounded-full px-1 py-0.5 font-semibold no-underline transition-colors hover:bg-foreground/5 data-[state=open]:bg-foreground/5"
-        data-id={name}
-        draggable="true"
-        href={`/attractions/${name}`}
-        onClick={(e) => {
-          e.preventDefault();
-          toggleDrawer(true);
-        }}
-      >
-        <span className="whitespace-nowrap">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="1.5"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            className="shrink-0 transform-cpu size-[1em] relative mr-0.5 mt-[-.125em] inline-block text-[1.25em]"
-          >
-            <path d="M18.75 9c0 3.735-6.75 12.75-6.75 12.75S5.25 12.735 5.25 9a6.75 6.75 0 0 1 13.5 0Z"></path>
-            <path d="M12 11.25a2.25 2.25 0 1 0 0-4.5 2.25 2.25 0 0 0 0 4.5Z"></path>
-          </svg>
-        </span>
-        <span>{name}</span>
-        <span className="ml-0.5 whitespace-nowrap">
-          <span>&#xFEFF;</span>
-          <span className="relative top-[-.1em] inline-flex size-3 shrink-0 items-center justify-center rounded-full bg-added text-added-foreground">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="7"
-              height="7"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="4"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              className="shrink-0 transform-cpu"
-            >
-              <path d="m3.643 13.993 3.51 4.513a1.285 1.285 0 0 0 2.006.038L20.357 4.993"></path>
-            </svg>
-          </span>
-        </span>
-      </a>
-      <div
-        className="absolute left-1/4 translate-y-1/2 bottom-full mb-2 w-80
-           invisible group-hover:visible opacity-0 group-hover:opacity-100
-           bg-background border rounded-lg shadow-lg
-           transition-opacity duration-300 z-10 hidden sm:block"
-      >
-        <div className="relative">
-          {!!(data.photos && data.photos[0]) && (
-            <img
-              src={data.photos[0].url}
-              alt="Card Image"
-              className="border rounded-lg w-full h-48 object-cover"
-            />
-          )}
-        </div>
-
-        <div className="p-4">
-          <div className="flex justify-between items-center mb-2">
-            <h3 className="text-lg font-semibold">{data.name}</h3>
-            <div className="flex items-center space-x-1">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                fill="currentColor"
-                className="w-5 h-5 text-yellow-500"
-                viewBox="0 0 24 24"
-              >
-                <path d="M12 17.27l5.18 3.73-1.64-6.81L21 9.24l-7.19-.61L12 2 10.19 8.63 3 9.24l5.46 4.95-1.64 6.81L12 17.27z" />
-              </svg>
-              <span className="text-sm">{data.rating}</span>
-            </div>
-          </div>
-
-          <p className="text-sm flex items-center">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              fill="currentColor"
-              className="w-5 h-5 mr-1"
-              viewBox="0 0 24 24"
-            >
-              <path d="M12 2C8.69 2 6 4.69 6 8c0 5.25 6 12 6 12s6-6.75 6-12c0-3.31-2.69-6-6-6zm0 8.5c-1.38 0-2.5-1.12-2.5-2.5S10.62 5.5 12 5.5s2.5 1.12 2.5 2.5S13.38 10.5 12 10.5z" />
-            </svg>
-            {data.address}
-          </p>
-        </div>
-      </div>
-      {isDrawerOpen && (
-        <div
-          className="fixed bottom-0 left-0 w-full h-full bg-background border-t
-            transform transition-transform duration-500 z-20 sm:hidden"
-        >
-          <div className="flex flex-col gap-2 p-4 pt-10 relative">
-            <button
-              className="font-bold absolute top-2 right-2"
-              onClick={() => toggleDrawer(false)}
-            >
-              Close
-            </button>
-            <div className="relative">
-              {!!(data.photos && data.photos[0]) && (
-                <img
-                  src={data.photos[0].url}
-                  alt="Card Image"
-                  className="border rounded-lg w-full h-48 object-cover"
-                />
-              )}
-            </div>
-            <h3 className="text-lg font-semibold">{data.name}</h3>
-            <p className="text-md">
-              <div className="flex items-center space-x-1">
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  fill="currentColor"
-                  className="w-5 h-5 text-yellow-500"
-                  viewBox="0 0 24 24"
-                >
-                  <path d="M12 17.27l5.18 3.73-1.64-6.81L21 9.24l-7.19-.61L12 2 10.19 8.63 3 9.24l5.46 4.95-1.64 6.81L12 17.27z" />
-                </svg>
-                <span className="text-md">{data.rating}</span>
-              </div>
-            </p>
-            <p className="text-md flex items-center">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                fill="currentColor"
-                className="w-5 h-5 mr-1"
-                viewBox="0 0 24 24"
-              >
-                <path d="M12 2C8.69 2 6 4.69 6 8c0 5.25 6 12 6 12s6-6.75 6-12c0-3.31-2.69-6-6-6zm0 8.5c-1.38 0-2.5-1.12-2.5-2.5S10.62 5.5 12 5.5s2.5 1.12 2.5 2.5S13.38 10.5 12 10.5z" />
-              </svg>
-              {data.address}
-            </p>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-};
-
-const NonMemoizedMarkdown: FC<{
-  children: string;
-  usedTools?: ToolUsage[];
-}> = (props) => {
-  const { children: content, usedTools } = props;
-  const components: Partial<Components> = useMemo(() => {
-    return {
-      code: ({ node, inline, className, children, ...rest }: any) => {
-        const match = /language-(\w+)/.exec(className || '');
-        return !inline && match ? (
-          <pre
-            {...rest}
-            className={`${className} text-sm w-[80dvw] md:max-w-[500px] overflow-x-scroll bg-zinc-100 p-3 rounded-lg mt-2 dark:bg-zinc-800`}
-          >
-            <code className={match[1]}>{children}</code>
-          </pre>
-        ) : (
-          <code
-            className={`${className} text-sm bg-zinc-100 dark:bg-zinc-800 py-0.5 px-1 rounded-md`}
-            {...rest}
-          >
-            {children}
-          </code>
-        );
-      },
-      ol: ({ node, children, ...rest }) => {
-        return (
-          <ol className="list-decimal list-outside ml-4" {...rest}>
-            {children}
-          </ol>
-        );
-      },
-      li: ({ node, children, ...rest }) => {
-        return (
-          <li className="py-1" {...rest}>
-            {children}
-          </li>
-        );
-      },
-      ul: ({ node, children, ...rest }) => {
-        return (
-          <ul className="list-decimal list-outside ml-4" {...rest}>
-            {children}
-          </ul>
-        );
-      },
-      strong: ({ node, children, ...rest }) => {
-        let target = null;
-        if (usedTools && usedTools.length && typeof children === 'string') {
-          const targetTools = usedTools.filter(
-            (usedTool) => usedTool.tool === 'search-traveling-places'
-          );
-          if (targetTools && targetTools.length) {
-            targetTools.find((targetTool) => {
-              try {
-                target = JSON.parse(targetTool.toolOutput).find((i: any) => {
-                  const arr = i.description?.split('.') || [];
-                  return (
-                    (children as string).indexOf(i.name) >= 0 ||
-                    (arr[0] && arr[0].indexOf(children as string) >= 0)
-                  );
-                });
-                return !!target;
-              } catch (e) {
-                console.log(targetTool.toolOutput);
-                return false;
-              }
-            });
-          }
-        }
-        return target ? (
-          <PlaceName name={children} data={target} {...rest} />
-        ) : (
-          <span className="font-semibold" {...rest}>
-            {children}
-          </span>
-        );
-      },
-      a: ({ node, children, ...rest }) => {
-        const content = children as string;
-        const isImageUrl =
-          content &&
-          (content.indexOf('.jpg') >= 0 ||
-            content.indexOf('.jpeg') >= 0 ||
-            content.indexOf('.png') >= 0 ||
-            content.indexOf('.gif') >= 0);
-        const isAudioUrl =
-          content &&
-          (content.indexOf('.mp3') >= 0 ||
-            content.indexOf('.wav') >= 0 ||
-            content.indexOf('.ogg') >= 0);
-        if (isAudioUrl) {
-          return (
-            <audio controls>
-              <source src={content} />
-            </audio>
-          );
-        } else if (isImageUrl) {
-          return (
-            <a href={content} target="_blank" rel="noopener noreferrer">
-              <img
-                src={content}
-                alt={content}
-                style={{ maxWidth: '100%', height: 'auto' }}
-              />
-            </a>
-          );
-        }
-        return (
-          <a
-            className="text-blue-500 hover:underline"
-            target="_blank"
-            rel="noreferrer"
-            {...rest}
-          >
-            {children}
-          </a>
-        );
-      },
-      h1: ({ node, children, ...rest }) => {
-        return (
-          <h1 className="text-3xl font-semibold mt-6 mb-2" {...rest}>
-            {children}
-          </h1>
-        );
-      },
-      h2: ({ node, children, ...rest }) => {
-        return (
-          <h2 className="text-2xl font-semibold mt-6 mb-2" {...rest}>
-            {children}
-          </h2>
-        );
-      },
-      h3: ({ node, children, ...rest }) => {
-        return (
-          <h3 className="text-xl font-semibold mt-6 mb-2" {...rest}>
-            {children}
-          </h3>
-        );
-      },
-      h4: ({ node, children, ...rest }) => {
-        return (
-          <h4 className="text-lg font-semibold mt-6 mb-2" {...rest}>
-            {children}
-          </h4>
-        );
-      },
-      h5: ({ node, children, ...rest }) => {
-        return (
-          <h5 className="text-base font-semibold mt-6 mb-2" {...rest}>
-            {children}
-          </h5>
-        );
-      },
-      h6: ({ node, children, ...rest }) => {
-        return (
-          <h6 className="text-sm font-semibold mt-6 mb-2" {...rest}>
-            {children}
-          </h6>
-        );
-      },
-    };
-  }, [usedTools]);
-  return (
-    <ReactMarkdown remarkPlugins={[remarkGfm]} components={components}>
-      {content}
-    </ReactMarkdown>
-  );
-};
-
-export const Markdown = memo(
-  NonMemoizedMarkdown,
-  (prevProps, nextProps) =>
-    prevProps.children === nextProps.children &&
-    prevProps.usedTools === nextProps.usedTools
-);

package/src/components/Chat/Message.tsx

@@ -1,217 +0,0 @@
-import { motion } from 'framer-motion';
-import { FC, useMemo } from 'react';
-import { SparklesIcon } from './Icons';
-import { Markdown } from './Markdown';
-import { PreviewAttachment } from './PreviewAttachment';
-import { BotType } from '../../types/bot.type';
-import {
-  MessageRoleType,
-  ChatMessageType,
-  ToolUsage,
-} from '../../types/flowise.type';
-import { cn } from '../../utils/commonUtils';
-import AudioPlayer from './AudioPlayer';
-import { useConfiguration } from 'hooks/useConfiguration';
-
-type PropsType = {
-  chatId?: string;
-  message: ChatMessageType;
-  isLoading: boolean;
-  bot: BotType | null;
-  enableTTS?: boolean;
-};
-
-const getRole = (role?: MessageRoleType) => {
-  if (role && role === 'userMessage') {
-    return 'user';
-  }
-
-  return 'assistant';
-};
-
-export const PreviewMessage: FC<PropsType> = ({
-  chatId,
-  message,
-  isLoading,
-  bot,
-  enableTTS,
-}) => {
-  const { theme } = useConfiguration();
-  const parseOutput = (outputData: any) => {
-    try {
-      return JSON.parse(outputData);
-    } catch (e) {
-      return null;
-    }
-  };
-
-  const usedTools = useMemo(() => {
-    const customToolResults: ToolUsage[] = [];
-    const toolResults: ToolUsage[] = [];
-    (message.usedTools || []).forEach((useTool) => {
-      if (useTool.tool === 'getWeather') {
-        customToolResults.push(useTool);
-      } else {
-        toolResults.push(useTool);
-      }
-    });
-    return { customToolResults, toolResults };
-  }, [message.usedTools]);
-
-  const role = useMemo(() => {
-    return getRole(message.role);
-  }, [message.role]);
-
-  const assistantAvatar =
-    role === 'user'
-      ? theme?.userMessage?.avatarSrc
-      : theme?.botMessage?.avatarSrc || bot?.avatar;
-
-  return (
-    <motion.div
-      className="w-full mx-auto max-w-3xl px-4 group/message"
-      initial={{ y: 5, opacity: 0 }}
-      animate={{ y: 0, opacity: 1 }}
-      data-role={role}
-    >
-      <div className="flex justify-end text-[14px]">
-        {message?.fileUploads && !!message.fileUploads.length && (
-          <PreviewAttachment attachment={message.fileUploads[0]} />
-        )}
-      </div>
-      <div
-        className={cn(
-          `group-data-[role=user]/message:bg-primary group-data-[role=user]/message:text-primary-foreground flex gap-4 px-3 w-full group-data-[role=user]/message:w-fit group-data-[role=user]/message:ml-auto group-data-[role=user]/message:max-w-2xl py-2 rounded-xl `
-        )}
-        style={{
-          backgroundColor:
-            role === 'user'
-              ? theme?.userMessage?.backgroundColor
-              : theme?.botMessage?.backgroundColor || undefined,
-        }}
-      >
-        {theme?.botMessage?.showAvatar && message.role === 'apiMessage' && (
-          <div className="size-8 flex items-center rounded-full justify-center ring-1 shrink-0 ring-border">
-            {assistantAvatar ? (
-              <img
-                src={assistantAvatar}
-                alt={bot?.name ?? 'User Avatar'}
-                width={24}
-                height={24}
-                className="rounded-full"
-              />
-            ) : (
-              <SparklesIcon size={14} />
-            )}
-          </div>
-        )}
-
-        <div className="flex flex-col gap-2 w-full">
-          {/*{message?.sourceDocuments && !!message.sourceDocuments.length && (*/}
-          {/*  <div className="w-full flex-wrap flex gap-4">*/}
-          {/*    {message.sourceDocuments.map((sourceDocument) => {*/}
-          {/*      return (*/}
-          {/*        <div key={sourceDocument.pageContent}>*/}
-          {/*          <DocumentToolCall*/}
-          {/*            pageContent={sourceDocument.pageContent}*/}
-          {/*            metadata={sourceDocument.metadata}*/}
-          {/*          />*/}
-          {/*        </div>*/}
-          {/*      );*/}
-          {/*    })}*/}
-          {/*  </div>*/}
-          {/*)}*/}
-          {/*{usedTools.toolResults && !!usedTools.toolResults.length && (*/}
-          {/*  <div className="w-full flex-wrap flex gap-4">*/}
-          {/*    {usedTools.toolResults.map((usedTool, index) => {*/}
-          {/*      const { tool } = usedTool;*/}
-          {/*      return (*/}
-          {/*        <div key={`${tool}-${index}`}>*/}
-          {/*          <ToolResult {...usedTool} />*/}
-          {/*        </div>*/}
-          {/*      );*/}
-          {/*    })}*/}
-          {/*  </div>*/}
-          {/*)}*/}
-          {/*{usedTools.customToolResults &&*/}
-          {/*  !!usedTools.customToolResults.length && (*/}
-          {/*    <div className="flex flex-col gap-4">*/}
-          {/*      {usedTools.customToolResults.map((usedTool, index) => {*/}
-          {/*        const { tool, toolOutput } = usedTool;*/}
-          {/*        const outputData = parseOutput(toolOutput);*/}
-          {/*        return (*/}
-          {/*          <div key={`${tool}-${index}`}>*/}
-          {/*            {!!outputData && tool === 'getWeather' ? (*/}
-          {/*              <Weather weatherAtLocation={outputData} />*/}
-          {/*            ) : null}*/}
-          {/*          </div>*/}
-          {/*        );*/}
-          {/*      })}*/}
-          {/*    </div>*/}
-          {/*  )}*/}
-          {message.content && (
-            <div
-              className="flex flex-col gap-4"
-              style={{
-                color:
-                  getRole(message.role) === 'user'
-                    ? theme?.userMessage?.textColor
-                    : theme?.botMessage?.textColor || undefined,
-              }}
-            >
-              <Markdown usedTools={message?.usedTools}>
-                {message.content as string}
-              </Markdown>
-            </div>
-          )}
-          {message?.ttsUrl && (
-            <AudioPlayer src={message.ttsUrl} autoplay={!!enableTTS} />
-          )}
-        </div>
-      </div>
-    </motion.div>
-  );
-};
-
-export const ThinkingMessage = ({ bot }: { bot: BotType | null }) => {
-  const role = 'assistant';
-
-  const { theme } = useConfiguration();
-
-  const assistantAvatar = theme?.botMessage?.avatarSrc || bot?.avatar;
-
-  return (
-    <motion.div
-      className="w-full mx-auto max-w-3xl px-4 group/message "
-      initial={{ y: 5, opacity: 0 }}
-      animate={{ y: 0, opacity: 1, transition: { delay: 1 } }}
-      data-role={role}
-    >
-      <div
-        className={cn(
-          'flex gap-4 group-data-[role=user]/message:px-3 w-full group-data-[role=user]/message:w-fit group-data-[role=user]/message:ml-auto group-data-[role=user]/message:max-w-2xl group-data-[role=user]/message:py-2 rounded-xl',
-          {
-            'group-data-[role=user]/message:bg-muted': true,
-          }
-        )}
-      >
-        {theme?.botMessage?.showAvatar && (
-          <div className="size-8 flex items-center rounded-full justify-center ring-1 shrink-0 ring-border">
-            <img
-              src={assistantAvatar}
-              alt={bot?.name ?? 'User Avatar'}
-              width={24}
-              height={24}
-              className="rounded-full"
-            />
-          </div>
-        )}
-        <div className="flex flex-col gap-2 w-full">
-          <div className="flex flex-col gap-4 text-muted-foreground">
-            Thinking...
-          </div>
-        </div>
-      </div>
-    </motion.div>
-  );
-};