@baishuyun/chat-sdk 0.0.15 → 0.0.17

package/src/components/biz-comp/FieldCheckerListMsg.tsx

@@ -1,38 +1,117 @@
-import { memo, ReactNode } from 'react';
+import {
+  forwardRef,
+  memo,
+  ReactNode,
+  useCallback,
+  useImperativeHandle,
+  useMemo,
+  useState,
+} from 'react';
 import { CollapsibleTxtMsg } from '../bs-ui/collapsible-txt-msg';
 import { FieldChecker, FieldCheckerProps } from './FieldChecker';
 import { EditIcon, LetterAIcon } from '../bs-ui/bs-icons';
 import { FieldValueChecker, FieldValueCheckerProps } from './FieldValueChecker';
+import { SquareChecker } from '../bs-ui/square-checker';
+import { cn } from '@/lib/utils';
+
+export interface FieldCheckerListMsgRef {
+  getCheckedFieldsLength: () => number;
+}
 
 export const FieldCheckerListMsg = memo(
-  ({
-    fields,
-    children,
-    streaming,
-    confirmed,
-  }: {
-    fields: Array<FieldCheckerProps>;
-    children?: ReactNode;
-    streaming: boolean;
-    confirmed?: boolean;
-  }) => {
+  forwardRef<
+    FieldCheckerListMsgRef,
+    {
+      fields: Array<FieldCheckerProps>;
+      children?: ReactNode;
+      streaming: boolean;
+      confirmed?: boolean;
+    }
+  >(({ fields, children, streaming, confirmed }, ref) => {
+    // Track individual field checked states (all default to true)
+    const [checkedMap, setCheckedMap] = useState<Record<string, boolean>>(() =>
+      Object.fromEntries(fields.map((f) => [f.field?.label ?? '', true]))
+    );
+
+    const allChecked = useMemo(
+      () => fields.length > 0 && fields.every((f) => checkedMap[f.field?.label ?? ''] !== false),
+      [checkedMap, fields]
+    );
+
+    const someChecked = useMemo(
+      () => fields.some((f) => checkedMap[f.field?.label ?? ''] !== false),
+      [checkedMap, fields]
+    );
+
+    const intermediate = streaming || (!allChecked && someChecked);
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        getCheckedFieldsLength: () =>
+          fields.filter((f) => checkedMap[f.field?.label ?? ''] !== false).length,
+      }),
+      [checkedMap, fields]
+    );
+
+    const handleToggleAll = useCallback(
+      (checked: boolean | 'indeterminate') => {
+        const value = checked === true;
+        setCheckedMap(Object.fromEntries(fields.map((f) => [f.field?.label ?? '', value])));
+        fields.forEach((f) => f.onChange?.(value, f.field));
+      },
+      [fields]
+    );
+
     return (
       <CollapsibleTxtMsg title="字段生成" icon={<LetterAIcon />} defaultOpen>
+        {
+          <div
+            className={cn(
+              'flex gap-[10px] px-4 py-[10px] rounded-[4px] w-full transition-colors cursor-pointer hover:bg-[#EFF0F6] items-center',
+              {
+                'pointer-events-none': confirmed || streaming,
+              }
+            )}
+            onClick={() => {
+              if (confirmed) {
+                return;
+              }
+
+              const newChecked = !allChecked;
+              handleToggleAll(newChecked);
+            }}
+          >
+            <SquareChecker
+              readonly={confirmed || streaming}
+              checked={allChecked && !streaming}
+              onCheckedChange={handleToggleAll}
+              intermediate={intermediate}
+            >
+              <span className="!text-[#0265ff] !font-[700]">全选</span>
+            </SquareChecker>
+          </div>
+        }
         {fields.map((f) => (
-          <FieldChecker {...f} streaming={streaming} confirmed={confirmed} />
+          <FieldChecker
+            {...f}
+            key={f.field?.label}
+            checked={checkedMap[f.field?.label ?? '']}
+            streaming={streaming}
+            confirmed={confirmed}
+            onChange={(checked, field, parentFieldName, index) => {
+              const isSubField = index !== undefined && parentFieldName !== undefined;
+              if (!isSubField) {
+                setCheckedMap((prev) => ({ ...prev, [f.field?.label ?? '']: checked }));
+              }
+              f.onChange?.(checked, field, parentFieldName, index);
+            }}
+          />
         ))}
         {children}
       </CollapsibleTxtMsg>
     );
-  },
-  (p1, p2) => {
-    return (
-      p1.fields.length === p2.fields.length &&
-      p1.streaming === p2.streaming &&
-      p1.confirmed === p2.confirmed &&
-      p1.children === p2.children
-    );
-  }
+  })
 );
 
 export const FieldValueCheckerListMsg = memo(

package/src/components/biz-comp/chat-client.tsx

@@ -109,12 +109,13 @@ const ChatContent: React.FC<{ client?: ChatSDK }> = ({ client }): ReactPortal |
 export const ChatEntryBtn = ({ client }: { client: ChatSDK }) => {
   const { bottom = 10, right = 10 } = client?.options?.btnOffset || {};
 
-  const { entryVisible, entryWrapper, setStatus, isVisible, entryVariant } = useChatStore(
+  const { entryVisible, status, entryWrapper, setStatus, isVisible, entryVariant } = useChatStore(
     (store) => ({
       setStatus: store.setChatStatus,
       entryVariant: store.chatEntryVariant,
       entryWrapper: store.chatEntryElWrapper,
       isVisible: store.chatStatus !== 'hide',
+      status: store.chatStatus,
       entryVisible: store.chatEntryVisible,
     })
   );
@@ -138,6 +139,7 @@ export const ChatEntryBtn = ({ client }: { client: ChatSDK }) => {
 
   const EntryJsx = EntryCom ? (
     <EntryCom
+      chatStatus={status}
       client={client}
       variant={entryVariant}
       chatVisible={isVisible}
@@ -191,9 +193,10 @@ const MultiEntryButtonItem = ({
   client: ChatSDK;
   config: ChatEntryButtonConfig;
 }) => {
-  const { setStatus, isVisible } = useChatStore((store) => ({
+  const { setStatus, isVisible, status } = useChatStore((store) => ({
     setStatus: store.setChatStatus,
     isVisible: store.chatStatus !== 'hide',
+    status: store.chatStatus,
   }));
 
   const EntryInfo = useDefaultPluginCustomComponent('EntryButton');
@@ -215,6 +218,7 @@ const MultiEntryButtonItem = ({
 
   const EntryJsx = EntryCom ? (
     <EntryCom
+      chatStatus={status}
       client={client}
       variant={config.variant}
       chatVisible={isVisible}
@@ -284,6 +288,7 @@ export const ChatClient = ({ store, client }: { client: ChatSDK; store: ChatStor
   return (
     <ChatStoreProvider store={store}>
       <TooltipProvider
+        delayDuration={100}
         zIndex={client?.options?.safeZIndex != null ? client.options.safeZIndex + 1 : 50}
       >
         <ChatWidgets client={client} />

package/src/components/biz-comp/error-msg.tsx

@@ -1,6 +1,16 @@
+import { useEffect } from 'react';
 import { FakeBotMessage } from './FakeBotMsg';
+import { useFakeGlobalLoadingMessage } from '@/hooks/use-frame-mode';
 
 export const ErrorFallbackMsg = ({ error }: { error?: string }) => {
+  const loading = useFakeGlobalLoadingMessage();
+
+  useEffect(() => {
+    if (loading) {
+      loading.clearGlobalFakeLoadingMessage();
+    }
+  }, [loading]);
+
   return (
     <FakeBotMessage headless>
       {error || '出现了一些问题，无法显示预览内容，请稍后重试。'}

package/src/components/biz-comp/messages.tsx

@@ -4,12 +4,16 @@ import { PreviewMessage } from './preview-message';
 import { FakeBotMessage } from './FakeBotMsg';
 import { OpeningLines } from './opening-lines';
 import { useRef } from 'react';
+import { useFakeGlobalLoadingMessage } from '@/hooks/use-frame-mode';
+import { GenerateAnimation } from '../bs-ui/generate-animation';
 
 export const Messages = (props: MessagesProps) => {
   const messagesContainerRef = useRef(null);
 
   const { messages, setMessages, addToolOutput, sendMessage, regenerate } = props;
 
+  const { globalFakeLoadingMessage } = useFakeGlobalLoadingMessage();
+
   return (
     <div
       className="relative overscroll-behavior-contain -webkit-overflow-scrolling-touch flex-1 touch-pan-y overflow-y-auto m-h-0 h-full"
@@ -38,6 +42,12 @@ export const Messages = (props: MessagesProps) => {
               />
             );
           })}
+
+          {globalFakeLoadingMessage && (
+            <FakeBotMessage key={'fake'}>
+              <GenerateAnimation>{globalFakeLoadingMessage}</GenerateAnimation>
+            </FakeBotMessage>
+          )}
         </ConversationContent>
         <ConversationScrollButton />
       </Conversation>

package/src/components/biz-comp/multi-modal-input/clear-btn.tsx

@@ -9,15 +9,17 @@ import { IconBtn } from '@/components/bs-ui/icon-btn';
 export const ClearBtn = ({
   setMessages,
   status,
+  chatId,
 }: {
   setMessages: UseChatHelpers<ChatMessage>['setMessages'];
   status: UseChatHelpers<ChatMessage>['status'];
+  chatId: string;
 }) => {
   const { exec: onBeforeClearMsg = () => {} } =
     usePluginLifeCycleChainRunner('onBeforeMessagesClear');
 
   const clearMsg = useCallback(() => {
-    onBeforeClearMsg(null);
+    onBeforeClearMsg(chatId);
     setMessages(() => []);
   }, [onBeforeClearMsg, setMessages]);
 

package/src/components/biz-comp/multi-modal-input/index.tsx

@@ -28,6 +28,8 @@ import { IconBtn } from '@/components/bs-ui/icon-btn';
 import { DividerIcon, PlaneIcon, UploadIcon } from '@/components/bs-ui/bs-icons';
 import { useChatPreference } from '@/hooks/use-chat-preference';
 import { useToast } from '@/hooks/use-toast';
+import { BsTooltip } from '@/components/bs-ui/tooltip';
+import { useChatStatus } from '@/hooks/use-frame-mode';
 
 function PureMultimodalInput({
   chatId,
@@ -59,19 +61,28 @@ function PureMultimodalInput({
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const adjustHeight = useCallback(() => {
     if (textareaRef.current) {
-      textareaRef.current.style.height = '44px';
+      textareaRef.current.style.height = '';
     }
   }, []);
 
+  const { status: chatUIStatus } = useChatStatus();
+
   useEffect(() => {
     if (textareaRef.current) {
       adjustHeight();
     }
   }, [adjustHeight]);
 
+  useEffect(() => {
+    if (chatUIStatus === 'hide') {
+      clearAttachmentsAndUploadQueue();
+      setInput('');
+    }
+  }, [chatUIStatus]);
+
   const resetHeight = useCallback(() => {
     if (textareaRef.current) {
-      textareaRef.current.style.height = '44px';
+      textareaRef.current.style.height = '';
     }
   }, []);
 
@@ -92,38 +103,48 @@ function PureMultimodalInput({
   const [uploadQueue, setUploadQueue] = useState<string[]>([]);
 
   const { exec: onBeforeSendMsg } = usePluginLifeCycleChainRunner('onBeforeMessageSend');
+  const { exec: onAfterSendMsg } = usePluginLifeCycleChainRunner('onAfterMessageSend');
 
   const placeholder = useChatPreference()?.placeholder || 'Send a message...';
   const maxCount = useChatPreference()?.acceptAttachmentMaxCount || 5;
   const maxSizeMb = useChatPreference()?.acceptAttachmentMaxSizeMb || 100;
   const tooltip = `上传附件（仅识别文字），最多${maxCount}个，单个文件最大${maxSizeMb}MB`;
 
+  const clearAttachmentsAndUploadQueue = useCallback(() => {
+    setAttachments([]);
+    setUploadQueue([]);
+    if (fileInputRef.current) {
+      fileInputRef.current.value = '';
+    }
+  }, [setAttachments]);
+
   const submitForm = useCallback(() => {
     const finalMsg = onBeforeSendMsg({
       text: input,
     });
 
-    sendMessage(
-      {
-        role: 'user',
-        parts: [
-          ...attachments.map((attachment) => ({
-            type: 'file' as const,
-            url: attachment.url,
-            name: attachment.name,
-            mediaType: attachment.contentType,
-            providerMetadata: {
-              uploadMetadata: attachment,
-            },
-          })),
-          {
-            type: 'text',
-            text: input,
+    const msg = {
+      role: 'user',
+      parts: [
+        ...attachments.map((attachment) => ({
+          type: 'file' as const,
+          url: attachment.url,
+          name: attachment.name,
+          mediaType: attachment.contentType,
+          providerMetadata: {
+            uploadMetadata: attachment,
           },
-        ],
-      },
-      finalMsg.options
-    );
+        })),
+        {
+          type: 'text',
+          text: input,
+        },
+      ],
+    } as ChatMessage;
+
+    sendMessage(msg, finalMsg.options);
+
+    onAfterSendMsg?.(msg);
 
     setAttachments([]);
     resetHeight();
@@ -310,15 +331,12 @@ function PureMultimodalInput({
         )}
         <div className="flex flex-row items-start gap-1 sm:gap-2">
           <PromptInputTextarea
-            className="grow resize-none border-0! border-none! bg-transparent p-0 text-base outline-none ring-0 [-ms-overflow-style:none] [scrollbar-width:none] placeholder:text-[#999] focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 [&::-webkit-scrollbar]:hidden text-[#12111]"
+            className="grow resize-none border-0! border-none! bg-transparent p-0 text-base outline-none ring-0 placeholder:text-[#999] focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 text-[#12111]"
             data-testid="multimodal-input"
-            disableAutoResize={true}
-            maxHeight={200}
-            minHeight={44}
             onChange={handleInput}
             placeholder={placeholder}
             ref={textareaRef}
-            rows={1}
+            rows={3}
             value={input}
           />
         </div>
@@ -328,7 +346,7 @@ function PureMultimodalInput({
             {hasAcceptableFileType ? (
               <AttachmentsButton fileInputRef={fileInputRef} status={status} tooltip={tooltip} />
             ) : null}
-            <ClearBtn setMessages={setMessages} status={status} />
+            <ClearBtn setMessages={setMessages} status={status} chatId={chatId} />
             <DividerIcon />
             {status === 'submitted' || status === 'streaming' ? (
               <StopButton setMessages={setMessages} stop={stop} />
@@ -396,16 +414,18 @@ function PureStopButton({
   setMessages: UseChatHelpers<ChatMessage>['setMessages'];
 }) {
   return (
-    <Button
-      className="cursor-pointer rounded-full bg-[#0265FF] text-primary-foreground transition-colors duration-200 hover:bg-[#0265FF]/90 disabled:bg-[#E5E6EB] disabled:text-white h-[26px] w-[26px] flex items-center justify-center aspect-square p-0 disabled:!opacity-100"
-      onClick={(event: any) => {
-        event.preventDefault();
-        stop();
-        setMessages((messages) => messages);
-      }}
-    >
-      <div className="rounded-[2px] w-[8px] h-[8px] bg-white flex-shrink-0" />
-    </Button>
+    <BsTooltip content="停止生成">
+      <Button
+        className="cursor-pointer rounded-full bg-[#0265FF] text-primary-foreground transition-colors duration-200 hover:bg-[#0265FF]/90 disabled:bg-[#E5E6EB] disabled:text-white h-[26px] w-[26px] flex items-center justify-center aspect-square p-0 disabled:!opacity-100"
+        onClick={(event: any) => {
+          event.preventDefault();
+          stop();
+          setMessages((messages) => messages);
+        }}
+      >
+        <div className="rounded-[2px] w-[8px] h-[8px] bg-white flex-shrink-0" />
+      </Button>
+    </BsTooltip>
   );
 }
 

package/src/components/biz-comp/multi-modal-input/prompt-input.tsx

@@ -14,6 +14,7 @@ import {
 import { Textarea } from '@/components/ui/textarea';
 import { cn } from '@/lib/utils';
 import { StopIcon } from '@/components/bs-ui/bs-icons';
+import { BsTooltip } from '@/components/bs-ui/tooltip';
 
 export type PromptInputProps = HTMLAttributes<HTMLFormElement>;
 
@@ -77,7 +78,7 @@ export const PromptInputTextarea = react.forwardRef<HTMLTextAreaElement, PromptI
             ? 'field-sizing-fixed'
             : resizeOnNewLinesOnly
               ? 'field-sizing-fixed'
-              : 'field-sizing-content max-h-[6lh]',
+              : 'field-sizing-content min-h-[3lh] max-h-[8lh]',
           'bg-transparent dark:bg-transparent',
           'focus-visible:ring-0',
           className
@@ -171,15 +172,17 @@ export const PromptInputSubmit = ({
   let Icon = getIconForStatus(status);
 
   return (
-    <Button
-      className={cn('gap-1.5 rounded-full', className)}
-      size={size}
-      type="submit"
-      variant={variant}
-      {...props}
-    >
-      {children ?? Icon}
-    </Button>
+    <BsTooltip content="发送">
+      <Button
+        className={cn('gap-1.5 rounded-full', className)}
+        size={size}
+        type="submit"
+        variant={variant}
+        {...props}
+      >
+        {children ?? Icon}
+      </Button>
+    </BsTooltip>
   );
 };
 

package/src/components/biz-comp/preview-message-wrapper.tsx

@@ -38,9 +38,9 @@ export const PreviewMessageWrapper = ({
     avatarComInfo?.Component;
   const avatarJsx = Avatar ? <Avatar /> : <BotAvatarAndName name={'AI表单搭建'} />;
 
-  const [isHovered, setIsHovered] = useState(false);
+  // const [isHovered, setIsHovered] = useState(false);
 
-  const showAction = isBot && isHovered && !isLoading;
+  const showAction = isBot && /* isHovered &&*/ !isLoading;
 
   const visibilityCls = showAction ? 'opacity-100' : 'opacity-0';
   const pointerEventsCls = showAction ? 'pointer-events-auto' : 'pointer-events-none';
@@ -77,8 +77,8 @@ export const PreviewMessageWrapper = ({
       className="group/message w-full"
       data-role={role}
       data-testid={`message-${role}`}
-      onMouseEnter={() => setIsHovered(true)}
-      onMouseLeave={() => setIsHovered(false)}
+      // onMouseEnter={() => setIsHovered(true)}
+      // onMouseLeave={() => setIsHovered(false)}
     >
       <div
         className={cn('flex w-full justify-start flex-col gap-2.5', {

package/src/components/biz-comp/preview-message.tsx

@@ -20,7 +20,7 @@ import { WarningMessage } from '../bs-ui/warning-msg';
 import { GenerateAnimation } from '../bs-ui/generate-animation';
 import { AttachmentPartGroup } from '../bs-ui/attachment-part-group';
 import { AttachmentPart } from '../bs-ui/attachment-part';
-import { useChatStatus } from '@/hooks/use-frame-mode';
+import { useChatStatus, useFakeGlobalLoadingMessage } from '@/hooks/use-frame-mode';
 import { useEvtBus } from '@/hooks/use-evt-bus';
 
 const PurePreviewMessage = ({
@@ -73,6 +73,7 @@ const PurePreviewMessage = ({
   const evtBus = useEvtBus();
 
   const { exec: onBeforeSendMsg } = usePluginLifeCycleChainRunner('onBeforeMessageSend');
+  const { exec: onAfterSendMsg } = usePluginLifeCycleChainRunner('onAfterMessageSend');
 
   const handleCopy = () => {
     const textParts = message.parts
@@ -97,6 +98,7 @@ const PurePreviewMessage = ({
       messageId: message.id,
       ...options,
     });
+    onAfterSendMsg(message);
   };
 
   if (chatStatus.isHide) {

package/src/components/biz-comp/suggestions.tsx

@@ -31,12 +31,14 @@ export const SuggestionCard = ({
 const defaultSuggestions: ISuggestion[] = [
   {
     icon: <UserIcon />,
+    iconCode: '&#xe814;',
     title: '供应商管理，子表单为产品信息',
     description:
       '用于记录和管理企业供应商的基本信息、资质认证、合作状态等，便于采购部门进行供应商评估和选择。',
   },
   {
     icon: <BagIcon />,
+    iconCode: '&#xe806;',
     title: '搭建订单表',
     description:
       '子表单为商品列表（包含：商品ID、商品名称、商品供应商为关联数据字段、商品原价、商品销售价、商品型号为关联查询字段）',
@@ -48,6 +50,7 @@ const defaultSuggestions: ISuggestion[] = [
   // },
   {
     icon: <BuildingIcon />,
+    iconCode: '&#xe81d;',
     title: '创建合同表关联供应商信息管理表',
     description:
       '创建合同表用于记录与供应商签订的合同信息，并与供应商信息管理表进行关联，方便查询和管理合同相关的供应商信息。',
@@ -61,13 +64,14 @@ export const Suggestions = ({
 }: {
   items?: ISuggestion[];
   iconColor?: string;
-  onSelect?: (title: string) => void;
+  onSelect?: (title: string, iconCode?: string) => void;
 }) => {
   return (
     <>
       {items.map((item, index) => (
         <BsCard
           icon={<div style={{ color: iconColor }}>{item.icon}</div>}
+          iconCode={item.iconCode}
           index={index + 1}
           key={index}
           title={item.title}

package/src/components/bs-ui/attachments-previewer.tsx

@@ -238,7 +238,10 @@ export const AttachmentsPreviewer = ({
           return (
             <div
               key={attachment.id}
-              className={cn('relative shrink-0 cursor-pointer group', transCls)}
+              className={cn(
+                'relative shrink-0 cursor-pointer group border border-[#e0e0e0] rounded-[10px]',
+                transCls
+              )}
               style={{ width: imageSize, height: imageSize }}
               onClick={() => onImageClick?.(attachment, index)}
             >

package/src/components/bs-ui/base-button.tsx

@@ -5,10 +5,11 @@ import { transCls } from '@/const/ui';
 
 export interface BaseButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   icon?: ReactNode;
+  hoverTextCls?: string;
 }
 
 export const BaseButton = forwardRef<HTMLButtonElement, BaseButtonProps>(
-  ({ className, children, icon, type, ...rest }, ref) => {
+  ({ className, children, hoverTextCls, icon, type, ...rest }, ref) => {
     return (
       <button
         ref={ref}
@@ -17,8 +18,12 @@ export const BaseButton = forwardRef<HTMLButtonElement, BaseButtonProps>(
           'group inline-flex items-center gap-[6px] px-[16px] rounded-[4px] h-[34px]',
           'border border-[#E0E0E0] bg-transparent',
           'text-[14px] font-[400] leading-[normal] text-[#030303]',
-          'hover:bg-[#EFF0F6] hover:text-[#0265FF] hover:border-transparent',
+          'hover:bg-[#EFF0F6] hover:border-transparent',
           'cursor-pointer',
+          {
+            'hover:text-[#0265FF]': !hoverTextCls,
+            [`hover:${hoverTextCls}`]: hoverTextCls,
+          },
           transCls,
           className
         )}

package/src/components/bs-ui/bs-icons.tsx

@@ -1065,3 +1065,32 @@ export const DashLayoutContainerIcon = () => (
     />
   </svg>
 );
+
+export const DataViewIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="currentColor"
+  >
+    <path d="M16.25 1.25C16.9404 1.25 17.5 1.80964 17.5 2.5V5C17.5 5.69036 16.9404 6.25 16.25 6.25H3.75C3.05964 6.25 2.5 5.69036 2.5 5V2.5C2.5 1.80964 3.05964 1.25 3.75 1.25H16.25ZM6.25 2.5C5.55964 2.5 5 3.05964 5 3.75C5 4.44036 5.55964 5 6.25 5C6.94036 5 7.5 4.44036 7.5 3.75C7.5 3.05964 6.94036 2.5 6.25 2.5Z" />
+    <path d="M16.25 7.5C16.9404 7.5 17.5 8.05964 17.5 8.75V11.25C17.5 11.9404 16.9404 12.5 16.25 12.5H3.75C3.05964 12.5 2.5 11.9404 2.5 11.25V8.75C2.5 8.05964 3.05964 7.5 3.75 7.5H16.25ZM6.25 8.75C5.55964 8.75 5 9.30964 5 10C5 10.6904 5.55964 11.25 6.25 11.25C6.94036 11.25 7.5 10.6904 7.5 10C7.5 9.30964 6.94036 8.75 6.25 8.75Z" />
+    <path d="M16.25 13.75C16.9404 13.75 17.5 14.3096 17.5 15V17.5C17.5 18.1904 16.9404 18.75 16.25 18.75H3.75C3.05964 18.75 2.5 18.1904 2.5 17.5V15C2.5 14.3096 3.05964 13.75 3.75 13.75H16.25ZM6.25 15C5.55964 15 5 15.5596 5 16.25C5 16.9404 5.55964 17.5 6.25 17.5C6.94036 17.5 7.5 16.9404 7.5 16.25C7.5 15.5596 6.94036 15 6.25 15Z" />
+  </svg>
+);
+
+export const DataReportIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="currentColor"
+  >
+    <path
+      d="M1.25 18.2377V15.9502H18.75V18.2377H1.25ZM16.4075 5.4427L16.4062 6.6677L16.4075 6.66895V14.7227L16.4062 14.7214L16.4075 14.7239H12.8912V5.4427H16.4075ZM11.7212 1.7627L11.72 3.1177H11.7212V14.7239H9.4875V14.7227H8.205V1.7627H11.7212ZM7.035 7.76644L7.03375 9.08395L7.035 9.0852V14.7239L3.52 14.7227V7.76644H7.035Z"
+      // fill=""
+    />
+  </svg>
+);

package/src/components/bs-ui/card.tsx

@@ -7,10 +7,11 @@ export interface CardProps {
   desc?: string;
   index?: number;
   icon?: ReactNode;
-  onClick?: (title: string) => void;
+  iconCode?: string;
+  onClick?: (title: string, iconCode?: string) => void;
 }
 
-export const Card = ({ title, desc, index, icon, onClick }: CardProps) => {
+export const Card = ({ title, desc, index, icon, onClick, iconCode }: CardProps) => {
   return (
     <div
       className={cn(
@@ -20,7 +21,7 @@ export const Card = ({ title, desc, index, icon, onClick }: CardProps) => {
         }
       )}
       onClick={() => {
-        onClick?.(title);
+        onClick?.(title, iconCode);
       }}
     >
       <div className="px-2.5 flex items-center gap-1.5 rounded-[4px] h-[34px]  bg-white">