@lobehub/chat 0.25.0 → 0.26.1

package/src/pages/chat/[id]/Conversation/ChatList/Error/OpenAiBizError.tsx

@@ -0,0 +1,52 @@
+import { Highlighter } from '@lobehub/ui';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import { shallow } from 'zustand/shallow';
+
+import { useSessionStore } from '@/store/session';
+
+import APIKeyForm from './ApiKeyForm';
+import { ErrorActionContainer, useStyles } from './style';
+
+interface OpenAIError {
+  code: 'invalid_api_key' | string;
+  message: string;
+  param?: any;
+  type: string;
+}
+
+interface OpenAIErrorResponse {
+  error: OpenAIError;
+}
+
+const OpenAiBizError = memo<{ content: OpenAIErrorResponse; id: string }>(({ content, id }) => {
+  const { styles } = useStyles();
+
+  const [resend, deleteMessage] = useSessionStore(
+    (s) => [s.resendMessage, s.deleteMessage],
+    shallow,
+  );
+
+  const errorCode = content.error?.code;
+
+  if (errorCode === 'invalid_api_key') {
+    return (
+      <ErrorActionContainer>
+        <APIKeyForm
+          onConfirm={() => {
+            console.log(id);
+            resend(id);
+            deleteMessage(id);
+          }}
+        />
+      </ErrorActionContainer>
+    );
+  }
+  return (
+    <Flexbox className={styles.container} style={{ maxWidth: 600 }}>
+      <Highlighter language={'json'}>{JSON.stringify(content, null, 2)}</Highlighter>
+    </Flexbox>
+  );
+});
+
+export default OpenAiBizError;

package/src/pages/chat/[id]/Conversation/ChatList/Error/style.tsx

@@ -0,0 +1,44 @@
+import { Avatar } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { ReactNode, memo } from 'react';
+import { Center, Flexbox } from 'react-layout-kit';
+
+export const useStyles = createStyles(({ css, token }) => ({
+  container: css`
+    background: ${token.colorBgContainer};
+    border: 1px solid ${token.colorSplit};
+    border-radius: 8px;
+  `,
+  desc: css`
+    color: ${token.colorTextTertiary};
+    text-align: center;
+  `,
+}));
+
+export const ErrorActionContainer = memo<{ children: ReactNode }>(({ children }) => {
+  const { styles } = useStyles();
+
+  return (
+    <Center className={styles.container} gap={24} padding={24}>
+      {children}
+    </Center>
+  );
+});
+
+export const FormAction = memo<{
+  avatar: string;
+  children: ReactNode;
+  description: string;
+  title: string;
+}>(({ children, title, description, avatar }) => {
+  const { styles, theme } = useStyles();
+
+  return (
+    <Center gap={16} style={{ maxWidth: 300 }}>
+      <Avatar avatar={avatar} background={theme.colorText} gap={12} size={80} />
+      <Flexbox style={{ fontSize: 20 }}>{title}</Flexbox>
+      <Flexbox className={styles.desc}>{description}</Flexbox>
+      {children}
+    </Center>
+  );
+});

package/src/pages/chat/[id]/Conversation/{MessageExtra.tsx → ChatList/MessageExtra.tsx}

@@ -1,13 +1,9 @@
-import { Avatar, Icon, Tooltip } from '@lobehub/ui';
 import { Tag } from 'antd';
 import { createStyles } from 'antd-style';
-import { LucideToyBrick } from 'lucide-react';
 import { ReactNode } from 'react';
-import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 import { shallow } from 'zustand/shallow';
 
-import pluginList from '@/plugins';
 import { agentSelectors, useSessionStore } from '@/store/session';
 import { ChatMessage } from '@/types/chatMessage';
 
@@ -23,25 +19,29 @@ const useStyles = createStyles(({ css }) => ({
   `,
 }));
 
-const MessageExtra = ({ role, extra, function_call }: ChatMessage): ReactNode => {
+const MessageExtra = ({
+  role,
+  extra,
+  // name,
+  function_call,
+}: ChatMessage): ReactNode => {
   const { styles } = useStyles();
 
-  const { t } = useTranslation();
+  // const { t } = useTranslation();
   const [model] = useSessionStore((s) => [agentSelectors.currentAgentModel(s)], shallow);
 
-  const plugin = pluginList.find((p) => p.name === function_call?.name);
-  const funcTag = (
-    <Tooltip title={function_call?.arguments}>
-      <Tag bordered={false} className={styles.plugin} style={{ borderRadius: 6 }}>
-        {plugin?.avatar ? (
-          <Avatar avatar={plugin?.avatar} size={18} />
-        ) : (
-          <Icon icon={LucideToyBrick} />
-        )}
-        {t(`plugins.${function_call?.name}` as any, { ns: 'plugin' })}
-      </Tag>
-    </Tooltip>
-  );
+  // const plugin = PluginsMap[name || ''];
+
+  // const funcTag = (
+  //   <Tag bordered={false} className={styles.plugin} style={{ borderRadius: 6 }}>
+  //     {plugin?.avatar ? (
+  //       <Avatar avatar={plugin?.avatar} size={18} />
+  //     ) : (
+  //       <Icon icon={LucideToyBrick} />
+  //     )}
+  //     {t(`plugins.${name}` as any, { ns: 'plugin' })}
+  //   </Tag>
+  // );
 
   const modelTag = (
     <div>
@@ -59,6 +59,7 @@ const MessageExtra = ({ role, extra, function_call }: ChatMessage): ReactNode =>
 
   switch (role) {
     case 'user':
+    case 'function':
     case 'system': {
       return;
     }
@@ -69,15 +70,16 @@ const MessageExtra = ({ role, extra, function_call }: ChatMessage): ReactNode =>
       if (!(hasModelTag || hasFuncTag)) return;
 
       return (
-        <Flexbox className={styles.container} horizontal>
-          {hasFuncTag && funcTag}
-          {hasModelTag && modelTag}
-        </Flexbox>
+        hasModelTag && (
+          <Flexbox className={styles.container} horizontal>
+            {modelTag}
+          </Flexbox>
+        )
       );
     }
-    case 'function': {
-      return <Flexbox className={styles.container}>{funcTag}</Flexbox>;
-    }
+    // case 'function': {
+    //   return <Flexbox className={styles.container}>{funcTag}</Flexbox>;
+    // }
   }
 };
 

package/src/pages/chat/[id]/Conversation/ChatList/OTPInput.tsx

@@ -0,0 +1,142 @@
+import { useControllableValue } from 'ahooks';
+import { createStyles } from 'antd-style';
+import React, { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+const useStyles = createStyles(
+  ({ css, token }) => css`
+    width: ${token.controlHeight}px;
+    height: ${token.controlHeight}px;
+
+    font-size: 16px;
+    color: ${token.colorText};
+    text-align: center;
+
+    background: ${token.colorBgContainer};
+    border: 1px solid ${token.colorBorder};
+    border-radius: 8px;
+
+    &:focus,
+    &:focus-visible {
+      border-color: ${token.colorPrimary};
+      outline: none;
+    }
+  `,
+);
+
+/**
+ * Let's borrow some props from HTML "input". More info below:
+ *
+ * [Pick Documentation](https://www.typescriptlang.org/docs/handbook/utility-types.html#picktype-keys)
+ *
+ * [How to extend HTML Elements](https://reacthustle.com/blog/how-to-extend-html-elements-in-react-typescript)
+ */
+type PartialInputProps = Pick<React.ComponentPropsWithoutRef<'input'>, 'className' | 'style'>;
+
+interface OtpInputProps extends PartialInputProps {
+  onChange?: (value: string) => void;
+  /**
+   * Number of characters/input for this component
+   */
+  size?: number;
+  /**
+   * Validation pattern for each input.
+   * e.g: /[0-9]{1}/ for digits only or /[0-9a-zA-Z]{1}/ for alphanumeric
+   */
+  validationPattern?: RegExp;
+  /**
+   * full value of the otp input, up to {size} characters
+   */
+  value?: string;
+}
+
+const handleKeyUp = (e: React.KeyboardEvent<HTMLInputElement>) => {
+  const current = e.currentTarget;
+  if (e.key === 'ArrowLeft' || e.key === 'Backspace') {
+    const prev = current.previousElementSibling as HTMLInputElement | null;
+    prev?.focus();
+    prev?.setSelectionRange(0, 1);
+    return;
+  }
+
+  if (e.key === 'ArrowRight') {
+    const prev = current.nextSibling as HTMLInputElement | null;
+    prev?.focus();
+    prev?.setSelectionRange(0, 1);
+    return;
+  }
+};
+
+const OtpInput = memo<OtpInputProps>((props) => {
+  const {
+    //Set the default size to 6 characters
+    size = 6,
+    //Default validation is digits
+    validationPattern = /\d/,
+    value: outerValue,
+    onChange,
+    className,
+    ...restProps
+  } = props;
+  const [value, setValue] = useControllableValue({ onChange, value: outerValue });
+
+  const { styles, cx } = useStyles();
+  // Create an array based on the size.
+  const arr = Array.from({ length: size }).fill('-');
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>, index: number) => {
+    const elem = e.target;
+    const val = e.target.value;
+
+    // check if the value is valid
+    if (!validationPattern.test(val) && val !== '') return;
+
+    // change the value using onChange props
+    const valueArr = value?.split('') || [];
+    valueArr[index] = val;
+    const newVal = valueArr.join('').slice(0, 6);
+    setValue(newVal);
+
+    //focus the next element if there's a value
+    if (val) {
+      const next = elem.nextElementSibling as HTMLInputElement | null;
+      next?.focus();
+    }
+  };
+
+  const handlePaste = (e: React.ClipboardEvent<HTMLInputElement>) => {
+    e.preventDefault();
+    const val = e.clipboardData.getData('text').slice(0, Math.max(0, size));
+
+    setValue(val);
+  };
+
+  return (
+    <Flexbox gap={12} horizontal>
+      {arr.map((_, index) => {
+        return (
+          <input
+            key={index}
+            {...restProps}
+            /**
+             * Add some styling to the input using daisyUI + tailwind.
+             * Allows the user to override the classname for a different styling
+             */
+            autoComplete="one-time-code"
+            className={cx(styles, className)}
+            inputMode="numeric"
+            maxLength={6}
+            onChange={(e) => handleInputChange(e, index)}
+            onKeyUp={handleKeyUp}
+            onPaste={handlePaste}
+            pattern={validationPattern.source}
+            type="text"
+            value={value?.at(index) ?? ''}
+          />
+        );
+      })}
+    </Flexbox>
+  );
+});
+
+export default OtpInput;

package/src/pages/chat/[id]/Conversation/ChatList/Plugins/FunctionCall.tsx

@@ -0,0 +1,60 @@
+import { LoadingOutlined } from '@ant-design/icons';
+import { Avatar, Highlighter, Icon } from '@lobehub/ui';
+import { LucideChevronDown, LucideChevronUp, LucideToyBrick } from 'lucide-react';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { PluginsMap } from '@/plugins';
+import { OpenAIFunctionCall } from '@/types/chatMessage';
+
+import { useStyles } from './style';
+
+export interface FunctionCallProps {
+  function_call?: OpenAIFunctionCall;
+  loading?: boolean;
+}
+
+const FunctionCall = memo<FunctionCallProps>(({ function_call, loading }) => {
+  const { t } = useTranslation('plugin');
+  const { styles } = useStyles();
+  const [open, setOpen] = useState(false);
+
+  const plugin = PluginsMap[function_call?.name || ''];
+
+  const avatar = plugin?.avatar ? (
+    <Avatar avatar={plugin?.avatar} size={32} />
+  ) : (
+    <Icon icon={LucideToyBrick} />
+  );
+
+  const args = JSON.stringify(JSON.parse(function_call?.arguments || '{}'), null, 2);
+
+  return (
+    <Flexbox gap={8}>
+      <Flexbox
+        align={'center'}
+        className={styles.container}
+        gap={8}
+        horizontal
+        onClick={() => {
+          setOpen(!open);
+        }}
+      >
+        {loading ? (
+          <div>
+            <LoadingOutlined />
+          </div>
+        ) : (
+          avatar
+        )}
+        {t(`plugins.${function_call?.name}` as any, { ns: 'plugin' })}
+        {loading ? `（${t('loading.plugin')}）` : null}
+        <Icon icon={open ? LucideChevronUp : LucideChevronDown} />
+      </Flexbox>
+      {open && <Highlighter language={'json'}>{args}</Highlighter>}
+    </Flexbox>
+  );
+});
+
+export default FunctionCall;

package/src/pages/chat/[id]/Conversation/ChatList/Plugins/PluginMessage.tsx

@@ -0,0 +1,45 @@
+import { Loading3QuartersOutlined } from '@ant-design/icons';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { PluginsRender } from '@/plugins/Render';
+import { ChatMessage } from '@/types/chatMessage';
+
+import PluginResult from './PluginResultRender';
+
+export interface FunctionMessageProps extends ChatMessage {
+  loading?: boolean;
+}
+
+const PluginMessage = memo<FunctionMessageProps>(({ content, name }) => {
+  const { t } = useTranslation('plugin');
+
+  const Render = PluginsRender[name || ''];
+
+  let isJSON = true;
+  try {
+    JSON.parse(content);
+  } catch {
+    isJSON = false;
+  }
+
+  if (!isJSON) {
+    return (
+      <Flexbox gap={8} horizontal>
+        <div>
+          <Loading3QuartersOutlined spin />
+        </div>
+        {t('loading.content')}
+      </Flexbox>
+    );
+  }
+
+  if (Render) {
+    return <Render content={JSON.parse(content)} name={name || 'unknown'} />;
+  }
+
+  return <PluginResult content={content} />;
+});
+
+export default PluginMessage;

package/src/pages/chat/[id]/Conversation/ChatList/Plugins/PluginResultRender.tsx

@@ -0,0 +1,51 @@
+import { Avatar, Highlighter, Icon } from '@lobehub/ui';
+import { LucideChevronDown, LucideChevronUp } from 'lucide-react';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { useStyles } from './style';
+
+export interface FunctionMessageProps {
+  content: string;
+}
+
+const PluginResult = memo<FunctionMessageProps>(({ content }) => {
+  const { t } = useTranslation('plugin');
+  const { styles } = useStyles();
+
+  const [open, setOpen] = useState(false);
+
+  let data;
+
+  try {
+    data = JSON.stringify(JSON.parse(content), null, 2);
+  } catch {
+    data = content;
+  }
+
+  return (
+    <Flexbox gap={8}>
+      <Flexbox
+        align={'center'}
+        className={styles.container}
+        gap={8}
+        horizontal
+        onClick={() => {
+          setOpen(!open);
+        }}
+      >
+        <Avatar avatar={'💾'} size={24} />
+        {t('responseData')}
+        <Icon icon={open ? LucideChevronUp : LucideChevronDown} />
+      </Flexbox>
+      {open && (
+        <Highlighter language={'json'} style={{ maxHeight: 200 }}>
+          {data}
+        </Highlighter>
+      )}
+    </Flexbox>
+  );
+});
+
+export default PluginResult;

package/src/pages/chat/[id]/Conversation/ChatList/Plugins/style.ts

@@ -0,0 +1,25 @@
+import { createStyles } from 'antd-style';
+
+export const useStyles = createStyles(({ css, token }) => ({
+  container: css`
+    cursor: pointer;
+
+    width: fit-content;
+    padding: 6px 8px;
+
+    color: ${token.colorText};
+
+    border: 1px solid ${token.colorBorder};
+    border-radius: 8px;
+
+    &:hover {
+      background: ${token.colorFillTertiary};
+    }
+  `,
+  plugin: css`
+    display: flex;
+    gap: 4px;
+    align-items: center;
+    width: fit-content;
+  `,
+}));

package/src/pages/chat/[id]/Conversation/ChatList/index.tsx

@@ -0,0 +1,112 @@
+import { ChatList, RenderErrorMessage, RenderMessage } from '@lobehub/ui';
+import isEqual from 'fast-deep-equal';
+import { memo, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+import { shallow } from 'zustand/shallow';
+
+import { agentSelectors, chatSelectors, useSessionStore } from '@/store/session';
+import { ChatMessage } from '@/types/chatMessage';
+import { ErrorType } from '@/types/fetch';
+import { isFunctionMessage } from '@/utils/message';
+
+import InvalidAccess from './Error/InvalidAccess';
+import OpenAiBizError from './Error/OpenAiBizError';
+import MessageExtra from './MessageExtra';
+import FunctionCall from './Plugins/FunctionCall';
+import PluginMessage from './Plugins/PluginMessage';
+
+const renderErrorMessage: RenderErrorMessage = (error, message) => {
+  switch (error.type as ErrorType) {
+    case 'InvalidAccessCode': {
+      return <InvalidAccess id={message.id} />;
+    }
+    case 'OpenAIBizError': {
+      return <OpenAiBizError content={(error as any).body} id={message.id} />;
+    }
+  }
+};
+
+const List = () => {
+  const { t } = useTranslation('common');
+  const data = useSessionStore(chatSelectors.currentChats, isEqual);
+  const [displayMode, chatLoadingId, deleteMessage, resendMessage, dispatchMessage] =
+    useSessionStore(
+      (s) => [
+        agentSelectors.currentAgentConfigSafe(s).displayMode,
+        s.chatLoadingId,
+        s.deleteMessage,
+        s.resendMessage,
+        s.dispatchMessage,
+      ],
+      shallow,
+    );
+
+  const renderMessage: RenderMessage = useCallback(
+    (content, message: ChatMessage) => {
+      if (message.role === 'function')
+        return (
+          <Flexbox gap={12}>
+            <FunctionCall
+              function_call={message.function_call}
+              loading={message.id === chatLoadingId}
+            />
+            <PluginMessage loading={message.id === chatLoadingId} {...message} />
+          </Flexbox>
+        );
+
+      if (message.role === 'assistant') {
+        return isFunctionMessage(message.content) || !!message.function_call ? (
+          <FunctionCall
+            function_call={message.function_call}
+            loading={message.id === chatLoadingId}
+          />
+        ) : (
+          content
+        );
+      }
+
+      return content;
+    },
+    [chatLoadingId],
+  );
+
+  return (
+    <ChatList
+      data={data}
+      loadingId={chatLoadingId}
+      onActionClick={(key, id) => {
+        switch (key) {
+          case 'delete': {
+            deleteMessage(id);
+            break;
+          }
+
+          case 'regenerate': {
+            resendMessage(id);
+            break;
+          }
+        }
+      }}
+      onMessageChange={(id, content) => {
+        dispatchMessage({ id, key: 'content', type: 'updateMessage', value: content });
+      }}
+      renderErrorMessage={renderErrorMessage}
+      renderMessage={renderMessage}
+      renderMessageExtra={MessageExtra}
+      style={{ marginTop: 24 }}
+      text={{
+        cancel: t('cancel'),
+        confirm: t('ok'),
+        copy: t('copy'),
+        copySuccess: t('copySuccess'),
+        delete: t('delete'),
+        edit: t('edit'),
+        regenerate: t('regenerate'),
+      }}
+      type={displayMode}
+    />
+  );
+};
+
+export default memo(List);

package/src/pages/chat/[id]/Conversation/Input/Token.tsx

@@ -8,7 +8,7 @@ import { ModelTokens } from '@/const/modelTokens';
 import { agentSelectors, chatSelectors, useSessionStore } from '@/store/session';
 
 const Token = memo<{ input: string }>(({ input }) => {
-  const { t } = useTranslation();
+  const { t } = useTranslation('common');
 
   const inputTokenCount = useMemo(() => encode(input).length, [input]);
 

package/src/pages/chat/[id]/edit/AgentPlugin/index.tsx

@@ -7,7 +7,7 @@ import { useTranslation } from 'react-i18next';
 import { shallow } from 'zustand/shallow';
 
 import { FORM_STYLE } from '@/const/layoutTokens';
-import pluginList from '@/plugins';
+import { PluginsMap } from '@/plugins';
 import { agentSelectors, useSessionStore } from '@/store/session';
 
 const PluginList = () => {
@@ -19,7 +19,7 @@ const PluginList = () => {
 
   const plugin: ItemGroup = useMemo(
     () => ({
-      children: pluginList.map((item) => ({
+      children: Object.values(PluginsMap).map((item) => ({
         avatar: <Avatar avatar={item.avatar} />,
         children: (
           <Switch

package/src/pages/setting/Header.tsx

@@ -4,7 +4,7 @@ import Router from 'next/router';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { version } from '@/../package.json';
+import pkg from '@/../package.json';
 import HeaderTitle from '@/components/HeaderTitle';
 
 const Header = memo(() => {
@@ -12,7 +12,7 @@ const Header = memo(() => {
 
   return (
     <ChatHeader
-      left={<HeaderTitle tag={<Tag>{`v${version}`}</Tag>} title={t('header.global')} />}
+      left={<HeaderTitle tag={<Tag>{`v${pkg.version}`}</Tag>} title={t('header.global')} />}
       onBackClick={() => Router.back()}
       showBackButton
     />