@baishuyun/chat-sdk 0.0.9 → 0.0.10

package/src/components/bs-ui/scroll-to-bottom-btn.tsx

@@ -0,0 +1,28 @@
+import { cn } from '@/lib/utils';
+import { transCls } from '@/const/ui';
+import { ScrollArrowDownIcon } from './bs-icons';
+
+export interface ScrollToBottomProps {
+  onClick?: () => void;
+  className?: string;
+}
+
+export const ScrollToBottomBtn = ({ onClick, className }: ScrollToBottomProps) => {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={cn(
+        'inline-flex items-center justify-center',
+        'w-[36px] h-[36px] rounded-full',
+        'bg-white text-[#666] shadow-[0px_0px_14px_0px_rgba(0,0,0,0.1)]',
+        'hover:shadow-[0px_14px_14px_0px_rgba(0,0,0,0.14)]',
+        'cursor-pointer hover:text-[#333] aspect-square',
+        transCls,
+        className
+      )}
+    >
+      <ScrollArrowDownIcon />
+    </button>
+  );
+};

package/src/const/index.ts

@@ -1,4 +1,4 @@
-import { FieldType } from '@baishuyun/types';
+import { FieldType, IDashWidgetType } from '@baishuyun/types';
 
 export const FieldTypeNameMap: Record<FieldType, string> = {
   text: '输入框',
@@ -30,7 +30,7 @@ export const FieldTypeNameMap: Record<FieldType, string> = {
   subform: '子表单',
 };
 
-export const FIELD_ICON_CODE_MAP: Record<FieldType, string> = {
+export const FIELD_ICON_CODE_MAP: Record<FieldType & 'formula', string> = {
   address: '&#xe881;',
   subform: '&#xe847;',
   password: '&#xe854;', // text
@@ -59,3 +59,27 @@ export const FIELD_ICON_CODE_MAP: Record<FieldType, string> = {
   deptgroup: '&#xe852;',
   unknown: '&#xe848;',
 };
+
+export const DASH_WIDGET_ICON_CODE_MAP: Record<IDashWidgetType, string> = {
+  metric_table: '&#xe88c;', // 指标图
+  gauge_chart: '&#xe88d;', // 仪表盘
+  column_chart: '&#xe892;', // 柱形图
+  funnel_chart: '&#xe89c;', // 漏斗图
+  line_chart: '&#xe88b;', // 折线图
+  pie_chart: '&#xe89e;', // 饼图
+  area_chart: '&#xe898;', // 面积图
+  radar_chart: '&#xe893;', // 雷达图
+  bar_chart: '&#xe896;', // 条形图
+  gantt: '&#xe899;', // 甘特图
+  multi_axes_chart: '&#xe88f;', // 双轴图
+  data_table: '&#xe894;', // 数据表
+  background_table: '&#xe894;', // 数据表（同 data_table）
+  pivot_table: '&#xe891;', // 透视图
+  map_chart: '&#xe89d;', // 地图
+  newMap: '&#xe89d;', // 地图
+  card: '&#xe8f4;', // 卡片
+  rili: '&#xe849;', // 日历（日期）
+  description: '&#xe88e;', // 文本组件
+  image: '&#xe890;', // 图片组件
+  gauge_imageMore: '&#xe88d;', // 仪表盘（同 gauge_chart）
+};

package/src/hooks/use-frame-mode.ts

@@ -10,6 +10,7 @@ export const useChatStatus = () => {
   return {
     status,
     setStatus,
+    isHide: status === 'hide',
     isVisible: status !== 'hide',
     isFloat: status === 'float',
     isDock: status === 'dock',

package/src/hooks/use-scroll-to-bottom.ts

@@ -0,0 +1,127 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+export function useScrollToBottom() {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const endRef = useRef<HTMLDivElement>(null);
+  const [isAtBottom, setIsAtBottom] = useState(true);
+  const isAtBottomRef = useRef(true);
+  const isUserScrollingRef = useRef(false);
+
+  // Keep ref in sync with state
+  useEffect(() => {
+    isAtBottomRef.current = isAtBottom;
+  }, [isAtBottom]);
+
+  const checkIfAtBottom = useCallback(() => {
+    if (!containerRef.current) {
+      return true;
+    }
+    const { scrollTop, scrollHeight, clientHeight } = containerRef.current;
+    return scrollTop + clientHeight >= scrollHeight - 100;
+  }, []);
+
+  const scrollToBottom = useCallback((behavior: ScrollBehavior = 'smooth') => {
+    if (!containerRef.current) {
+      return;
+    }
+    containerRef.current.scrollTo({
+      top: containerRef.current.scrollHeight,
+      behavior,
+    });
+  }, []);
+
+  // Handle user scroll events
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) {
+      return;
+    }
+
+    let scrollTimeout: ReturnType<typeof setTimeout>;
+
+    const handleScroll = () => {
+      // Mark as user scrolling
+      isUserScrollingRef.current = true;
+      clearTimeout(scrollTimeout);
+
+      // Update isAtBottom state
+      const atBottom = checkIfAtBottom();
+      setIsAtBottom(atBottom);
+      isAtBottomRef.current = atBottom;
+
+      // Reset user scrolling flag after scroll ends
+      scrollTimeout = setTimeout(() => {
+        isUserScrollingRef.current = false;
+      }, 150);
+    };
+
+    container.addEventListener('scroll', handleScroll, { passive: true });
+    return () => {
+      container.removeEventListener('scroll', handleScroll);
+      clearTimeout(scrollTimeout);
+    };
+  }, [checkIfAtBottom]);
+
+  // Auto-scroll when content changes
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) {
+      return;
+    }
+
+    const scrollIfNeeded = () => {
+      // Only auto-scroll if user was at bottom and isn't actively scrolling
+      if (isAtBottomRef.current && !isUserScrollingRef.current) {
+        requestAnimationFrame(() => {
+          container.scrollTo({
+            top: container.scrollHeight,
+            behavior: 'instant',
+          });
+          setIsAtBottom(true);
+          isAtBottomRef.current = true;
+        });
+      }
+    };
+
+    // Watch for DOM changes
+    const mutationObserver = new MutationObserver(scrollIfNeeded);
+    mutationObserver.observe(container, {
+      childList: true,
+      subtree: true,
+      characterData: true,
+    });
+
+    // Watch for size changes
+    const resizeObserver = new ResizeObserver(scrollIfNeeded);
+    resizeObserver.observe(container);
+
+    // Also observe children for size changes
+    for (const child of Array.from(container.children)) {
+      resizeObserver.observe(child);
+    }
+
+    return () => {
+      mutationObserver.disconnect();
+      resizeObserver.disconnect();
+    };
+  }, []);
+
+  function onViewportEnter() {
+    setIsAtBottom(true);
+    isAtBottomRef.current = true;
+  }
+
+  function onViewportLeave() {
+    setIsAtBottom(false);
+    isAtBottomRef.current = false;
+  }
+
+  return {
+    containerRef,
+    endRef,
+    isAtBottom,
+    scrollToBottom,
+    onViewportEnter,
+    onViewportLeave,
+  };
+}

package/src/plugins/mcp-form-builder-plugin/components/create-form-confirm.tsx

@@ -51,7 +51,7 @@ export const CreateFormConfirm = memo(
       <FakeBotMessage>
         {success ? (
           <>
-            已为你创建{designInfo.formName}
+            <span className="text-[#4d609f]">已为你创建{designInfo.formName}</span>
             <FormInfoEditor
               onConfirm={(name, icon) => {
                 if (!formRef.current) {

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

@@ -43,6 +43,7 @@ export class McpFormBuilderPlugin extends FormBuilderBasePlugin<McpFormBuilderPl
     onBeforeChatRender: () => {
       return {
         appendLoadingIndicator: true,
+        placeholder: '描述你的需求，如：搭建一张供应商管理表',
       };
     },
   };

package/src/plugins/report-query-plugin/components/query-msg-part.tsx

@@ -7,18 +7,45 @@ import { usePluginCtx } from '@/hooks/use-plugin-ctx';
 import { ReportQueryPlugin } from '@/index';
 import { PLUGIN_NAME } from '../const';
 import { IReportQueryContext } from '../types';
+import { FakeBotMessage } from '@/components/biz-comp/FakeBotMsg';
+import { HighlightMsg } from '@/components/biz-comp/highlight-msg';
+import { CollapsibleTxtMsg } from '@/components/bs-ui/collapsible-txt-msg';
+import { AggregateTableIcon } from '@/components/bs-ui/bs-icons';
 
 export const QueryMsgPart = ({ part, ...rest }: MsgPartCompProps) => {
   const textPart = part as TextUIPart;
   const ctx = usePluginCtx<IReportQueryContext, ReportQueryPlugin>(PLUGIN_NAME);
 
+  if (!ctx) {
+    return null;
+  }
+
   if (IsQueryResultPart(part)) {
     const result = GetQueryResult(part);
-    if (ctx && result) {
-      ctx.queryResult = result;
-      ctx.queryResult.appID = ctx.appInfo?.appId || '';
+
+    if (!result) {
+      return null;
+    }
+
+    if (result.isAggregate) {
+      return (
+        <FakeBotMessage headless className="w-full">
+          <HighlightMsg>已为你创建聚合表</HighlightMsg>
+          <CollapsibleTxtMsg
+            icon={
+              <span className="text-[#0265ff]">
+                <AggregateTableIcon />
+              </span>
+            }
+            title={result.title!}
+            disableExpand
+          />
+        </FakeBotMessage>
+      );
     }
 
+    ctx.queryResult = result;
+    ctx.queryResult.appID = ctx.appInfo?.appId || '';
     return <DataTableCard {...(result || {})}></DataTableCard>;
   }
 

package/src/plugins/report-query-plugin/components/result-cards/DataTableCard.tsx

@@ -10,6 +10,7 @@ import { ConditionField, DataSourceField, DimensionField, MetricField } from './
 import { CardFieldsWrapper } from '@/components/bs-ui/card-field';
 import { FilterCondition } from './FilterCondition';
 import { SplitLine } from '@/components/bs-ui/split-line';
+import { DashWidgetIcon } from '@/components/biz-comp/dash-widget-icon';
 
 export const DataTableCard = (props: IQueryResult) => {
   const ctx = usePluginCtx<IReportQueryContext, ReportQueryPlugin>(PLUGIN_NAME);
@@ -28,20 +29,28 @@ export const DataTableCard = (props: IQueryResult) => {
   const hasMetrics = props.metrics && props.metrics.length > 0;
 
   return (
-    <CollapsibleTxtMsg title={props?.title || ''} icon={<DataTableIcon />} defaultOpen>
+    <CollapsibleTxtMsg
+      title={props?.title || ''}
+      icon={<DashWidgetIcon type={props.type} />}
+      defaultOpen
+    >
       <CardFieldsWrapper>
         {name && <DataSourceField>{name}</DataSourceField>}
 
         {props.fields?.length ? (
-          <DimensionField>{props.fields.map((field) => field.title).join('、')}</DimensionField>
+          <DimensionField>{props.fields?.map((field) => field.title).join('、')}</DimensionField>
         ) : null}
 
         {props.xFields?.length ? (
           <DimensionField isCol>
-            {props.xFields.map((field) => field.title).join('、')}
+            {props.xFields?.map((field) => field.title).join('、')}
           </DimensionField>
         ) : null}
 
+        {props.yFields?.length ? (
+          <DimensionField>{props.yFields.map((field) => field.title).join('、')}</DimensionField>
+        ) : null}
+
         {props.filter?.conds?.length ? (
           <ConditionField>
             <FilterCondition {...props.filter} />

package/src/plugins/report-query-plugin/components/result-cards/DataTableFields.tsx

@@ -35,7 +35,7 @@ export const MetricField = ({
   return (
     <div className={cn('flex items-center justify-between', className)}>
       <div className="flex min-w-0 items-center gap-[6px]">
-        <span className="shrink-0 text-[#0265FF]">
+        <span className="shrink-0 text-[#6f829e]">
           <FieldIcon type={metric.type} />
         </span>
         <span className="truncate text-sm leading-normal text-[#030303]">{metric.title}</span>

package/src/plugins/report-query-plugin/components/result-cards/FilterCondition.tsx

@@ -333,24 +333,24 @@ const filterToDesc = (field: IFilterField): ReactNode => {
   // 为空/不为空 不需要显示值
   if (method === 'empty' || method === 'not_empty') {
     return (
-      <div className="leading-[normal]">
+      <span className="leading-[normal]">
         <span className="text-[#030303]">{title}</span>
-        <span className="text-[#4d609f]">&nbsp;&nbsp;</span>
+        <span className="text-[#4d609f]">&nbsp;</span>
         {renderMethodLabel(methodLabel)}
-      </div>
+      </span>
     );
   }
 
   return (
-    <div className="leading-[normal]">
+    <span className="leading-[normal]">
       <span className="text-[#030303]">{title}</span>
-      <span className="text-[#4d609f]">&nbsp;&nbsp;</span>
+      <span className="text-[#4d609f]">&nbsp;</span>
       {prefix && <span className="text-[#666]">{prefix}</span>}
       {renderMethodLabel(methodLabel)}
-      <span className="text-[#4d609f]">&nbsp;&nbsp;</span>
+      <span className="text-[#4d609f]">&nbsp;</span>
       <span className="text-[#0265ff]">{valueStr}</span>
       {suffix && <span className="text-[#666]">&nbsp;{suffix}</span>}
-    </div>
+    </span>
   );
 };
 
@@ -362,13 +362,13 @@ export const FilterCondition = ({ conds, rel }: IQueryFilter): ReactNode => {
   const relLabel = rel === 'or' ? '或' : '且';
 
   return (
-    <div className="font-['Alibaba_PuHuiTi_2.0:55_Regular',sans-serif] text-[14px] text-[#030303] whitespace-pre-wrap">
+    <span className="font-['Alibaba_PuHuiTi_2.0:55_Regular',sans-serif] text-[14px] text-[#030303] whitespace-pre-wrap">
       {conds.map((field, index) => (
-        <div key={`${field.name}-${index}`} className="leading-[normal]">
+        <span key={`${field.name}-${index}`} className="leading-[normal]">
           {filterToDesc(field)}
           {index < conds.length - 1 && <span className="text-[#999]">&nbsp;{relLabel}&nbsp;</span>}
-        </div>
+        </span>
       ))}
-    </div>
+    </span>
   );
 };

package/src/plugins/report-query-plugin/index.ts

@@ -68,6 +68,10 @@ export class ReportQueryPlugin extends ChatAreaPlugin<IReportQueryContext> {
   };
 
   public setForms = (forms: Array<IDashForm>) => {
+    if (!forms || forms.length === 0) {
+      return;
+    }
+
     const formMap = new Map<string, IDashForm>();
     forms.forEach((form) => {
       formMap.set(form.entryId, form);

package/src/plugins/report-query-plugin/utils/field-enhance.ts

@@ -0,0 +1,39 @@
+import {
+  FieldType,
+  IDashWidgetType,
+  IQueryResultMetric,
+  IQueryResultXField,
+} from '@baishuyun/types';
+import { GetXFieldGroupStr } from './get-field-group';
+import { getFieldIcon } from './get-field-icon';
+import { getGroupRule } from './get-group-rule';
+
+export const XFieldEnhance = (
+  field: IQueryResultXField,
+  widgetType: IDashWidgetType,
+  index: number
+) => {
+  return {
+    ...field,
+    id: index,
+    icon: getFieldIcon(field.type as FieldType),
+    group: GetXFieldGroupStr(widgetType, field),
+    groupRule: getGroupRule(field.type as FieldType, widgetType),
+  };
+};
+
+export const MetricEnhance = (
+  field: IQueryResultMetric,
+  widgetType: IDashWidgetType,
+  index: number
+) => {
+  return {
+    ...field,
+    id: index,
+    icon: getFieldIcon(field.type as FieldType),
+    group: GetXFieldGroupStr(widgetType, {
+      type: field.type,
+      name: field.name || field.title,
+    }),
+  };
+};