@baishuyun/chat-sdk 0.0.8 → 0.0.9

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

@@ -916,3 +916,98 @@ export const CheckerInBoxIcon = () => (
     <path d="M9.5067 0.236399C9.33081 0.075254 9.09814 -0.00947067 8.85981 0.000842334C8.62149 0.0111553 8.39701 0.115663 8.2357 0.291399L3.4847 5.4714L1.6307 2.8764L1.5597 2.7884C1.40419 2.62083 1.19075 2.51872 0.962705 2.5028C0.734658 2.48687 0.509095 2.55832 0.331809 2.70264C0.154524 2.84697 0.0388021 3.05335 0.00813691 3.27988C-0.0225283 3.50642 0.0341613 3.73614 0.166697 3.9224L2.6667 7.4224L2.7427 7.5154C2.8275 7.60576 2.93004 7.67764 3.04391 7.72654C3.15778 7.77543 3.28052 7.80028 3.40444 7.79952C3.52836 7.79877 3.65079 7.77244 3.76406 7.72217C3.87733 7.6719 3.979 7.59879 4.0627 7.5074L9.5627 1.5074L9.6387 1.4124C9.76255 1.23353 9.81742 1.01586 9.79315 0.799654C9.76888 0.58345 9.66712 0.383356 9.5067 0.236399Z" />
   </svg>
 );
+
+export const StatsIcon = ({ size }: { size?: number }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+  >
+    <path
+      d="M20.2789 20.7891H3.72266C3.17188 20.7891 2.72656 20.3438 2.72656 19.793C2.72656 19.2422 3.17188 18.7969 3.72266 18.7969H20.2789C20.8297 18.7969 21.275 19.2422 21.275 19.793C21.275 20.3438 20.8297 20.7891 20.2789 20.7891Z"
+      fill="url(#paint0_linear_21740_6067)"
+    />
+    <path
+      d="M5.52148 17.6605H4.16211C3.72148 17.6605 3.36523 17.3043 3.36523 16.8637V12.9473C3.36523 12.5066 3.72148 12.1504 4.16211 12.1504H5.52148C5.96211 12.1504 6.31836 12.5066 6.31836 12.9473V16.8637C6.31836 17.302 5.95977 17.6605 5.52148 17.6605Z"
+      fill="url(#paint1_linear_21740_6067)"
+    />
+    <path
+      d="M10.2816 17.6602H8.94336C8.49805 17.6602 8.13477 17.2992 8.13477 16.8516V6.82969C8.13477 6.38437 8.4957 6.02109 8.94336 6.02109H10.2816C10.727 6.02109 11.0902 6.38203 11.0902 6.82969V16.8516C11.0902 17.2969 10.727 17.6602 10.2816 17.6602ZM15.0676 17.6602H13.7035C13.2652 17.6602 12.909 17.3039 12.909 16.8656V10.0031C12.909 9.56484 13.2652 9.20859 13.7035 9.20859H15.0676C15.5059 9.20859 15.8621 9.56484 15.8621 10.0031V16.8633C15.8621 17.3039 15.5059 17.6602 15.0676 17.6602ZM19.8371 17.6602H18.4824C18.0418 17.6602 17.6832 17.3016 17.6832 16.8609V4.01016C17.6832 3.56953 18.0418 3.21094 18.4824 3.21094H19.8371C20.2777 3.21094 20.6363 3.56953 20.6363 4.01016V16.8609C20.634 17.3016 20.2777 17.6602 19.8371 17.6602Z"
+      fill="url(#paint2_linear_21740_6067)"
+    />
+    <defs>
+      <linearGradient
+        id="paint0_linear_21740_6067"
+        x1="12.0008"
+        y1="18.7969"
+        x2="12.0008"
+        y2="20.7891"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stop-color="#0265FF" />
+        <stop offset="1" stop-color="#A6FFFF" />
+      </linearGradient>
+      <linearGradient
+        id="paint1_linear_21740_6067"
+        x1="4.8418"
+        y1="12.1504"
+        x2="4.8418"
+        y2="17.6605"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stop-color="#0265FF" />
+        <stop offset="1" stop-color="#A6FFFF" />
+      </linearGradient>
+      <linearGradient
+        id="paint2_linear_21740_6067"
+        x1="14.3855"
+        y1="3.21094"
+        x2="14.3855"
+        y2="17.6602"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stop-color="#0265FF" />
+        <stop offset="1" stop-color="#A6FFFF" />
+      </linearGradient>
+    </defs>
+  </svg>
+);
+
+export const DataTableIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="currentColor"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M12.6671 1.00011C12.9743 0.99704 13.2792 1.05583 13.5636 1.17199C13.848 1.28815 14.1071 1.45962 14.3243 1.67687C14.5414 1.89404 14.7131 2.15236 14.8292 2.43664C14.9454 2.72105 15.0032 3.02593 15.0001 3.33312V12.6671C15.0032 12.9743 14.9453 13.2792 14.8292 13.5636C14.7131 13.8478 14.5414 14.1062 14.3243 14.3234C14.1071 14.5406 13.848 14.7131 13.5636 14.8292C13.2792 14.9453 12.9742 15.0032 12.6671 15.0001H3.33312C3.02597 15.0032 2.72101 14.9453 2.43664 14.8292C2.15225 14.7131 1.89409 14.5406 1.67687 14.3234C1.45971 14.1062 1.28811 13.8479 1.17199 13.5636C1.05583 13.2792 0.99704 12.9743 1.00011 12.6671V3.33312C0.997054 3.02593 1.05585 2.72105 1.17199 2.43664C1.28813 2.15232 1.45971 1.89405 1.67687 1.67687C1.89403 1.45972 2.15235 1.28814 2.43664 1.17199C2.72101 1.05586 3.02597 0.997071 3.33312 1.00011H12.6671ZM2.00011 10.5001V12.6153C2.00018 13.4001 2.60015 13.9999 3.38488 14.0001H5.00011V10.5001H2.00011ZM6.00011 10.5001V14.0001H10.0001V10.5001H6.00011ZM11.0001 10.5001V14.0001H12.6153C13.4003 14.0001 14.0001 13.4003 14.0001 12.6153V10.5001H11.0001ZM2.00011 9.50011H5.00011V6.50011H2.00011V9.50011ZM6.00011 9.50011H10.0001V6.50011H6.00011V9.50011ZM11.0001 9.50011H14.0001V6.50011H11.0001V9.50011ZM3.38488 2.00011C2.60022 2.00035 2.00029 2.6002 2.00011 3.38488V5.50011H14.0001V3.38488C13.9999 2.60005 13.4002 2.00012 12.6153 2.00011H3.38488Z"
+    />
+  </svg>
+);
+
+export const DefaultFormIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+    <path
+      d="M9.15595 1.42188V4.08854C9.15595 4.56004 9.34325 5.01222 9.67664 5.34562C10.01 5.67902 10.4622 5.86632 10.9337 5.86632H13.6004V13.8663C13.6004 14.1021 13.5067 14.3282 13.34 14.4949C13.1733 14.6616 12.9472 14.7552 12.7115 14.7552H3.28928C3.05353 14.7552 2.82744 14.6616 2.66074 14.4949C2.49404 14.3282 2.40039 14.1021 2.40039 13.8663V2.31076C2.40039 2.07502 2.49404 1.84892 2.66074 1.68222C2.82744 1.51553 3.05353 1.42188 3.28928 1.42188H9.15595ZM5.5115 8.53299C5.39363 8.53299 5.28058 8.57981 5.19723 8.66316C5.11388 8.74651 5.06706 8.85956 5.06706 8.97743C5.06706 9.0953 5.11388 9.20835 5.19723 9.2917C5.28058 9.37505 5.39363 9.42187 5.5115 9.42187H10.4893C10.6072 9.42187 10.7202 9.37505 10.8035 9.2917C10.8869 9.20835 10.9337 9.0953 10.9337 8.97743C10.9337 8.85956 10.8869 8.74651 10.8035 8.66316C10.7202 8.57981 10.6072 8.53299 10.4893 8.53299H5.5115ZM5.5115 11.1997C5.39363 11.1997 5.28058 11.2465 5.19723 11.3298C5.11388 11.4132 5.06706 11.5262 5.06706 11.6441C5.06706 11.762 5.11388 11.875 5.19723 11.9584C5.28058 12.0417 5.39363 12.0885 5.5115 12.0885H10.4893C10.6072 12.0885 10.7202 12.0417 10.8035 11.9584C10.8869 11.875 10.9337 11.762 10.9337 11.6441C10.9337 11.5262 10.8869 11.4132 10.8035 11.3298C10.7202 11.2465 10.6072 11.1997 10.4893 11.1997H5.5115ZM10.0448 1.42188L13.6004 4.97743H10.9337C10.698 4.97743 10.4719 4.88378 10.3052 4.71708C10.1385 4.55038 10.0448 4.32429 10.0448 4.08854V1.42188Z"
+      fill="#0265FF"
+    />
+  </svg>
+);
+
+export const FormulasIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="currentColor"
+  >
+    <path d="M13.6028 7.93734C13.6699 7.99362 13.7252 8.06255 13.7656 8.14022C13.8061 8.21788 13.8308 8.30275 13.8385 8.38998C13.8461 8.47721 13.8365 8.56509 13.8101 8.64859C13.7838 8.7321 13.7413 8.80961 13.685 8.87668L11.8059 11.1158L13.0219 13.2218C13.0663 13.2976 13.0954 13.3815 13.1073 13.4686C13.1192 13.5557 13.1137 13.6444 13.0913 13.7294C13.0688 13.8144 13.0297 13.8941 12.9763 13.9639C12.9229 14.0337 12.8562 14.0923 12.7801 14.1363C12.704 14.1803 12.6199 14.2087 12.5327 14.2201C12.4455 14.2314 12.3569 14.2254 12.2721 14.2023C12.1872 14.1793 12.1078 14.1397 12.0383 14.0858C11.9688 14.032 11.9107 13.9649 11.8672 13.8885L10.8939 12.2029L9.39966 13.9836C9.34386 14.0521 9.275 14.1089 9.19706 14.1506C9.11913 14.1923 9.03368 14.2181 8.94569 14.2264C8.8577 14.2348 8.76893 14.2256 8.68453 14.1993C8.60013 14.1731 8.5218 14.1303 8.45409 14.0735C8.38638 14.0167 8.33064 13.947 8.29011 13.8684C8.24959 13.7899 8.22509 13.704 8.21804 13.6159C8.21099 13.5278 8.22153 13.4392 8.24905 13.3552C8.27656 13.2712 8.32051 13.1935 8.37832 13.1267L10.1843 10.974L8.97832 8.88468C8.93386 8.80883 8.90483 8.72494 8.89292 8.63783C8.88101 8.55072 8.88645 8.46211 8.90892 8.37711C8.9314 8.29211 8.97046 8.2124 9.02386 8.14256C9.07727 8.07272 9.14396 8.01413 9.2201 7.97017C9.29624 7.92621 9.38033 7.89774 9.46751 7.88641C9.5547 7.87508 9.64327 7.8811 9.72812 7.90414C9.81297 7.92717 9.89242 7.96676 9.96191 8.02063C10.0314 8.0745 10.0895 8.14158 10.133 8.21801L11.0965 9.8869L12.6634 8.01957C12.7197 7.95248 12.7886 7.89714 12.8663 7.8567C12.944 7.81626 13.0288 7.79151 13.1161 7.78388C13.2033 7.77624 13.2912 7.78587 13.3747 7.8122C13.4582 7.83853 13.5357 7.88106 13.6028 7.93734ZM9.55566 1.77734C9.72919 1.77718 9.89595 1.84468 10.0205 1.96552C10.1451 2.08635 10.2176 2.25099 10.2227 2.42445C10.2278 2.59791 10.165 2.76652 10.0478 2.89445C9.93053 3.02238 9.76801 3.09955 9.59477 3.10957L9.55566 3.11068H9.25477C8.77582 3.11068 8.31278 3.28256 7.94984 3.59506C7.58689 3.90757 7.34814 4.33994 7.27699 4.81357L7.26899 4.87246L7.24032 5.11068H8.66677C8.72513 5.11068 8.78293 5.12217 8.83685 5.14451C8.89077 5.16684 8.93977 5.19958 8.98104 5.24085C9.02231 5.28212 9.05504 5.33112 9.07738 5.38504C9.09972 5.43896 9.11121 5.49676 9.11121 5.55512V5.99957C9.11121 6.11744 9.06439 6.23049 8.98104 6.31384C8.89769 6.39719 8.78464 6.44401 8.66677 6.44401H7.08032L6.49943 11.2856C6.40386 12.0824 6.02403 12.818 5.4297 13.3572C4.83536 13.8965 4.06642 14.2032 3.2641 14.2211L3.18988 14.2218H2.88899C2.71545 14.222 2.54869 14.1545 2.42414 14.0336C2.29959 13.9128 2.22706 13.7481 2.22197 13.5747C2.21687 13.4012 2.27962 13.2326 2.39687 13.1047C2.51412 12.9768 2.67663 12.8996 2.84988 12.8896L2.88899 12.8885H3.18988C3.66882 12.8884 4.13186 12.7166 4.49481 12.4041C4.85775 12.0916 5.09651 11.6592 5.16766 11.1856L5.17566 11.1267L5.73721 6.44401H4.22232C4.10445 6.44401 3.9914 6.39719 3.90805 6.31384C3.8247 6.23049 3.77788 6.11744 3.77788 5.99957V5.55512C3.77788 5.49676 3.78937 5.43896 3.81171 5.38504C3.83404 5.33112 3.86678 5.28212 3.90805 5.24085C3.94932 5.19958 3.99832 5.16684 4.05224 5.14451C4.10616 5.12217 4.16396 5.11068 4.22232 5.11068H5.89721L5.94521 4.71357C6.04078 3.91675 6.42061 3.18117 7.01495 2.6419C7.60928 2.10264 8.37822 1.79589 9.18054 1.77801L9.25477 1.77734H9.55566Z" />
+  </svg>
+);

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

@@ -0,0 +1,23 @@
+import { cn } from '@/lib/utils';
+import { ReactNode } from 'react';
+
+export interface CardFieldProps {
+  label: string;
+  children?: ReactNode;
+  className?: string;
+}
+
+export const CardField = ({ label, children, className }: CardFieldProps) => {
+  return (
+    <div className={cn('flex gap-2 items-start w-full', className)}>
+      <div className="w-[100px] shrink-0 text-[#666] text-sm leading-normal truncate">{label}</div>
+      <div className="flex-1 min-w-0 text-sm leading-normal whitespace-pre-wrap break-words">
+        {children ?? <span className="text-[#666]">无</span>}
+      </div>
+    </div>
+  );
+};
+
+export const CardFieldsWrapper = ({ children }: { children: ReactNode }) => {
+  return <div className="flex flex-col gap-[10px] w-full">{children}</div>;
+};

package/src/components/bs-ui/chat-area-header.tsx

@@ -9,6 +9,9 @@ export interface ChatAreaHeaderProps {
   onDockClick?: () => void;
   onCloseClick?: () => void;
   avatar?: React.ReactNode;
+  draggable?: boolean;
+  isDragging?: boolean;
+  onDragStart?: (e: React.MouseEvent) => void;
 }
 
 export const ChatAreaHeader = ({
@@ -16,18 +19,24 @@ export const ChatAreaHeader = ({
   width,
   onDockClick,
   onCloseClick,
+  draggable,
+  isDragging,
+  onDragStart,
 }: ChatAreaHeaderProps) => {
   return (
     <div
       className={cn('flex items-center justify-between', 'px-4', 'h-[52px] min-w-[200px]', {
         'w-full': !width,
         [`w-[${width}px]`]: width,
+        'cursor-grab': draggable && !isDragging,
+        'cursor-grabbing': isDragging,
       })}
       style={{
         backgroundImage: ChatHeaderBgImgUrl,
         backgroundSize: 'cover',
         backgroundRepeat: 'no-repeat',
       }}
+      onMouseDown={draggable ? onDragStart : undefined}
     >
       {avatar}
 

package/src/components/bs-ui/collapsible-txt-msg.tsx

@@ -1,7 +1,7 @@
-import { ReactNode, useState } from "react";
-import { cn } from "@/lib/utils";
-import { transCls } from "@/const/ui";
-import { AnalysisIcon, ChevronIcon } from "./bs-icons";
+import { ReactNode, useState } from 'react';
+import { cn } from '@/lib/utils';
+import { transCls } from '@/const/ui';
+import { AnalysisIcon, ChevronIcon } from './bs-icons';
 
 export interface CollapsibleTxtMsgProps {
   title: string;
@@ -11,7 +11,6 @@ export interface CollapsibleTxtMsgProps {
   children?: ReactNode;
 }
 
-
 export const CollapsibleTxtMsg = ({
   title,
   content,
@@ -23,9 +22,12 @@ export const CollapsibleTxtMsg = ({
 
   return (
     <div className="bg-[#fafafa] border border-[#e0e0e0] border-solid flex flex-col gap-2.5 p-2.5 rounded-[10px] w-full">
-      <div className="flex items-center justify-between w-full cursor-pointer" onClick={() => {
-         setIsOpen(!isOpen)
-      }}>
+      <div
+        className="flex items-center justify-between w-full cursor-pointer"
+        onClick={() => {
+          setIsOpen(!isOpen);
+        }}
+      >
         <div className="flex gap-1.5 items-center">
           <div className="w-4 h-4 shrink-0">{icon || <AnalysisIcon />}</div>
           <p className="text-[#666] text-[14px] leading-normal">{title}</p>
@@ -33,18 +35,14 @@ export const CollapsibleTxtMsg = ({
         <button
           onClick={() => setIsOpen(!isOpen)}
           className={cn(
-            "flex items-center justify-center w-5 h-5 rounded cursor-pointer",
+            'flex items-center justify-center w-5 h-5 rounded-[4px] cursor-pointer hover:bg-[#EFF0F6]',
             transCls
           )}
         >
           <ChevronIcon isOpen={isOpen} />
         </button>
       </div>
-      {isOpen && (
-        <div className="text-[#030303] text-[14px]">
-          {content || children}
-        </div>
-      )}
+      {isOpen && <div className="text-[#030303] text-[14px] word-wrap">{content || children}</div>}
     </div>
   );
-};
+};

package/src/components/bs-ui/fields-generating-indicator.tsx

@@ -1,12 +1,12 @@
 import { BorderColorAnimation } from './border-color-animation';
 import { MagicIcon } from './bs-icons';
 
-export const FieldsGeneratingIndicator = () => {
+export const FieldsGeneratingIndicator = ({ children }: { children?: React.ReactNode }) => {
   return (
     <BorderColorAnimation borderRadius={100} width={136} height={34} borderWidth={1}>
       <div className="flex items-center gap-[6px] h-[31px] ml-[16px]">
         <MagicIcon />
-        <span className="text-[14px] text-[#0265FF]">字段生成中</span>
+        <span className="text-[14px] text-[#0265FF]">{children || '字段生成中'}</span>
         <div className="flex gap-[2px] flex-shrink-0 relative -left-[4px] top-[3px]">
           <div
             className="w-[2px] h-[2px] rounded-full bg-[#0265FF] flex-shrink-0"

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

@@ -15,6 +15,7 @@ export interface FieldsPreviewerProps extends PreviewerHeaderProps {
 
   // generating fields
   streaming?: boolean;
+  streamingText?: string;
 
   empty?: boolean;
 
@@ -24,6 +25,8 @@ export interface FieldsPreviewerProps extends PreviewerHeaderProps {
 
   containerStyle?: string;
 
+  fullContent?: boolean;
+
   // children means the content inside the previewer, not the right side components
   children?: React.ReactNode;
 }
@@ -56,6 +59,7 @@ export const FieldsPreviewer = forwardRef<HTMLDivElement, FieldsPreviewerProps>(
     rightSpaceRef,
     rightElement,
     streaming,
+    streamingText,
     onBackClick,
     dialogContainer,
     variant = 'fields-previewer',
@@ -63,6 +67,7 @@ export const FieldsPreviewer = forwardRef<HTMLDivElement, FieldsPreviewerProps>(
     onCancel,
     style,
     confirmContent,
+    fullContent,
     confirmTitle,
     containerStyle,
   }: FieldsPreviewerProps) => {
@@ -87,6 +92,15 @@ export const FieldsPreviewer = forwardRef<HTMLDivElement, FieldsPreviewerProps>(
       'rounded-[4px] bg-white': isData,
     });
 
+    const fullContentStyle = fullContent
+      ? {
+          width: '100%',
+          height: '100%',
+          padding: 0,
+          margin: 0,
+        }
+      : {};
+
     const { shadowContainer } = useShadow({
       id: 'dialog-container',
       rootEl: dialogContainer,
@@ -116,18 +130,23 @@ export const FieldsPreviewer = forwardRef<HTMLDivElement, FieldsPreviewerProps>(
           confirmTitle={confirmTitle}
           confirmContent={confirmContent}
         />
-        <div className={contentCls}>{empty && isFields ? <PlaceholderDashedBox /> : children}</div>
+        <div className={contentCls} style={fullContentStyle}>
+          {empty && isFields ? <PlaceholderDashedBox /> : children}
+        </div>
         {streaming && (
           // abs center
           <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
-            <FieldsGeneratingIndicator />
+            <FieldsGeneratingIndicator>{streamingText}</FieldsGeneratingIndicator>
           </div>
         )}
       </>
     );
 
     const content = isFields ? (
-      <BorderColorAnimation width={pr ? `calc(100% - ${pr}px)` : '100%'}>
+      <BorderColorAnimation
+        width={pr ? `calc(100% - ${pr}px)` : '100%'}
+        style={{ overflow: 'hidden' }}
+      >
         {contentJsx}
       </BorderColorAnimation>
     ) : (

package/src/components/bs-ui/formula-tag.tsx

@@ -0,0 +1,32 @@
+import { cn } from '@/lib/utils';
+import { type FormulaOp, FORMULA_OP_LABEL } from '@baishuyun/types';
+
+/** 统计方式 → 背景色 */
+const FORMULA_OP_COLOR: Record<FormulaOp, string> = {
+  sum: '#3767F1',
+  max: '#F06648',
+  min: '#4ACC8C',
+  average: '#4AC0EC',
+  count: '#9362CE',
+  countDistinct: '#F168B6',
+};
+
+export interface FormulaTagProps {
+  /** 统计方式 */
+  type: FormulaOp;
+  className?: string;
+}
+
+export const FormulaTag = ({ type, className }: FormulaTagProps) => {
+  return (
+    <span
+      className={cn(
+        'inline-flex items-center justify-center rounded-[100px] px-[6px] text-[14px] leading-[20px] text-white',
+        className
+      )}
+      style={{ backgroundColor: FORMULA_OP_COLOR[type] }}
+    >
+      {FORMULA_OP_LABEL[type]}
+    </span>
+  );
+};

package/src/components/bs-ui/split-line.tsx

@@ -0,0 +1,9 @@
+import { cn } from '@/lib/utils';
+
+export interface SplitLineProps {
+  className?: string;
+}
+
+export const SplitLine = ({ className }: SplitLineProps) => {
+  return <div className={cn('h-[1px] w-full bg-[#E0E0E0]', className)} />;
+};

package/src/components/web-comp/fields-previewer-web-component.ts

@@ -251,7 +251,7 @@ export class FieldsPreviewerWebComponent extends HTMLElement {
 }
 
 // Register the web component
-export function registerFieldsPreviewerWebComponent(tagName = 'fields-previewer-container') {
+function registerFieldsPreviewerWebComponent(tagName = 'previewer-container') {
   if (!customElements.get(tagName)) {
     customElements.define(tagName, FieldsPreviewerWebComponent);
   }

package/src/hooks/use-chat-preference.ts

@@ -0,0 +1,9 @@
+import { ChatPreference, IChatSDK } from '@baishuyun/types';
+import { usePluginLifeCycleChainRunner } from './use-plugin-life-cycle-chain-runner';
+
+export const useChatPreference = (client?: IChatSDK) => {
+  const { exec } = usePluginLifeCycleChainRunner('onBeforeChatRender');
+  const preference = exec(client) as ChatPreference;
+
+  return preference;
+};

package/src/hooks/use-draggable.ts

@@ -0,0 +1,154 @@
+import { useState, useRef, useCallback, useEffect, useMemo } from 'react';
+
+export interface Position {
+  bottom: number;
+  right: number;
+}
+
+export interface UseDraggableOptions {
+  /** 是否启用拖拽 */
+  enabled?: boolean;
+  /** 初始位置 */
+  initialPosition?: Position;
+  /** 位置变化回调 */
+  onPositionChange?: (position: Position) => void;
+}
+
+export interface UseDraggableReturn {
+  /** 当前位置 */
+  position: Position;
+  /** 是否正在拖拽 */
+  isDragging: boolean;
+  /** 拖拽开始处理函数，绑定到拖拽句柄的 onMouseDown */
+  handleDragStart: (e: React.MouseEvent) => void;
+  /** 重置位置到初始值 */
+  resetPosition: () => void;
+}
+
+const DEFAULT_POSITION: Position = { bottom: 10, right: 10 };
+
+export function useDraggable(options: UseDraggableOptions = {}): UseDraggableReturn {
+  const { enabled = true, initialPosition = DEFAULT_POSITION, onPositionChange } = options;
+
+  // 稳定化 initialPosition，避免对象引用变化导致无限循环
+  const stableInitialPosition = useMemo(
+    () => initialPosition,
+    [initialPosition.bottom, initialPosition.right]
+  );
+
+  const [position, setPosition] = useState<Position>(stableInitialPosition);
+  const [isDragging, setIsDragging] = useState(false);
+
+  // 使用 ref 存储回调，避免依赖变化
+  const onPositionChangeRef = useRef(onPositionChange);
+  onPositionChangeRef.current = onPositionChange;
+
+  // 使用 ref 存储拖拽状态，避免闭包问题
+  const dragState = useRef({
+    isDragging: false,
+    startX: 0,
+    startY: 0,
+    startBottom: 0,
+    startRight: 0,
+  });
+
+  // 用于 requestAnimationFrame 节流
+  const rafId = useRef<number | null>(null);
+
+  // 重置位置 - 使用稳定的引用避免无限循环
+  const resetPosition = useCallback(() => {
+    setPosition(stableInitialPosition);
+    onPositionChangeRef.current?.(stableInitialPosition);
+  }, [stableInitialPosition]);
+
+  // 开始拖拽
+  const handleDragStart = useCallback(
+    (e: React.MouseEvent) => {
+      if (!enabled) return;
+
+      // 阻止默认行为和文本选择
+      e.preventDefault();
+      e.stopPropagation();
+
+      dragState.current = {
+        isDragging: true,
+        startX: e.clientX,
+        startY: e.clientY,
+        startBottom: position.bottom,
+        startRight: position.right,
+      };
+
+      setIsDragging(true);
+
+      // 禁用文本选择
+      document.body.style.userSelect = 'none';
+      document.body.style.cursor = 'grabbing';
+
+      const handleMouseMove = (moveEvent: MouseEvent) => {
+        if (!dragState.current.isDragging) return;
+
+        // 使用 requestAnimationFrame 优化性能
+        if (rafId.current !== null) {
+          cancelAnimationFrame(rafId.current);
+        }
+
+        rafId.current = requestAnimationFrame(() => {
+          const deltaX = moveEvent.clientX - dragState.current.startX;
+          const deltaY = moveEvent.clientY - dragState.current.startY;
+
+          const newPosition = {
+            // 向右移动时 deltaX > 0，right 应该减小
+            right: Math.max(10, dragState.current.startRight - deltaX),
+            // 向下移动时 deltaY > 0，bottom 应该减小
+            // bottom: Math.max(0, dragState.current.startBottom - deltaY),
+            bottom: Math.min(dragState.current.startBottom - deltaY, 10),
+          };
+
+          setPosition(newPosition);
+          onPositionChangeRef.current?.(newPosition);
+        });
+      };
+
+      const handleMouseUp = () => {
+        dragState.current.isDragging = false;
+        setIsDragging(false);
+
+        // 恢复文本选择和光标
+        document.body.style.userSelect = '';
+        document.body.style.cursor = '';
+
+        // 清理 RAF
+        if (rafId.current !== null) {
+          cancelAnimationFrame(rafId.current);
+          rafId.current = null;
+        }
+
+        document.removeEventListener('mousemove', handleMouseMove);
+        document.removeEventListener('mouseup', handleMouseUp);
+      };
+
+      document.addEventListener('mousemove', handleMouseMove);
+      document.addEventListener('mouseup', handleMouseUp);
+    },
+    [enabled, position]
+  );
+
+  // 清理 effect
+  useEffect(() => {
+    return () => {
+      if (rafId.current !== null) {
+        cancelAnimationFrame(rafId.current);
+      }
+      // 确保清理样式
+      document.body.style.userSelect = '';
+      document.body.style.cursor = '';
+    };
+  }, []);
+
+  return {
+    position,
+    isDragging,
+    handleDragStart,
+    resetPosition,
+  };
+}

package/src/hooks/use-msg-status-broadcast.ts

@@ -0,0 +1,10 @@
+import { ChatStatus } from 'ai';
+import { useEvtBus } from './use-evt-bus';
+import { useEffect } from 'react';
+
+export const useMsgStatusBroadcast = (id: string, status: ChatStatus) => {
+  const evtBus = useEvtBus();
+  useEffect(() => {
+    evtBus.emit<'chat-msg-status-change'>('chat-msg-status-change', { messageId: id, status });
+  }, [id, status]);
+};

package/src/index.tsx

@@ -3,8 +3,6 @@ export { ChatSDK } from './sdk.impl';
 export * from './plugins/mcp-form-builder-plugin';
 export * from './plugins/general-model-form-builder-plugin';
 export * from './plugins/form-filling-plugin';
+export * from './plugins/report-query-plugin';
 
-export {
-  FieldsPreviewerWebComponent,
-  registerFieldsPreviewerWebComponent,
-} from './components/web-comp/fields-previewer-web-component';
+export { FieldsPreviewerWebComponent } from './components/web-comp/fields-previewer-web-component';

package/src/lib/utils.ts

@@ -2,6 +2,7 @@ import { clsx, type ClassValue } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { UIDataTypes, UIMessagePart, UITools } from 'ai';
 import { Field } from '@/plugins/form-builder-base-plugin/types';
+import { IQueryResult } from '@baishuyun/types';
 
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
@@ -39,6 +40,27 @@ export const IsFieldsJsonPart = (part: any): boolean => {
   return payload?.type === 'mcp-fields-json';
 };
 
+export const IsQueryResultPart = (part: any): boolean => {
+  const payload = extractTextPartMeta(part);
+  return payload?.type === 'query-stream-parsed-info';
+};
+
+export const GetQueryResult = (part: any): IQueryResult | null => {
+  const payload = extractTextPartMeta(part);
+  if (payload?.type !== 'query-stream-parsed-info') {
+    return null;
+  }
+
+  const result = payload.result;
+  console.log('query result raw data:', result);
+  try {
+    return JSON.parse(result);
+  } catch (e) {
+    console.error('invalid query result data');
+    return null;
+  }
+};
+
 export const IsErrorPart = (part: any): boolean => {
   if (part?.type === 'error') {
     return true;

package/src/plugins/form-filling-plugin/index.ts

@@ -137,7 +137,7 @@ export class FormFillingPlugin extends ChatAreaPlugin<FormFillingPluginCtx> {
   };
 
   public lifecycleHooks?: PluginHooks | undefined = {
-    onBeforeChatRender: (_: IChatSDK) => {
+    onBeforeChatRender: () => {
       return {
         enableMessageMerge: true,
       };

package/src/plugins/mcp-form-builder-plugin/index.ts

@@ -40,6 +40,11 @@ export class McpFormBuilderPlugin extends FormBuilderBasePlugin<McpFormBuilderPl
     onBeforeMessagePartsRender(parts: Array<part>) {
       return mergeConsecutiveTargets<part>(parts, IsFieldsJsonPart) as part[];
     },
+    onBeforeChatRender: () => {
+      return {
+        appendLoadingIndicator: true,
+      };
+    },
   };
 
   public constructor(ctx: McpFormBuilderPluginCtx) {

package/src/plugins/report-query-plugin/components/avatar.tsx

@@ -0,0 +1,12 @@
+import { BotAvatarAndName } from '@/components/bs-ui/bot-avatar-name';
+import { StatsIcon } from '@/components/bs-ui/bs-icons';
+
+export const QueryAvatar = ({
+  variant = 'default',
+}: {
+  variant?: 'default' | 'active';
+  size?: number;
+}) => {
+  const size = variant === 'default' ? 20 : 24;
+  return <BotAvatarAndName name="AI问数" icon={<StatsIcon size={size} />} variant={variant} />;
+};

package/src/plugins/report-query-plugin/components/query-entry-btn.tsx

@@ -0,0 +1,17 @@
+import { BaseButton } from '@/components/bs-ui/base-button';
+import { MagicIcon } from '@/components/bs-ui/bs-icons';
+import { EntryButtonProps } from '@baishuyun/types';
+
+export const QueryEntryBtn = ({ style, onClick }: EntryButtonProps) => {
+  return (
+    <BaseButton
+      style={style}
+      onClick={() => {
+        onClick?.();
+      }}
+      icon={<MagicIcon />}
+    >
+      使用AI创建报表
+    </BaseButton>
+  );
+};