@fe-free/ai 4.1.9 → 4.1.11

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @fe-free/ai
 
+## 4.1.11
+
+### Patch Changes
+
+- feat: ai
+  - @fe-free/core@4.1.11
+  - @fe-free/icons@4.1.11
+  - @fe-free/tool@4.1.11
+
+## 4.1.10
+
+### Patch Changes
+
+- feat: ai
+- Updated dependencies
+  - @fe-free/core@4.1.10
+  - @fe-free/icons@4.1.10
+  - @fe-free/tool@4.1.10
+
 ## 4.1.9
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fe-free/ai",
-  "version": "4.1.9",
+  "version": "4.1.11",
   "description": "",
   "main": "./src/index.ts",
   "author": "",
@@ -15,7 +15,7 @@
     "lodash-es": "^4.17.21",
     "uuid": "^13.0.0",
     "zustand": "^4.5.7",
-    "@fe-free/core": "4.1.9"
+    "@fe-free/core": "4.1.11"
   },
   "peerDependencies": {
     "@ant-design/x-sdk": "^2.1.3",
@@ -26,8 +26,8 @@
     "i18next-icu": "^2.4.1",
     "react": "^19.2.0",
     "react-i18next": "^16.4.0",
-    "@fe-free/tool": "4.1.9",
-    "@fe-free/icons": "4.1.9"
+    "@fe-free/icons": "4.1.11",
+    "@fe-free/tool": "4.1.11"
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",

package/src/ai.stories.tsx

@@ -3,12 +3,16 @@ import {
   Chat,
   createChatStore,
   EnumChatMessageStatus,
+  EnumChatMessageType,
   generateUUID,
+  MessageActions,
   Messages,
   MSender,
 } from '@fe-free/ai';
 import { sleep } from '@fe-free/tool';
 import type { Meta } from '@storybook/react-vite';
+import { useDebounce, useUpdateEffect } from 'ahooks';
+import { Button, Divider } from 'antd';
 import { set } from 'lodash-es';
 import { useCallback, useEffect, useMemo } from 'react';
 
@@ -45,37 +49,27 @@ function Component() {
   const senderValue = useChatStore((state) => state.senderValue);
   const setSenderValue = useChatStore((state) => state.setSenderValue);
   const messages = useChatStore((state) => state.messages);
+  const setMessages = useChatStore((state) => state.setMessages);
   const addMessage = useChatStore((state) => state.addMessage);
   const updateMessage = useChatStore((state) => state.updateMessage);
   const { chatStatus } = useChatStoreComputed();
 
-  const loading =
-    chatStatus === EnumChatMessageStatus.PENDING || chatStatus === EnumChatMessageStatus.STREAMING;
+  const debounceCacheMessages = useDebounce(messages, { wait: 500 });
 
+  // init from cache
   useEffect(() => {
-    addMessage({
-      uuid: generateUUID(),
-      user: {
-        text: 'hello',
-      },
-      ai: {
-        data: {
-          text: '你好，\n我是AI，很高兴认识你',
-        },
-      },
-    });
-    addMessage({
-      uuid: generateUUID(),
-      user: {
-        text: 'hello',
-      },
-      ai: {
-        data: {
-          text: '你\n好，\n我\n是\nAI，\n很\n高\n兴\n认\n识\n你\n你\n好，\n我\n是\nAI，\n很\n高\n兴\n认\n识\n你\n很\n高\n兴\n认\n识\n你\n',
-        },
-      },
-    });
+    const cacheMessages = localStorage.getItem('chatMessages');
+    if (cacheMessages) {
+      setMessages(JSON.parse(cacheMessages));
+    }
   }, []);
+  // cache
+  useUpdateEffect(() => {
+    localStorage.setItem('chatMessages', JSON.stringify(debounceCacheMessages));
+  }, [debounceCacheMessages]);
+
+  const loading =
+    chatStatus === EnumChatMessageStatus.PENDING || chatStatus === EnumChatMessageStatus.STREAMING;
 
   const handleSubmit = useCallback((v) => {
     console.log('onSubmit', v);
@@ -99,49 +93,101 @@ function Component() {
           const preText = message.ai?.data?.text || '';
           set(message, 'ai.data.text', preText + data);
 
-          updateMessage({
-            ...message,
-          });
+          // 假设有 session_id
+          set(message, 'ai.session_id', '123');
+
+          updateMessage(message);
         }
         if (event === 'done') {
           message.status = EnumChatMessageStatus.DONE;
-          updateMessage({
-            ...message,
-          });
+          updateMessage(message);
         }
       },
     });
   }, []);
 
   return (
-    <div className="h-[800px] w-[500px] border border-red-500">
-      <Chat
-        end={
-          <div className="p-2">
-            <MSender
-              value={senderValue}
-              onChange={(v) => setSenderValue(v)}
-              loading={loading}
-              onSubmit={handleSubmit}
-            />
-          </div>
-        }
-      >
-        <Messages
-          messages={messages}
-          renderMessageOfUser={({ message }) => (
-            <div className="p-2">
-              <div className="rounded-xl bg-primary p-2 text-white">{message.user?.text}</div>
-            </div>
-          )}
-          renderMessageOfAI={({ message }) => (
-            <div className="p-2">
-              <div>{message.status}</div>
-              <pre className="whitespace-pre-wrap">{message.ai?.data?.text}</pre>
+    <div>
+      <div>
+        <Button
+          onClick={() => {
+            addMessage({
+              uuid: generateUUID(),
+              type: EnumChatMessageType.SYSTEM,
+              system: {
+                data: {
+                  type: 'new_session',
+                },
+              },
+            });
+          }}
+        >
+          Add New Session
+        </Button>
+      </div>
+      <div className="h-[800px] w-[500px] border border-red-500">
+        <Chat
+          end={
+            <div
+              className="p-2"
+              onFocus={() => {
+                console.log('onFocus');
+              }}
+              onBlur={() => {
+                console.log('onBlur');
+              }}
+            >
+              <MSender
+                value={senderValue}
+                onChange={(v) => setSenderValue(v)}
+                loading={loading}
+                onSubmit={handleSubmit}
+              />
             </div>
-          )}
-        />
-      </Chat>
+          }
+        >
+          <Messages
+            messages={messages}
+            renderMessageOfSystem={({ message }) => {
+              if (message.system?.data?.type === 'new_session') {
+                return <Divider>让我们聊点新内容吧</Divider>;
+              }
+
+              return null;
+            }}
+            renderMessageOfUser={({ message }) => {
+              return (
+                <div className="p-2">
+                  <div className="rounded-xl bg-primary p-2 text-white">{message.user?.text}</div>
+                </div>
+              );
+            }}
+            renderMessageOfAI={({ message }) => {
+              return (
+                <div className="p-2">
+                  <div>
+                    status: {message.status} session_id: {message.ai?.session_id}
+                  </div>
+                  <pre className="whitespace-pre-wrap">{message.ai?.data?.text}</pre>
+                  <div className="flex gap-2">
+                    <MessageActions.Copy value={message.ai?.data?.text || ''} />
+                    <MessageActions.Like
+                      onClick={async () => {
+                        // some thing
+                      }}
+                    />
+                    <MessageActions.Dislike
+                      onClick={async () => {
+                        // some thing
+                      }}
+                    />
+                  </div>
+                </div>
+              );
+            }}
+          />
+        </Chat>
+      </div>
     </div>
   );
 }

package/src/helper.tsx

@@ -2,12 +2,19 @@ import classNames from 'classnames';
 import { range } from 'lodash-es';
 import { v4 as uuidv4 } from 'uuid';
 
+function getAnimationDelay(index: number) {
+  const arr = [0.1, 0.2, 0.4, 0.6, 0.8, 0.9];
+  return arr[index % arr.length];
+}
+
 function RecordLoading({
   count = 4,
   gap = 2,
   color = 'white',
 }: {
   count?: number;
+  height?: number;
+  width?: number;
   gap?: number;
   color?: 'white' | 'primary';
 }) {
@@ -16,12 +23,14 @@ function RecordLoading({
       {range(count).map((index) => (
         <div
           key={index}
-          className={classNames('h-[4px] w-[2px]', {
+          className={classNames({
             'bg-white': color === 'white',
             'bg-primary': color === 'primary',
           })}
           style={{
-            animation: `sender-rectangle-${color} infinite 1s ease-in-out ${((index * 1.5) / count) % 1}s`,
+            height: '4px',
+            width: '2px',
+            animation: `sender-rectangle-${color} infinite 1s ease-in-out ${getAnimationDelay(index)}s`,
           }}
         />
       ))}

package/src/index.ts

@@ -4,7 +4,7 @@ export { FileView, FileViewList } from './files';
 export { generateUUID } from './helper';
 export { MSender } from './m_sender';
 export type { MSenderProps, MSenderRef } from './m_sender';
-export { Messages } from './messages';
+export { MessageActions, Messages } from './messages';
 export type { MessagesProps } from './messages';
 export { Sender } from './sender';
 export type { SenderProps, SenderRef } from './sender';

package/src/m_sender/actions.tsx

@@ -1,20 +1,23 @@
 import Icons from '@fe-free/icons';
 import { Button } from 'antd';
 import { useCallback, type RefObject } from 'react';
+import IconRecord from '../svgs/record.svg?react';
 import SendIcon from '../svgs/send.svg?react';
 import type { MSenderProps } from './types';
 
 function Actions(
   props: MSenderProps & {
     refText: RefObject<HTMLTextAreaElement>;
+    type: 'input' | 'record';
+    setType: (type: 'input' | 'record') => void;
   },
 ) {
-  const { refText, loading, onSubmit, value, onChange } = props;
+  const { refText, loading, onSubmit, value, onChange, setType, allowSpeech } = props;
 
   const isLoading = loading;
 
   const handleSubmit = useCallback(async () => {
-    if (isLoading) {
+    if (isLoading || value?.text?.trim() === '') {
       return;
     }
 
@@ -36,16 +39,23 @@ function Actions(
   }, [isLoading, value, onSubmit, onChange, refText]);
 
   return (
-    <div className="flex items-center gap-2">
-      <Button
-        shape="circle"
-        size="small"
-        type="primary"
-        icon={<Icons component={SendIcon} />}
-        loading={isLoading}
-        disabled={!value?.text}
-        onClick={handleSubmit}
-      />
+    <div className="mr-1 flex items-center gap-2">
+      {allowSpeech && !value?.text ? (
+        <Button
+          type="primary"
+          shape="circle"
+          icon={<Icons component={IconRecord} />}
+          onClick={() => setType('record')}
+        />
+      ) : (
+        <Button
+          type="primary"
+          shape="circle"
+          icon={<Icons component={SendIcon} />}
+          loading={isLoading}
+          onClick={handleSubmit}
+        />
+      )}
     </div>
   );
 }

package/src/m_sender/index.tsx

@@ -3,22 +3,23 @@ import classNames from 'classnames';
 import { useMemo, useRef, useState, type RefObject } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Actions } from './actions';
-import { InputRecordSwitch, RecordAction } from './record';
+import { RecordAction } from './record';
 import type { MSenderProps, MSenderRef } from './types';
 
 function Text(props: MSenderProps & { refText: RefObject<HTMLTextAreaElement> }) {
-  const { value, onChange, placeholder, refText } = props;
+  const { value, onChange, placeholder, refText, autoFocus } = props;
 
   return (
     <Input.TextArea
       ref={refText}
       value={value?.text}
+      autoFocus={autoFocus}
       onChange={(e) => {
         onChange?.({ ...value, text: e.target.value });
       }}
       placeholder={placeholder}
       autoSize={{ minRows: 1, maxRows: 3 }}
-      className="mb-[1px] px-2 py-0"
+      className="px-1 text-[15px]"
       variant="borderless"
     />
   );
@@ -32,12 +33,6 @@ function useProps(originProps: MSenderProps) {
       ...originProps,
       placeholder:
         originProps.placeholder ?? t('@fe-free/ai.sender.describeYourQuestion', '描述你的问题'),
-      statement:
-        originProps.statement ??
-        t(
-          '@fe-free/ai.sender.aiGeneratedDisclaimer',
-          '内容由 AI 生成，无法确保信息的真实准确，仅供参考',
-        ),
       defaultType: originProps.defaultType ?? 'input',
     };
   }, [originProps, t]);
@@ -47,7 +42,7 @@ function MSender(originProps: MSenderProps) {
   const refText = useRef<HTMLTextAreaElement>(null);
 
   const props = useProps(originProps);
-  const { value, statement, allowSpeech, defaultType } = props;
+  const { statement, defaultType } = props;
 
   const [type, setType] = useState<'input' | 'record'>(defaultType);
 
@@ -58,16 +53,13 @@ function MSender(originProps: MSenderProps) {
       <div
         ref={refContainer}
         className={classNames(
-          'fea-m-sender relative flex items-end rounded-xl border border-01 bg-white p-2',
+          'fea-m-sender relative flex items-end rounded-xl border border-01 bg-white p-2.5',
         )}
       >
-        {allowSpeech && !value?.text && (
-          <InputRecordSwitch {...props} type={type} setType={setType} />
-        )}
         <div className="flex flex-1">
           <Text {...props} refText={refText} />
         </div>
-        <Actions {...props} refText={refText} />
+        <Actions {...props} refText={refText} type={type} setType={setType} />
         {type === 'record' && <RecordAction {...props} setType={setType} />}
       </div>
       {statement && <div className="mt-1 text-center text-xs text-04">*{statement}</div>}

package/src/m_sender/m_sender.stories.tsx

@@ -12,7 +12,7 @@ const meta: Meta<typeof MSender> = {
 
 type Story = StoryObj<typeof MSender>;
 
-function Component(props: Omit<MSenderProps, 'value' | 'onChange' | 'onSubmit'>) {
+function Component(props: MSenderProps) {
   const [v, setV] = useState<MSenderValue | undefined>(undefined);
 
   return (
@@ -39,6 +39,16 @@ export const Default: Story = {
   },
 };
 
+export const AutoFocus: Story = {
+  render: (props) => <Component {...props} />,
+  args: {
+    autoFocus: true,
+    onSubmit: (value) => {
+      console.log(value);
+    },
+  },
+};
+
 export const Loading: Story = {
   args: {
     loading: true,
@@ -73,14 +83,13 @@ export const AllowSpeech: Story = {
           const recordResult = recordVoice;
 
           handleSubmit({ ...(props.value || {}), text: recordResult });
-          alert('submit');
         }
       },
       [props.value, recordVoice],
     );
 
     return (
-      <div>
+      <div className="flex flex-col gap-10">
         <Component
           {...props}
           allowSpeech={{
@@ -90,19 +99,21 @@ export const AllowSpeech: Story = {
         />
 
         <Component
+          value={{ text: 'test' } as MSenderValue}
           {...props}
-          defaultType="record"
           allowSpeech={{
             onRecordStart: handleRecordStart,
             onRecordEnd: handleRecordEnd,
           }}
         />
 
+        <div />
+
         <Component
           {...props}
           defaultType="record"
           allowSpeech={{
-            onRecordStart: () => Promise.reject(new Error('no permission')),
+            onRecordStart: handleRecordStart,
             onRecordEnd: handleRecordEnd,
           }}
         />

package/src/m_sender/record.tsx

@@ -4,41 +4,8 @@ import classNames from 'classnames';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { RecordLoading } from '../helper';
 import IconKeyboard from '../svgs/keyboard.svg?react';
-import IconRecord from '../svgs/record.svg?react';
 import type { MSenderProps } from './types';
 
-function InputRecordSwitch(
-  props: MSenderProps & { type: 'input' | 'record'; setType: (type: 'input' | 'record') => void },
-) {
-  const { allowSpeech, type, setType } = props;
-
-  if (!allowSpeech) {
-    return null;
-  }
-
-  if (type === 'record') {
-    return (
-      <Button
-        type="text"
-        shape="circle"
-        size="small"
-        icon={<Icons component={IconKeyboard} className="!text-[24px]" />}
-        onClick={() => setType('input')}
-      />
-    );
-  }
-
-  return (
-    <Button
-      type="text"
-      shape="circle"
-      size="small"
-      icon={<Icons component={IconRecord} className="!text-[24px]" />}
-      onClick={() => setType('record')}
-    />
-  );
-}
-
 function RecordAction(props: MSenderProps & { setType }) {
   const { allowSpeech, setType } = props;
 
@@ -160,37 +127,35 @@ function RecordAction(props: MSenderProps & { setType }) {
   return (
     <div
       className={classNames('absolute inset-0 flex items-center justify-center rounded-xl', {
-        'bg-white': !isRecording,
-        'bg-red-500': isRecording && isCancel,
-        'bg-primary': isRecording && !isCancel,
+        'bg-red-500': isCancel,
+        'bg-primary': !isCancel,
       })}
     >
       {isRecording ? (
         <>
           <RecordLoading count={30} gap={4} />
-          {isCancel && <div className="absolute top-0 -mt-[2em] text-red08">松手取消</div>}
+          {isCancel && <div className="absolute top-0 -mt-[2.5em] text-red08">松开取消</div>}
           {!isCancel && (
-            <div className="absolute top-0 -mt-[2em] text-primary">松开发送，上移取消</div>
+            <div className="absolute top-0 -mt-[2.5em] text-03">松开发送，上移取消</div>
           )}
         </>
       ) : (
-        <div>按住说话</div>
+        <div className="text-base text-white">按住说话</div>
       )}
       <div className="absolute inset-0" ref={containerRef} />
       {!isRecording && (
         <Button
           type="text"
           shape="circle"
-          size="small"
-          icon={<Icons component={IconKeyboard} className="!text-[24px]" />}
+          icon={<Icons component={IconKeyboard} className="!text-xl text-white" />}
           onClick={() => {
             setType('input');
           }}
-          className="absolute left-2"
+          className="absolute right-4"
         />
       )}
     </div>
   );
 }
 
-export { InputRecordSwitch, RecordAction };
+export { RecordAction };

package/src/m_sender/types.ts

@@ -14,6 +14,7 @@ interface MSenderProps {
   loading?: boolean;
   onSubmit?: (value?: MSenderValue) => void | Promise<void>;
 
+  autoFocus?: boolean;
   placeholder?: string;
 
   /** 是否允许语音输入 */
@@ -25,7 +26,7 @@ interface MSenderProps {
   };
 
   defaultType?: 'input' | 'record';
-  statement?: string | false;
+  statement?: string;
 }
 
 export type { MSenderProps, MSenderRef, MSenderValue };

package/src/messages/index.tsx

@@ -1,68 +1,3 @@
-import { PageLayout } from '@fe-free/core';
-import { useEffect, useMemo, useRef } from 'react';
-import type { ChatMessage } from '../store/types';
-
-interface MessagesProps<AIData> {
-  messages?: ChatMessage<AIData>[];
-  renderMessageOfUser?: (props: { message: ChatMessage<AIData> }) => React.ReactNode;
-  renderMessageOfAI?: (props: { message: ChatMessage<AIData> }) => React.ReactNode;
-}
-
-function Messages<AIData>(props: MessagesProps<AIData>) {
-  const { messages, renderMessageOfUser, renderMessageOfAI } = props;
-
-  const ref = useRef<HTMLDivElement>(null);
-
-  const lastMessage = useMemo(() => {
-    return messages?.[messages.length - 1];
-  }, [messages]);
-
-  // 首次和更新时滚动到最新消息
-  useEffect(() => {
-    if (!lastMessage) {
-      return;
-    }
-
-    const element = document.querySelector(`[data-uuid="${lastMessage.uuid}"]`);
-    if (element) {
-      element.scrollIntoView({ behavior: 'smooth' });
-    }
-  }, [lastMessage?.uuid]);
-
-  // 数据更新是，如果 dom 处于可视区域，则滚动
-  useEffect(() => {
-    if (!lastMessage || !ref.current) {
-      return;
-    }
-
-    const element = document.querySelector(`[data-uuid="${lastMessage.uuid}"]`);
-    if (!element) {
-      return;
-    }
-
-    const { top: listTop, bottom: listBottom } = ref.current!.getBoundingClientRect();
-    const { top, bottom } = element.getBoundingClientRect();
-
-    // 如果最后一个元素可见，则滚动到底部
-    const isVisible = top < listBottom && bottom > listTop;
-    if (isVisible) {
-      element.scrollIntoView({ behavior: 'smooth' });
-    }
-  }, [lastMessage?.updatedAt]);
-
-  return (
-    <PageLayout>
-      <div ref={ref} className="flex h-full flex-col overflow-y-auto">
-        {messages?.map((message) => (
-          <div key={message.uuid} data-uuid={message.uuid} className="flex flex-col">
-            <div className="flex justify-end">{renderMessageOfUser?.({ message })}</div>
-            <div className="flex justify-start">{renderMessageOfAI?.({ message })}</div>
-          </div>
-        ))}
-      </div>
-    </PageLayout>
-  );
-}
-
-export { Messages };
-export type { MessagesProps };
+export { MessageActions } from './message_actions';
+export { Messages } from './messages';
+export type { MessagesProps } from './messages';

package/src/messages/message_actions.tsx

@@ -0,0 +1,85 @@
+import { Copy } from '@fe-free/core';
+import {
+  CopyFilled,
+  CopyOutlined,
+  DislikeFilled,
+  DislikeOutlined,
+  LikeFilled,
+  LikeOutlined,
+} from '@fe-free/icons';
+import { App, Button, Tooltip } from 'antd';
+import { useCallback, useState } from 'react';
+
+function MessageActionOfCopy({ value, onCopied }: { value: string; onCopied?: () => void }) {
+  const [active, setActive] = useState(false);
+  const { message } = App.useApp();
+
+  const handleCopied = useCallback(async () => {
+    setActive(true);
+    onCopied?.();
+    message.success('复制成功');
+  }, [onCopied, message]);
+
+  return (
+    <Tooltip title="复制">
+      <Copy value={value} className="cursor-pointer text-03" onCopied={handleCopied}>
+        <Button
+          type="text"
+          size="small"
+          className="text-03"
+          icon={active ? <CopyFilled /> : <CopyOutlined />}
+        />
+      </Copy>
+    </Tooltip>
+  );
+}
+
+function MessageActionOfLike({ onClick }: { onClick?: (active: boolean) => Promise<void> }) {
+  const [active, setActive] = useState(false);
+
+  const handleClick = useCallback(async () => {
+    await Promise.resolve(onClick?.(!active));
+    setActive(!active);
+  }, [onClick, active]);
+
+  return (
+    <Tooltip title={active ? '取消点赞' : '点赞'}>
+      <Button
+        type="text"
+        onClick={handleClick}
+        size="small"
+        className="text-03"
+        icon={active ? <LikeFilled /> : <LikeOutlined />}
+      />
+    </Tooltip>
+  );
+}
+
+function MessageActionOfDislike({ onClick }: { onClick?: (active: boolean) => Promise<void> }) {
+  const [active, setActive] = useState(false);
+
+  const handleClick = useCallback(async () => {
+    await Promise.resolve(onClick?.(!active));
+    setActive(!active);
+  }, [onClick, active]);
+
+  return (
+    <Tooltip title={active ? '取消点踩' : '点踩'}>
+      <Button
+        type="text"
+        onClick={handleClick}
+        size="small"
+        className="text-03"
+        icon={active ? <DislikeFilled /> : <DislikeOutlined />}
+      />
+    </Tooltip>
+  );
+}
+
+const MessageActions = {
+  Copy: MessageActionOfCopy,
+  Like: MessageActionOfLike,
+  Dislike: MessageActionOfDislike,
+};
+
+export { MessageActions };

package/src/messages/messages.tsx

@@ -0,0 +1,92 @@
+import { PageLayout } from '@fe-free/core';
+import { useEffect, useMemo, useRef } from 'react';
+import { EnumChatMessageType, type ChatMessage } from '../store/types';
+
+interface MessagesProps<AIData> {
+  messages?: ChatMessage<AIData>[];
+  /** 含所有 */
+  renderMessage?: (props: { message: ChatMessage<AIData> }) => React.ReactNode;
+  /** 系统消息 */
+  renderMessageOfSystem?: (props: { message: ChatMessage<AIData> }) => React.ReactNode;
+  /** 用户消息 */
+  renderMessageOfUser?: (props: { message: ChatMessage<AIData> }) => React.ReactNode;
+  /** AI消息 */
+  renderMessageOfAI?: (props: { message: ChatMessage<AIData> }) => React.ReactNode;
+}
+
+function Messages<AIData>(props: MessagesProps<AIData>) {
+  const { messages, renderMessage, renderMessageOfSystem, renderMessageOfUser, renderMessageOfAI } =
+    props;
+
+  const ref = useRef<HTMLDivElement>(null);
+
+  const lastMessage = useMemo(() => {
+    return messages?.[messages.length - 1];
+  }, [messages]);
+
+  // 首次和更新时滚动到最新消息
+  useEffect(() => {
+    if (!lastMessage?.uuid) {
+      return;
+    }
+
+    const element = document.querySelector(`[data-uuid="${lastMessage.uuid}"]`);
+    if (element) {
+      element.scrollIntoView({ behavior: 'smooth' });
+    }
+  }, [lastMessage?.uuid]);
+
+  // 数据更新是，如果 dom 处于可视区域，则滚动
+  useEffect(() => {
+    if (!lastMessage?.updatedAt || !lastMessage?.uuid || !ref.current) {
+      return;
+    }
+
+    const element = document.querySelector(`[data-uuid="${lastMessage.uuid}"]`);
+    if (!element) {
+      return;
+    }
+
+    const { top: listTop, bottom: listBottom } = ref.current!.getBoundingClientRect();
+    const { top, bottom } = element.getBoundingClientRect();
+
+    // 如果最后一个元素可见，则滚动到底部
+    const isVisible = top < listBottom && bottom > listTop;
+    if (isVisible) {
+      element.scrollIntoView({ behavior: 'smooth' });
+    }
+  }, [lastMessage?.updatedAt, lastMessage?.uuid]);
+
+  return (
+    <PageLayout>
+      <div ref={ref} className="flex h-full flex-col overflow-y-auto">
+        {messages?.map((message) => {
+          return (
+            <div key={message.uuid} data-uuid={message.uuid} className="flex flex-col">
+              {renderMessage ? (
+                renderMessage?.({ message })
+              ) : (
+                <>
+                  {message.type === EnumChatMessageType.SYSTEM && message.system && (
+                    <div className="flex justify-center">
+                      {renderMessageOfSystem?.({ message })}
+                    </div>
+                  )}
+                  {message.type !== EnumChatMessageType.SYSTEM && message.user && (
+                    <div className="flex justify-end">{renderMessageOfUser?.({ message })}</div>
+                  )}
+                  {message.type !== EnumChatMessageType.SYSTEM && message.ai && (
+                    <div className="flex justify-start">{renderMessageOfAI?.({ message })}</div>
+                  )}
+                </>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </PageLayout>
+  );
+}
+
+export { Messages };
+export type { MessagesProps };

package/src/store/index.ts

@@ -2,30 +2,47 @@ import { useMemo } from 'react';
 import { create } from 'zustand';
 import type { ChatMessage } from './types';
 
-interface ChatStore<Value, AIData> {
+interface BaseSenderValue {
+  text?: string;
+  files?: string[];
+}
+interface ChatStore<Value extends BaseSenderValue | undefined, AIData> {
   senderValue?: Value;
   setSenderValue: (senderValue?: Value) => void;
 
   messages: ChatMessage<AIData>[];
+  setMessages: (messages: ChatMessage<AIData>[]) => void;
   addMessage: (message: ChatMessage<AIData>) => void;
   updateMessage: (message: ChatMessage<AIData>) => void;
 
   reset: () => void;
 }
 
-function createChatStore<Value, AIData>() {
+function createChatStore<Value extends BaseSenderValue | undefined, AIData>() {
   const useChatStore = create<ChatStore<Value, AIData>>((set, get, store) => ({
     senderValue: undefined,
     setSenderValue: (senderValue) => {
       set(() => ({ senderValue }));
     },
     messages: [],
+    setMessages: (messages) => {
+      set(() => ({
+        messages: messages.map((message) => ({
+          // 如果没有，则用当前的时间
+          createdAt: Date.now(),
+          updatedAt: Date.now(),
+          ...message,
+        })),
+      }));
+    },
     addMessage: (message) => {
       set((state) => ({
         messages: [
           ...state.messages,
           {
             ...message,
+            // 覆盖
+            createdAt: Date.now(),
             updatedAt: Date.now(),
           },
         ],
@@ -37,6 +54,7 @@ function createChatStore<Value, AIData>() {
           if (m.uuid === message.uuid) {
             return {
               ...message,
+              // 覆盖
               updatedAt: Date.now(),
             };
           }

package/src/store/types.ts

@@ -9,6 +9,10 @@ enum EnumChatMessageStatus {
   ERROR = 'error',
 }
 
+interface ChatMessageOfSystem {
+  data?: any;
+}
+
 interface ChatMessageOfUser {
   text?: string;
   files?: string[];
@@ -16,15 +20,24 @@ interface ChatMessageOfUser {
 
 interface ChatMessageOfAI<AIData> {
   data?: AIData;
+  /** 按需存取 */
+  session_id?: string;
 }
 
 interface ChatMessage<AIData> {
   uuid: string;
-  updatedAt?: number;
-  type?: EnumChatMessageType;
+
   status?: EnumChatMessageStatus;
+
+  type?: EnumChatMessageType;
+  system?: ChatMessageOfSystem;
   user?: ChatMessageOfUser;
   ai?: ChatMessageOfAI<AIData>;
+
+  /** 自动生成 */
+  createdAt?: number;
+  /** 自动更新 */
+  updatedAt?: number;
 }
 
 export { EnumChatMessageStatus, EnumChatMessageType };

package/src/style.scss

@@ -7,8 +7,8 @@
   }
 
   40% {
-    height: 6px;
-    box-shadow: 0 -6px theme('colors.white');
+    height: 8px;
+    box-shadow: 0 -8px theme('colors.white');
   }
 }
 
@@ -21,7 +21,7 @@
   }
 
   40% {
-    height: 6px;
-    box-shadow: 0 -6px theme('colors.primary');
+    height: 8px;
+    box-shadow: 0 -8px theme('colors.primary');
   }
 }

package/src/svgs/keyboard.svg

@@ -1 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="20.70703125" height="20.70703125" viewBox="0 0 20.70703125 20.70703125"><g><path d="M4.66015625,7.7204833984375L4.66015625,7.1204833984375Q4.66015625,7.0712376784375,4.6697636088,7.0229382184375Q4.679370968,6.9746387584375,4.698216479,6.9291416384375Q4.717061989,6.8836445484375,4.744421437,6.8426982584375Q4.77178088,6.8017519684375,4.80660285,6.7669299984375Q4.84142482,6.7321080284375,4.88237113,6.7047485854375Q4.9233174,6.6773891374375,4.96881449,6.6585436274375Q5.01431161,6.6396981164375,5.06261107,6.6300907572375Q5.11091053,6.6204833984375,5.16015625,6.6204833984375L5.76015625,6.6204833984375Q5.80940185,6.6204833984375,5.85770135,6.6300907572375Q5.9060007500000005,6.6396981164375,5.95149775,6.6585436274375Q5.9969949499999995,6.6773891374375,6.03794125,6.7047485854375Q6.07888745,6.7321080284375,6.11370955,6.7669299984375Q6.14853145,6.8017519684375,6.17589095,6.8426982784375Q6.20325025,6.8836445484375,6.2220958500000005,6.9291416384375Q6.24094145,6.9746387584375,6.2505488499999995,7.0229382184375Q6.26015615,7.0712376784375,6.26015625,7.1204833984375L6.26015625,7.7204833984375Q6.26015615,7.7697289984375,6.2505488499999995,7.8180284984375Q6.24094145,7.8663278984375005,6.2220958500000005,7.9118248984375Q6.20325025,7.9573220984374995,6.17589095,7.9982683984375Q6.14853145,8.0392145984375,6.11370955,8.0740366984375Q6.07888745,8.1088585984375,6.03794125,8.1362180984375Q5.9969949499999995,8.1635773984375,5.95149795,8.1824229984375Q5.90600085,8.2012685984375,5.85770135,8.2108759984375Q5.80940185,8.2204832984375,5.76015625,8.2204833984375L5.16015625,8.2204833984375Q5.11091053,8.2204832984375,5.06261107,8.2108759984375Q5.01431161,8.2012685984375,4.96881449,8.1824229984375Q4.9233174,8.1635773984375,4.88237111,8.1362180984375Q4.84142482,8.1088585984375,4.80660285,8.0740366984375Q4.77178088,8.0392145984375,4.744421437,7.9982683984375Q4.717061989,7.9573220984374995,4.698216479,7.9118250984375Q4.679370968,7.8663279984375,4.6697636088,7.8180284984375Q4.66015625,7.7697289984375,4.66015625,7.7204833984375ZM4.66015625,10.8207640984375L4.66015625,10.2207641984375Q4.66015625,10.1715182984375,4.6697636088,10.1232187984375Q4.679370968,10.0749189984375,4.698216479,10.0294217984375Q4.717061989,9.9839245984375,4.744421437,9.9429783984375Q4.77178088,9.9020323984375,4.80660285,9.8672103984375Q4.84142482,9.8323883984375,4.88237113,9.805029398437501Q4.9233174,9.7776698984375,4.96881449,9.7588243984375Q5.01431161,9.7399787984375,5.06261107,9.7303714984375Q5.11091053,9.7207641984375,5.16015625,9.7207641984375L5.76015625,9.7207641984375Q5.80940185,9.7207641984375,5.85770135,9.7303714984375Q5.9060007500000005,9.7399787984375,5.95149775,9.7588240984375Q5.9969949499999995,9.7776696984375,6.03794125,9.8050291984375Q6.07888745,9.8323883984375,6.11370955,9.8672103984375Q6.14853145,9.9020323984375,6.17589095,9.9429783984375Q6.20325025,9.9839245984375,6.2220958500000005,10.0294217984375Q6.24094145,10.0749189984375,6.2505488499999995,10.1232184984375Q6.26015615,10.1715182984375,6.26015625,10.2207641984375L6.26015625,10.8207640984375Q6.26015615,10.8700093984375,6.2505488499999995,10.9183086984375Q6.24094145,10.9666079984375,6.2220958500000005,11.0121054984375Q6.20325025,11.0576028984375,6.17589095,11.0985488984375Q6.14853145,11.1394953984375,6.11370955,11.1743173984375Q6.07888745,11.2091388984375,6.03794125,11.2364983984375Q5.9969949499999995,11.263857798437499,5.95149795,11.282702898437499Q5.90600085,11.3015489984375,5.85770135,11.3111562984375Q5.80940185,11.3207635984375,5.76015625,11.3207640984375L5.16015625,11.3207640984375Q5.11091053,11.3207635984375,5.06261107,11.3111562984375Q5.01431161,11.3015489984375,4.96881449,11.282702898437499Q4.9233174,11.263857798437499,4.88237111,11.2364983984375Q4.84142482,11.2091388984375,4.80660285,11.1743173984375Q4.77178088,11.1394953984375,4.744421437,11.0985488984375Q4.717061989,11.0576028984375,4.698216479,11.0121054984375Q4.679370968,10.9666079984375,4.6697636088,10.9183086984375Q4.66015625,10.8700093984375,4.66015625,10.8207640984375ZM7.92285155,7.7204833984375L7.92285155,7.1204833984375Q7.92285155,7.0712376784375,7.93245885,7.0229382184375Q7.9420661500000005,6.9746387584375,7.96091175,6.9291416384375Q7.97975735,6.8836445484375,8.00711655,6.8426982584375Q8.03447585,6.8017519684375,8.06929775,6.7669299984375Q8.10411975,6.7321080284375,8.14506575,6.7047485854375Q8.186012250000001,6.6773891374375,8.23150945,6.6585436274375Q8.27700665,6.6396981164375,8.32530615,6.6300907572375Q8.37360575,6.6204833984375,8.42285155,6.6204833984375L9.022851450000001,6.6204833984375Q9.072096850000001,6.6204833984375,9.120396150000001,6.6300907572375Q9.168695450000001,6.6396981164375,9.21419285,6.6585436274375Q9.25968985,6.6773891374375,9.30063625,6.7047485854375Q9.34158225,6.7321080284375,9.376404749999999,6.7669299984375Q9.41122625,6.8017519684375,9.43858625,6.8426982784375Q9.46594525,6.8836445484375,9.48479085,6.9291416384375Q9.50363635,6.9746387584375,9.51324365,7.0229382184375Q9.522850949999999,7.0712376784375,9.522851450000001,7.1204833984375L9.522851450000001,7.7204833984375Q9.522850949999999,7.7697289984375,9.51324365,7.8180284984375Q9.50363635,7.8663278984375005,9.48479085,7.9118248984375Q9.46594525,7.9573220984374995,9.43858575,7.9982683984375Q9.41122625,8.0392145984375,9.376404749999999,8.0740366984375Q9.34158225,8.1088585984375,9.30063625,8.1362180984375Q9.25968935,8.1635773984375,9.214192350000001,8.1824229984375Q9.168695450000001,8.2012685984375,9.120396150000001,8.2108759984375Q9.072096850000001,8.2204832984375,9.022851450000001,8.2204833984375L8.42285155,8.2204833984375Q8.37360575,8.2204832984375,8.32530615,8.2108759984375Q8.27700665,8.2012685984375,8.23150925,8.1824229984375Q8.186012250000001,8.1635773984375,8.14506605,8.1362180984375Q8.10411975,8.1088585984375,8.06929775,8.0740366984375Q8.03447585,8.0392145984375,8.00711655,7.9982683984375Q7.97975705,7.9573220984374995,7.9609115500000005,7.9118250984375Q7.9420661500000005,7.8663279984375,7.93245885,7.8180284984375Q7.92285155,7.7697289984375,7.92285155,7.7204833984375ZM7.92285155,10.8207640984375L7.92285155,10.2207641984375Q7.92285155,10.1715182984375,7.93245885,10.1232187984375Q7.9420661500000005,10.0749189984375,7.96091175,10.0294217984375Q7.97975735,9.9839245984375,8.00711655,9.9429783984375Q8.03447585,9.9020323984375,8.06929775,9.8672103984375Q8.10411975,9.8323883984375,8.14506575,9.805029398437501Q8.186012250000001,9.7776698984375,8.23150945,9.7588243984375Q8.27700665,9.7399787984375,8.32530615,9.7303714984375Q8.37360575,9.7207641984375,8.42285155,9.7207641984375L9.022851450000001,9.7207641984375Q9.072096850000001,9.7207641984375,9.120396150000001,9.7303714984375Q9.168695450000001,9.7399787984375,9.21419285,9.7588240984375Q9.25968985,9.7776696984375,9.30063625,9.8050291984375Q9.34158225,9.8323883984375,9.376404749999999,9.8672103984375Q9.41122625,9.9020323984375,9.43858625,9.9429783984375Q9.46594525,9.9839245984375,9.48479085,10.0294217984375Q9.50363635,10.0749189984375,9.51324365,10.1232184984375Q9.522850949999999,10.1715182984375,9.522851450000001,10.2207641984375L9.522851450000001,10.8207640984375Q9.522850949999999,10.8700093984375,9.51324365,10.9183086984375Q9.50363635,10.9666079984375,9.48479085,11.0121054984375Q9.46594525,11.0576028984375,9.43858575,11.0985488984375Q9.41122625,11.1394953984375,9.376404749999999,11.1743173984375Q9.34158225,11.2091388984375,9.30063625,11.2364983984375Q9.25968935,11.263857798437499,9.214192350000001,11.282702898437499Q9.168695450000001,11.3015489984375,9.120396150000001,11.3111562984375Q9.072096850000001,11.3207635984375,9.022851450000001,11.3207640984375L8.42285155,11.3207640984375Q8.37360575,11.3207635984375,8.32530615,11.3111562984375Q8.27700665,11.3015489984375,8.23150925,11.282702898437499Q8.186012250000001,11.263857798437499,8.14506605,11.2364983984375Q8.10411975,11.2091388984375,8.06929775,11.1743173984375Q8.03447585,11.1394953984375,8.00711655,11.0985488984375Q7.97975705,11.0576028984375,7.9609115500000005,11.0121054984375Q7.9420661500000005,10.9666079984375,7.93245885,10.9183086984375Q7.92285155,10.8700093984375,7.92285155,10.8207640984375ZM11.18554685,7.7204833984375L11.18554685,7.1204833984375Q11.18554685,7.0712376784375,11.19515415,7.0229382184375Q11.20476155,6.9746387584375,11.22360705,6.9291416384375Q11.24245265,6.8836445484375,11.269811650000001,6.8426982584375Q11.29717115,6.8017519684375,11.331993149999999,6.7669299984375Q11.36681505,6.7321080284375,11.40776155,6.7047485854375Q11.44870755,6.6773891374375,11.49420455,6.6585436274375Q11.539701449999999,6.6396981164375,11.58800125,6.6300907572375Q11.63630105,6.6204833984375,11.68554685,6.6204833984375L12.28554675,6.6204833984375Q12.33479215,6.6204833984375,12.38309195,6.6300907572375Q12.43139075,6.6396981164375,12.47688775,6.6585436274375Q12.52238465,6.6773891374375,12.56333165,6.7047485854375Q12.60427765,6.7321080284375,12.63910005,6.7669299984375Q12.67392155,6.8017519684375,12.70128055,6.8426982784375Q12.72864055,6.8836445484375,12.74748615,6.9291416384375Q12.76633265,6.9746387584375,12.77593995,7.0229382184375Q12.78554725,7.0712376784375,12.78554725,7.1204833984375L12.78554725,7.7204833984375Q12.78554725,7.7697289984375,12.77593995,7.8180284984375Q12.76633265,7.8663278984375005,12.74748615,7.9118248984375Q12.72864055,7.9573220984374995,12.70128155,7.9982683984375Q12.67392155,8.0392145984375,12.63910005,8.0740366984375Q12.60427765,8.1088585984375,12.56333165,8.1362180984375Q12.52238465,8.1635773984375,12.47688775,8.1824229984375Q12.43139075,8.2012685984375,12.38309095,8.2108759984375Q12.33479215,8.2204832984375,12.28554675,8.2204833984375L11.68554685,8.2204833984375Q11.63630105,8.2204832984375,11.58800125,8.2108759984375Q11.539701449999999,8.2012685984375,11.49420455,8.1824229984375Q11.44870755,8.1635773984375,11.407761050000001,8.1362180984375Q11.36681505,8.1088585984375,11.331993149999999,8.0740366984375Q11.29717115,8.0392145984375,11.269811650000001,7.9982683984375Q11.24245215,7.9573220984374995,11.22360655,7.9118250984375Q11.20476155,7.8663279984375,11.19515415,7.8180284984375Q11.18554685,7.7697289984375,11.18554685,7.7204833984375ZM14.44726565,7.7204833984375L14.44726565,7.1204833984375Q14.44726565,7.0712376784375,14.45687295,7.0229382184375Q14.46648025,6.9746387584375,14.48532485,6.9291416384375Q14.50417045,6.8836445484375,14.53153035,6.8426982584375Q14.55888935,6.8017519684375,14.59371185,6.7669299984375Q14.62853435,6.7321080284375,14.66948025,6.7047485854375Q14.71042625,6.6773891374375,14.75592325,6.6585436274375Q14.80142025,6.6396981164375,14.84972025,6.6300907572375Q14.89802025,6.6204833984375,14.94726525,6.6204833984375L15.54726625,6.6204833984375Q15.59651125,6.6204833984375,15.64480925,6.6300907572375Q15.69310825,6.6396981164375,15.73860525,6.6585436274375Q15.78410325,6.6773891374375,15.82505025,6.7047485854375Q15.86599625,6.7321080284375,15.90081925,6.7669299984375Q15.93564025,6.8017519684375,15.96299925,6.8426982784375Q15.99035825,6.8836445484375,16.00920525,6.9291416384375Q16.028049250000002,6.9746387584375,16.037657250000002,7.0229382184375Q16.047265250000002,7.0712376784375,16.04726625,7.1204833984375L16.04726625,7.7204833984375Q16.047265250000002,7.7697289984375,16.037657250000002,7.8180284984375Q16.028049250000002,7.8663278984375005,16.00920525,7.9118248984375Q15.99035825,7.9573220984374995,15.96299925,7.9982683984375Q15.93564025,8.0392145984375,15.90081925,8.0740366984375Q15.86599625,8.1088585984375,15.82504925,8.1362180984375Q15.78410325,8.1635773984375,15.73860725,8.1824229984375Q15.69310925,8.2012685984375,15.64481025,8.2108759984375Q15.59651125,8.2204832984375,15.54726625,8.2204833984375L14.94726525,8.2204833984375Q14.89802025,8.2204832984375,14.84972025,8.2108759984375Q14.80142025,8.2012685984375,14.75592325,8.1824229984375Q14.71042625,8.1635773984375,14.66947925,8.1362180984375Q14.62853435,8.1088585984375,14.59371185,8.0740366984375Q14.55888935,8.0392145984375,14.53153035,7.9982683984375Q14.50417045,7.9573220984374995,14.48532485,7.9118250984375Q14.46648025,7.8663279984375,14.45687295,7.8180284984375Q14.44726565,7.7697289984375,14.44726565,7.7204833984375ZM11.18554685,10.8207640984375L11.18554685,10.2207641984375Q11.18554685,10.1715182984375,11.19515415,10.1232187984375Q11.20476155,10.0749189984375,11.22360705,10.0294217984375Q11.24245265,9.9839245984375,11.269811650000001,9.9429783984375Q11.29717115,9.9020323984375,11.331993149999999,9.8672103984375Q11.36681505,9.8323883984375,11.40776155,9.805029398437501Q11.44870755,9.7776698984375,11.49420455,9.7588243984375Q11.539701449999999,9.7399787984375,11.58800125,9.7303714984375Q11.63630105,9.7207641984375,11.68554685,9.7207641984375L12.28554675,9.7207641984375Q12.33479215,9.7207641984375,12.38309195,9.7303714984375Q12.43139075,9.7399787984375,12.47688775,9.7588240984375Q12.52238465,9.7776696984375,12.56333165,9.8050291984375Q12.60427765,9.8323883984375,12.63910005,9.8672103984375Q12.67392155,9.9020323984375,12.70128055,9.9429783984375Q12.72864055,9.9839245984375,12.74748615,10.0294217984375Q12.76633265,10.0749189984375,12.77593995,10.1232184984375Q12.78554725,10.1715182984375,12.78554725,10.2207641984375L12.78554725,10.8207640984375Q12.78554725,10.8700093984375,12.77593995,10.9183086984375Q12.76633265,10.9666079984375,12.74748615,11.0121054984375Q12.72864055,11.0576028984375,12.70128155,11.0985488984375Q12.67392155,11.1394953984375,12.63910005,11.1743173984375Q12.60427765,11.2091388984375,12.56333165,11.2364983984375Q12.52238465,11.263857798437499,12.47688775,11.282702898437499Q12.43139075,11.3015489984375,12.38309095,11.3111562984375Q12.33479215,11.3207635984375,12.28554675,11.3207640984375L11.68554685,11.3207640984375Q11.63630105,11.3207635984375,11.58800125,11.3111562984375Q11.539701449999999,11.3015489984375,11.49420455,11.282702898437499Q11.44870755,11.263857798437499,11.407761050000001,11.2364983984375Q11.36681505,11.2091388984375,11.331993149999999,11.1743173984375Q11.29717115,11.1394953984375,11.269811650000001,11.0985488984375Q11.24245215,11.0576028984375,11.22360655,11.0121054984375Q11.20476155,10.9666079984375,11.19515415,10.9183086984375Q11.18554685,10.8700093984375,11.18554685,10.8207640984375ZM14.44726565,10.8207640984375L14.44726565,10.2207641984375Q14.44726565,10.1715182984375,14.45687295,10.1232187984375Q14.46648025,10.0749189984375,14.48532485,10.0294217984375Q14.50417045,9.9839245984375,14.53153035,9.9429783984375Q14.55888935,9.9020323984375,14.59371185,9.8672103984375Q14.62853435,9.8323883984375,14.66948025,9.805029398437501Q14.71042625,9.7776698984375,14.75592325,9.7588243984375Q14.80142025,9.7399787984375,14.84972025,9.7303714984375Q14.89802025,9.7207641984375,14.94726525,9.7207641984375L15.54726625,9.7207641984375Q15.59651125,9.7207641984375,15.64480925,9.7303714984375Q15.69310825,9.7399787984375,15.73860525,9.7588240984375Q15.78410325,9.7776696984375,15.82505025,9.8050291984375Q15.86599625,9.8323883984375,15.90081925,9.8672103984375Q15.93564025,9.9020323984375,15.96299925,9.9429783984375Q15.99035825,9.9839245984375,16.00920525,10.0294217984375Q16.028049250000002,10.0749189984375,16.037657250000002,10.1232184984375Q16.047265250000002,10.1715182984375,16.04726625,10.2207641984375L16.04726625,10.8207640984375Q16.047265250000002,10.8700093984375,16.037657250000002,10.9183086984375Q16.028049250000002,10.9666079984375,16.00920525,11.0121054984375Q15.99035825,11.0576028984375,15.96299925,11.0985488984375Q15.93564025,11.1394953984375,15.90081925,11.1743173984375Q15.86599625,11.2091388984375,15.82504925,11.2364983984375Q15.78410325,11.263857798437499,15.73860725,11.282702898437499Q15.69310925,11.3015489984375,15.64481025,11.3111562984375Q15.59651125,11.3207635984375,15.54726625,11.3207640984375L14.94726525,11.3207640984375Q14.89802025,11.3207635984375,14.84972025,11.3111562984375Q14.80142025,11.3015489984375,14.75592325,11.282702898437499Q14.71042625,11.263857798437499,14.66947925,11.2364983984375Q14.62853435,11.2091388984375,14.59371185,11.1743173984375Q14.55888935,11.1394953984375,14.53153035,11.0985488984375Q14.50417045,11.0576028984375,14.48532485,11.0121054984375Q14.46648025,10.9666079984375,14.45687295,10.9183086984375Q14.44726565,10.8700093984375,14.44726565,10.8207640984375Z" fill="#222222" fill-opacity="1"/></g><rect x="6.4091796875" y="13.35443115234375" width="7.887460708618164" height="1.399999976158142" rx="0.5" fill="#222222" fill-opacity="1"/><ellipse cx="10.353515625" cy="10.353515625" rx="9.228515625" ry="9.228515625" fill-opacity="0" stroke-opacity="1" stroke="#222222" fill="none" stroke-width="1.5" stroke-linecap="ROUND" stroke-linejoin="round"/></svg>
+<svg width="20" height="18" viewBox="0 0 20 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.9561 0C15.6719 -6.75109e-08 16.2617 -0.000981836 16.7402 0.0380859C17.2288 0.0780087 17.6787 0.164078 18.1006 0.378906C18.7546 0.712247 19.2867 1.24447 19.6201 1.89844C19.8351 2.32031 19.921 2.77023 19.9609 3.25879C20 3.7373 19.999 4.32705 19.999 5.04297V12.3477C19.999 13.0634 20 13.6534 19.9609 14.1318C19.921 14.6203 19.8349 15.0694 19.6201 15.4912C19.2867 16.1456 18.7549 16.6782 18.1006 17.0117C17.6786 17.2267 17.2289 17.3126 16.7402 17.3525C16.2617 17.3916 15.672 17.3906 14.9561 17.3906H5.04297C4.32702 17.3906 3.73732 17.3916 3.25879 17.3525C2.77019 17.3126 2.32034 17.2267 1.89844 17.0117C1.24428 16.6782 0.712259 16.1455 0.378906 15.4912C0.1642 15.0695 0.078011 14.6202 0.0380859 14.1318C-0.000970309 13.6534 -2.36304e-07 13.0634 0 12.3477V5.04297C-4.75188e-07 4.32705 -0.00100976 3.7373 0.0380859 3.25879C0.0780378 2.7702 0.163945 2.32032 0.378906 1.89844C0.712319 1.24436 1.24435 0.712298 1.89844 0.378906C2.32035 0.163931 2.77017 0.0780345 3.25879 0.0380859C3.73732 -0.00101134 4.32702 -3.93286e-07 5.04297 0H14.9561ZM5.04297 1.73828C4.29836 1.73828 3.79169 1.73951 3.40039 1.77148C3.01944 1.80264 2.82442 1.85944 2.68848 1.92871C2.36139 2.09541 2.09543 2.3614 1.92871 2.68848C1.85945 2.82441 1.80264 3.0195 1.77148 3.40039C1.73951 3.79168 1.73828 4.29841 1.73828 5.04297V12.3477C1.73828 13.092 1.73955 13.599 1.77148 13.9902C1.8026 14.3707 1.85956 14.5662 1.92871 14.7021C2.09537 15.0291 2.36157 15.2952 2.68848 15.4619C2.82441 15.5312 3.01958 15.588 3.40039 15.6191C3.79169 15.6511 4.29836 15.6514 5.04297 15.6514H14.9561C15.7006 15.6514 16.2073 15.6511 16.5986 15.6191C16.9796 15.588 17.1746 15.5312 17.3105 15.4619C17.6377 15.2952 17.9036 15.0293 18.0703 14.7021C18.1395 14.5662 18.1964 14.371 18.2275 13.9902C18.2595 13.599 18.2607 13.092 18.2607 12.3477V5.04297C18.2607 4.29841 18.2595 3.79168 18.2275 3.40039C18.1964 3.01955 18.1396 2.82441 18.0703 2.68848C17.9036 2.36151 17.6376 2.09536 17.3105 1.92871C17.1746 1.85954 16.9793 1.8026 16.5986 1.77148C16.2073 1.73954 15.7006 1.73828 14.9561 1.73828H5.04297ZM14.7822 12.1738C15.2625 12.1738 15.6523 12.5637 15.6523 13.0439C15.6521 13.5239 15.2623 13.9131 14.7822 13.9131H5.2168C4.73692 13.9129 4.34795 13.5238 4.34766 13.0439C4.34766 12.5638 4.73674 12.174 5.2168 12.1738H14.7822ZM6.08691 7.82617C6.56708 7.82626 6.95605 8.2161 6.95605 8.69629V9.56543C6.95592 10.0455 6.567 10.4345 6.08691 10.4346H5.2168C4.73683 10.4344 4.3478 10.0454 4.34766 9.56543V8.69629C4.34766 8.21618 4.73674 7.82639 5.2168 7.82617H6.08691ZM10.4346 7.82617C10.9148 7.82618 11.3047 8.21605 11.3047 8.69629V9.56543C11.3045 10.0456 10.9147 10.4346 10.4346 10.4346H9.56543C9.08527 10.4346 8.69545 10.0456 8.69531 9.56543V8.69629C8.69531 8.21605 9.08519 7.82617 9.56543 7.82617H10.4346ZM14.7822 7.82617C15.2624 7.82627 15.6514 8.21611 15.6514 8.69629V9.56543C15.6512 10.0455 15.2623 10.4345 14.7822 10.4346H13.9121C13.4321 10.4344 13.0431 10.0454 13.043 9.56543V8.69629C13.043 8.21618 13.432 7.82638 13.9121 7.82617H14.7822ZM6.08691 3.47852C6.56695 3.4786 6.95583 3.86766 6.95605 4.34766V5.21777C6.95585 5.69779 6.56696 6.08683 6.08691 6.08691H5.2168C4.73687 6.08669 4.34787 5.6977 4.34766 5.21777V4.34766C4.34788 3.86774 4.73688 3.47874 5.2168 3.47852H6.08691ZM10.4346 3.47852C10.9147 3.47852 11.3045 3.86761 11.3047 4.34766V5.21777C11.3045 5.69784 10.9147 6.08691 10.4346 6.08691H9.56543C9.08532 6.08691 8.69552 5.69784 8.69531 5.21777V4.34766C8.69554 3.86761 9.08533 3.47852 9.56543 3.47852H10.4346ZM14.7822 3.47852C15.2622 3.47861 15.6511 3.86767 15.6514 4.34766V5.21777C15.6512 5.69778 15.2623 6.08682 14.7822 6.08691H13.9121C13.4322 6.0867 13.0432 5.69771 13.043 5.21777V4.34766C13.0432 3.86774 13.4322 3.47872 13.9121 3.47852H14.7822Z"/>
+</svg>

package/src/svgs/record.svg

@@ -1 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="20.70703125" height="20.70703125" viewBox="0 0 20.70703125 20.70703125"><g transform="matrix(0,1,-1,0,20.70703125,-19.20703125)"><g transform="matrix(0,-1,1,0,0,39.9140625)"><ellipse cx="29.560546875" cy="29.560546875" rx="9.228515625" ry="9.228515625" fill-opacity="0" stroke-opacity="1" stroke="#222222" fill="none" stroke-width="1.5" stroke-linecap="ROUND" stroke-linejoin="round"/></g><path d="M26.49383952421875,6.692684515Q25.07902628421875,7.284493835,23.98794138421875,8.363533925L23.98804682421875,8.363640525000001Q23.881225644218752,8.469282625,23.82334768421875,8.607922825Q23.76546979421875,8.746563125,23.76546979421875,8.896799325Q23.76546979421875,8.970653025,23.77987802421875,9.043087725Q23.79428613421875,9.115522425,23.82254874421875,9.183754225Q23.85081136421875,9.251986025,23.89184236421875,9.313393325Q23.93287330421875,9.374800725,23.98509579421875,9.427023125Q24.03731831421875,9.479245625,24.09872549421875,9.520276525Q24.16013264421875,9.561307424999999,24.22836464421875,9.589570325Q24.29659664421875,9.617832925,24.36903134421875,9.632241225Q24.44146604121875,9.646649325,24.51531982421875,9.646649325Q24.66339293421875,9.646649325,24.80035138421875,9.590364025Q24.937309834218752,9.534078825,25.04259282421875,9.429958125L25.04269826421875,9.430064725Q25.92663822421875,8.555882825,27.07268192421875,8.076498525Q28.25945302421875,7.580078125,29.56052212421875,7.580078125Q30.86159232421875,7.580078125,32.04836272421875,8.076498525Q33.19440652421875,8.555882725,34.07834622421875,9.430064725L34.07845212421875,9.429957824999999Q34.183734924218754,9.534078625,34.32069392421875,9.590364025Q34.457652124218754,9.646649325,34.605724824218754,9.646649325Q34.67957882421875,9.646649325,34.75201282421875,9.632241225Q34.82444782421875,9.617832625,34.89267882421875,9.589570025Q34.96091082421875,9.561307424999999,35.02231882421875,9.520276525Q35.083725824218746,9.479245625,35.13594882421875,9.427023125Q35.18817182421875,9.374800725,35.22920182421875,9.313393625Q35.27023282421875,9.251986225,35.29849482421875,9.183754425Q35.32675882421875,9.115522425,35.341166824218746,9.043087925Q35.35557582421875,8.970653025,35.35557582421875,8.896799325Q35.35557582421875,8.746562925,35.29769782421875,8.607922525Q35.239820824218754,8.469282225,35.13299882421875,8.363640325L35.13310382421875,8.363533925Q34.04201892421875,7.284493715,32.62720582421875,6.692684515Q31.16267392421875,6.080078125,29.56052212421875,6.080078125Q27.95837112421875,6.080078125,26.49383952421875,6.692684515Z" fill-rule="evenodd" fill="#222222" fill-opacity="1"/><path d="M30.88091327109375,11.87667225Q31.48886827109375,12.13097655,31.95781417109375,12.59474595L31.95791957109375,12.594639149999999Q32.06320287109375,12.69876005,32.20016097109375,12.75504545Q32.33712007109375,12.81133075,32.48519327109375,12.81133075Q32.55904677109375,12.81133075,32.63148117109375,12.79692245Q32.70391557109375,12.78251435,32.77214767109375,12.75425175Q32.84037967109375,12.72598915,32.901786771093754,12.68495815Q32.96319437109375,12.64392725,33.01541707109375,12.59170475Q33.06763937109375,12.53948225,33.10867027109375,12.47807505Q33.14970107109375,12.41666785,33.17796377109375,12.34843575Q33.20622637109375,12.28020385,33.22063447109375,12.20776915Q33.23504307109375,12.13533445,33.23504357109375,12.06148075Q33.23504397109375,11.91124435,33.17716597109375,11.77260423Q33.11928847109375,11.63396394,33.01246647109375,11.52832204L33.01257177109375,11.52821547Q32.33648017109375,10.8595876407,31.45975537109375,10.49285811Q30.55231717109375,10.11328143,29.56019207109375,10.11328137Q28.56806807109375,10.11328131,27.66062997109375,10.49285814Q26.78390618109375,10.8595873907,26.10781443109375,11.52821541L26.10791987109375,11.52832204Q26.001098691093752,11.63396394,25.94322073109375,11.77260423Q25.88534284109375,11.91124435,25.88534284109375,12.06148075Q25.88534284109375,12.13533445,25.89975107109375,12.20776915Q25.91415918109375,12.28020385,25.94242179109375,12.34843585Q25.97068441109375,12.41666795,26.01171541109375,12.47807505Q26.05274635109375,12.53948225,26.10496884109375,12.59170475Q26.15719136109375,12.64392725,26.21859854109375,12.68495825Q26.28000569109375,12.72598915,26.34823769109375,12.75425175Q26.41646969109375,12.78251435,26.48890439109375,12.79692245Q26.56133908809375,12.81133075,26.63519287109375,12.81133075Q26.78326601109375,12.81133075,26.92022449109375,12.75504565Q27.05718294109375,12.69876025,27.16246593109375,12.59463945L27.16257131109375,12.59474595Q27.63151717109375,12.13097695,28.23947267109375,11.876672150000001Q28.86915017109375,11.61328119,29.56019207109375,11.61328131Q30.25123577109375,11.61328131,30.88091327109375,11.87667225Z" fill-rule="evenodd" fill="#222222" fill-opacity="1"/><path d="M28.2385588909375,14.4939614825C28.1481483279375,14.567035732499999,28.1570268349375,14.6987590825,28.2446259009375,14.7751811125L29.4286651609375,15.8081450125C29.5040001609375,15.8738679125,29.6162943609375,15.8738665125,29.6916277609375,15.8081418125L30.8756027609375,14.7751816525C30.963198460937498,14.6987587225,30.9720709609375,14.5670344825,30.8816618609375,14.4939614525C30.5215592609375,14.2029087725,30.0614510609375,14.0283203125,29.5601104609375,14.0283203125C29.0587695809375,14.0283203125,28.5986614809375,14.2029087725,28.2385588909375,14.4939614825Z" fill="#222222" fill-opacity="1"/></g></svg>
+<svg width="14" height="18" viewBox="0 0 14 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.46387 8.41895C1.46399 11.2488 3.75802 13.5429 6.58789 13.543C9.41782 13.543 11.7118 11.2488 11.7119 8.41895H13.1758C13.1757 11.8102 10.6136 14.6009 7.31934 14.9648V17.2031H5.85547V14.9648C2.56181 14.6004 0.000112876 11.8097 0 8.41895H1.46387ZM6.58789 0C8.60932 0 10.248 1.63873 10.248 3.66016V8.41797C10.248 10.4394 8.60932 12.0781 6.58789 12.0781C4.56664 12.0779 2.92773 10.4393 2.92773 8.41797V3.66016C2.92775 1.63887 4.56665 0.000220666 6.58789 0Z" />
+</svg>