@baishuyun/chat-sdk 0.0.1-alpha.1

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

@@ -0,0 +1,34 @@
+import { memo, ReactNode } 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';
+
+export const FieldCheckerListMsg = memo(
+  ({ fields, children }: { fields: Array<FieldCheckerProps>; children?: ReactNode }) => {
+    return (
+      <CollapsibleTxtMsg title="字段生成" icon={<LetterAIcon />} defaultOpen>
+        {fields.map((f) => (
+          <FieldChecker {...f} />
+        ))}
+        {children}
+      </CollapsibleTxtMsg>
+    );
+  },
+  (p1, p2) => {
+    return p1.fields.length === p2.fields.length;
+  }
+);
+
+export const FieldValueCheckerListMsg = memo(
+  ({ props, children }: { props: Array<FieldValueCheckerProps>; children?: ReactNode }) => {
+    return (
+      <CollapsibleTxtMsg title="字段填写" icon={<EditIcon />} defaultOpen>
+        {props.map((f) => (
+          <FieldValueChecker {...f} />
+        ))}
+        {children}
+      </CollapsibleTxtMsg>
+    );
+  }
+);

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

@@ -0,0 +1,98 @@
+import { Checkbox } from '@/components/ui/checkbox';
+import { memo, useEffect } from 'react';
+import { Label } from '@/components/ui/label';
+import { FieldType, ValueOf } from '@baishuyun/types';
+import { FieldTypeNameMap } from '@/const';
+import { ToolUIPart } from 'ai';
+import { FieldsTools } from '@baishuyun/agents';
+import { cn, isSubformFieldEqual } from '@/lib/utils';
+import { toHumanReadable } from '@/plugins/form-filling-plugin/utils';
+import { SubformFieldsValueChecker } from './SubformFieldsValueChecker';
+import LineChecker from '../bs-ui/line-checker';
+
+type Field = ValueOf<Pick<ToolUIPart<FieldsTools>, 'output'>>;
+
+export interface FieldValueCheckerProps {
+  field: ValueOf<Pick<ToolUIPart<FieldsTools>, 'output'>>;
+  isSubField?: boolean;
+  disabled?: boolean;
+  onChange?: (checked: boolean, field: Field, parentFieldName?: string, index?: number) => void;
+  onLoaded?: (field: Field) => void;
+}
+
+export const FieldValueChecker = memo(
+  ({ field, disabled, isSubField, onChange, onLoaded }: FieldValueCheckerProps) => {
+    const { widget, label } = field;
+    if (!widget) {
+      return null;
+    }
+
+    const { type, value: v } = widget;
+
+    const t = type as FieldType;
+
+    const value = toHumanReadable(v, t);
+
+    if (!FieldTypeNameMap.hasOwnProperty(type)) {
+      return null;
+    }
+
+    const typeDesc = FieldTypeNameMap[t] || FieldTypeNameMap.unknown;
+
+    const isSubForm = type === 'subform';
+
+    useEffect(() => {
+      onLoaded?.(field);
+    }, []);
+
+    const handleCheck = (checked: boolean) => {
+      onChange?.(checked, field);
+    };
+
+    const extraPadding = isSubField ? 'pl-6' : '';
+
+    return (
+      <>
+        <LineChecker
+          title={label}
+          disabled={disabled}
+          defaultChecked={true}
+          onCheckedChange={handleCheck}
+          className={extraPadding}
+          shortDesc={isSubForm ? '' : (value as string)}
+          // extra={typeDesc}
+        />
+        {isSubForm && (
+          <SubformFieldsValueChecker
+            subformField={field}
+            onChange={(detail) => {
+              onChange?.(detail.checked, detail.field, detail.parentFieldName, detail.row);
+            }}
+          />
+        )}
+      </>
+    );
+  },
+  (p1, p2) => {
+    // 标签一致
+    const isLabelEqual = p1.field?.label === p2.field?.label;
+    if (!isLabelEqual) {
+      return false;
+    }
+
+    // id 一致
+    const isFieldNameEqual = p1.field?.widget?.widgetName === p2.field?.widget?.widgetName;
+    if (!isFieldNameEqual) {
+      return false;
+    }
+
+    // 禁用状态一致
+    const isDisabledEqual = p1.disabled === p2.disabled;
+    if (!isDisabledEqual) {
+      return false;
+    }
+
+    // 进一步比较子表单下的字段
+    return isSubformFieldEqual(p1?.field, p2?.field);
+  }
+);

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

@@ -0,0 +1,166 @@
+import { memo, useCallback, useEffect, useState } from 'react';
+import { FieldType, ValueOf } from '@baishuyun/types';
+import { FieldTypeNameMap } from '@/const';
+import { ToolUIPart } from 'ai';
+import { FieldsTools } from '@baishuyun/agents';
+import { toHumanReadable } from '@/plugins/form-filling-plugin/utils';
+import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '../ui/collapsible';
+import LineChecker from '../bs-ui/line-checker';
+
+const Checker = ({
+  disabled,
+  onCheckedChange,
+
+  label,
+  val,
+  desc,
+}: {
+  label: string;
+  val: string;
+  onCheckedChange: (v: boolean) => void;
+  disabled?: boolean;
+  desc: string;
+}) => {
+  return (
+    <LineChecker
+      title={label}
+      disabled={disabled}
+      defaultChecked={true}
+      onCheckedChange={onCheckedChange}
+      className="pl-[36px]"
+      shortDesc={val}
+      // extra={desc}
+    />
+  );
+};
+
+const SubFieldChecker = memo(
+  ({
+    field,
+    onCheckedChange,
+  }: {
+    onCheckedChange: (
+      checked: boolean,
+      field: ValueOf<Pick<ToolUIPart<FieldsTools>, 'output'>>
+    ) => void;
+    field: ValueOf<Pick<ToolUIPart<FieldsTools>, 'output'>>;
+  }) => {
+    const { widget, label } = field;
+    if (!widget) {
+      return null;
+    }
+
+    const { type, value: v } = widget;
+    const t = type as FieldType;
+    if (!FieldTypeNameMap.hasOwnProperty(t)) {
+      return null;
+    }
+
+    const value = toHumanReadable(v, t);
+
+    const typeDesc = FieldTypeNameMap[t] || FieldTypeNameMap.unknown;
+
+    const handleCheckChange = useCallback(
+      (v: boolean) => {
+        onCheckedChange(v, field);
+      },
+      [field]
+    );
+
+    useEffect(() => {
+      // 默认勾选上
+      handleCheckChange(true);
+    }, []);
+
+    return (
+      <Checker
+        desc={typeDesc}
+        label={label}
+        val={value as string}
+        onCheckedChange={handleCheckChange}
+      />
+    );
+  },
+  (p1, p2) => {
+    console.log(p1, p2);
+    const isNameEqual = p1.field.widget?.widgetName === p2.field.widget?.widgetName;
+    return isNameEqual;
+  }
+);
+
+type F = ValueOf<Pick<ToolUIPart<FieldsTools>, 'output'>>;
+
+interface generatedField {
+  label: string;
+  fieldName: string;
+  fieldType: string;
+  value: any;
+}
+
+type onSubformFieldChangeParam = {
+  checked: boolean;
+  field: F;
+  parentFieldName: string;
+  row?: number;
+  col?: number;
+};
+
+/**
+ * 专门渲染子表单下的字段勾选
+ */
+export const SubformFieldsValueChecker = ({
+  subformField,
+  onChange,
+}: {
+  onChange: (p: onSubformFieldChangeParam) => void;
+  subformField: ValueOf<Pick<ToolUIPart<FieldsTools>, 'output'>>;
+}) => {
+  if (!subformField.widget.value || !subformField.widget.value.length) {
+    return null;
+  }
+
+  const subformRecords = subformField.widget.value;
+
+  // 默认展开
+  const [openAll, setOpenAll] = useState(true);
+
+  return (
+    <Collapsible open={openAll} onOpenChange={setOpenAll}>
+      {/* <CollapsibleTrigger>子表单数据</CollapsibleTrigger> */}
+      <CollapsibleContent>
+        {subformRecords.map((rowData: generatedField[], row: number) => {
+          return (
+            <Collapsible defaultOpen={true} key={row}>
+              {/* <CollapsibleTrigger>Row {row + 1}</CollapsibleTrigger> */}
+              <CollapsibleContent>
+                {rowData.map((fData: generatedField, col: number) => {
+                  return (
+                    <SubFieldChecker
+                      field={{
+                        label: fData.label,
+                        widget: {
+                          widgetName: fData.fieldName,
+                          type: fData.fieldType,
+                          value: fData.value,
+                        },
+                      }}
+                      onCheckedChange={(checked: boolean, field: F) => {
+                        onChange({
+                          checked,
+                          field,
+                          row,
+                          col,
+                          parentFieldName: subformField.widget.widgetName,
+                        });
+                      }}
+                    />
+                  );
+                })}
+              </CollapsibleContent>
+            </Collapsible>
+          );
+        })}
+      </CollapsibleContent>
+    </Collapsible>
+  );
+};

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

@@ -0,0 +1,206 @@
+import React, { ComponentType, useEffect } from 'react';
+import { ChatStore } from '@/store';
+import { ChatSDK } from '@/.';
+import { ChatStoreProvider, useChatStore } from '@/store/context';
+import { Chat } from '@/chat';
+import { cn } from '@/lib/utils';
+import { ReactPortal } from 'react';
+import { createPortal } from 'react-dom';
+import { useFrameMode } from '@/hooks/use-frame-mode';
+import { PrimaryEntryBtn } from '../bs-ui/primary-entry-btn';
+import { useShadow } from '@/hooks/use-shadow';
+import { ChatAreaHeader } from '../bs-ui/chat-area-header';
+import { useDefaultPluginCustomComponent } from '@/hooks/use-plugin-custom-components';
+import { BotAvatarAndName } from '../bs-ui/bot-avatar-name';
+
+const ChatSlot = ({ client }: { client?: ChatSDK }) => {
+  const { chatVisible, setChatVisible, setFrameMode } = useChatStore((store) => ({
+    chatVisible: store.chatAreaVisible,
+    setFrameMode: store.setFrameMode,
+    setChatVisible: store.setChatAreaVisible,
+  }));
+
+  const { mode, setMode } = useFrameMode();
+
+  const isFloat = mode === 'float';
+  const isEmbedded = mode === 'dock';
+
+  const modeCls = cn({
+    'fixed z-50 rounded-lg shadow-lg': isFloat,
+    hidden: !chatVisible,
+    'static w-full h-full shadow-md': isEmbedded,
+  });
+
+  const avatarComInfo = useDefaultPluginCustomComponent('AvatarAndName');
+  const Avatar: ComponentType<{ variant?: 'default' | 'active' }> | undefined =
+    avatarComInfo?.Component;
+  const avatarJsx = Avatar ? (
+    <Avatar variant="active" />
+  ) : (
+    <BotAvatarAndName name={'AI表单搭建'} variant="active" />
+  );
+
+  const modeStyle = isFloat
+    ? {
+        width: 354,
+        height: 'calc(100% - 20px)',
+        bottom: '10px',
+        right: '10px',
+        zIndex: client?.options?.safeZIndex ?? 0 + 1,
+      }
+    : {};
+
+  return (
+    <div className={cn('bg-white flex flex-col overflow-hidden', modeCls)} style={modeStyle}>
+      <ChatAreaHeader
+        onDockClick={() => {
+          const isFloat = mode === 'float';
+          isFloat ? setMode('dock') : setMode('float');
+        }}
+        avatar={avatarJsx}
+        onCloseClick={() => {
+          setChatVisible(false);
+          setFrameMode('float');
+        }}
+      />
+      <Chat client={client!} />
+    </div>
+  );
+};
+
+const ChatContent: React.FC<{ client?: ChatSDK }> = ({ client }): ReactPortal | null => {
+  const { chatVisible } = useChatStore((store) => ({
+    chatVisible: store.chatAreaVisible,
+  }));
+
+  const fullCls = ['h-full', 'w-full'];
+  const fullStyle = { height: '100%', width: '100%' };
+
+  // 调用通用Hook创建Shadow DOM
+  const { shadowContainer: chatContentEl } = useShadow({
+    id: 'chat-sdk-content',
+    style: client?.options?.style || '', // 注入SDK配置的样式
+    rootEl: client?.options?.el || document.body, // 挂载到SDK指定的根元素
+    containerClasses: chatVisible ? fullCls : [],
+    wrapperClasses: chatVisible ? fullCls : [],
+    wrapperStyle: chatVisible ? fullStyle : {},
+    extraHtml: client?.options?.extraHtml || '', // 注入额外的HTML
+  });
+
+  useEffect(() => {
+    const root = client?.options?.el;
+    if (!root) {
+      return;
+    }
+
+    root.style.pointerEvents = chatVisible ? 'auto' : 'none';
+  }, [chatVisible]);
+
+  if (!chatContentEl) {
+    return null;
+  }
+
+  return createPortal(<ChatSlot client={client} />, chatContentEl) as ReactPortal;
+};
+
+export const ChatEntryBtn = ({ client }: { client?: ChatSDK }) => {
+  const { bottom = 10, right = 10 } = client?.options?.btnOffset || {};
+
+  const { entryVisible, entryWrapper, setChatVisible, setFrameMode, chatVisible } = useChatStore(
+    (store) => ({
+      setFrameMode: store.setFrameMode,
+      entryWrapper: store.chatEntryElWrapper,
+      chatVisible: store.chatAreaVisible,
+      entryVisible: store.chatEntryVisible,
+      setChatVisible: store.setChatAreaVisible,
+    })
+  );
+
+  const hasWrapper = Boolean(entryWrapper);
+
+  const EntryInfo = useDefaultPluginCustomComponent('EntryButton');
+  const EntryCom = EntryInfo?.Component;
+
+  const entryStyle: React.CSSProperties = hasWrapper
+    ? {
+        cursor: 'pointer',
+      }
+    : {
+        position: 'fixed',
+        cursor: 'pointer',
+        bottom,
+        right,
+        zIndex: client?.options?.safeZIndex,
+      };
+
+  const EntryJsx = EntryCom ? (
+    <EntryCom
+      chatVisible={chatVisible}
+      onClick={() => {
+        setFrameMode('dock');
+        setChatVisible(true);
+      }}
+      style={entryStyle}
+    />
+  ) : (
+    <PrimaryEntryBtn
+      style={entryStyle}
+      minimal={chatVisible}
+      onClick={() => {
+        setFrameMode('dock');
+        setChatVisible(true);
+      }}
+    >
+      AI助手
+    </PrimaryEntryBtn>
+  );
+
+  const { shadowContainer: shadowEntry, destroy: destroyShadowEntry } = useShadow({
+    id: 'chat-sdk-entry',
+    rootEl: entryWrapper,
+    containerClasses: ['inline-flex'],
+    wrapperClasses: ['inline-flex'],
+    style: client?.options?.style || '', // 注入SDK配置的样式
+  });
+
+  if (!entryVisible) {
+    return null;
+  }
+
+  if (hasWrapper) {
+    if (!shadowEntry) {
+      return null;
+    }
+
+    return createPortal(EntryJsx, shadowEntry) as ReactPortal;
+  } else {
+    destroyShadowEntry();
+  }
+
+  return EntryJsx;
+};
+
+export const ChatWidgets = ({ client }: { client?: ChatSDK }) => {
+  const { mode } = useChatStore((store) => ({
+    mode: store.frameMode,
+  }));
+
+  useEffect(() => {
+    client?.options?.onFrameModeChange?.(mode);
+  }, [mode]);
+
+  return (
+    <>
+      <ChatContent client={client} />
+      <ChatEntryBtn client={client} />
+    </>
+  );
+};
+
+export const ChatClient = ({ store, client }: { client?: ChatSDK; store: ChatStore }) => {
+  return (
+    <ChatStoreProvider store={store}>
+      <ChatWidgets client={client} />
+    </ChatStoreProvider>
+  );
+};

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

@@ -0,0 +1,25 @@
+import { ReactNode } from "react";
+
+export const ChatFrame = (props: {
+  messagesArea: ReactNode;
+  inputArea: ReactNode;
+}) => {
+  const { messagesArea, inputArea } = props;
+
+  return (
+    <div className="chat-frame flex flex-col h-full min-h-0">
+      <div
+        className="messages-area flex-1 flex m-h-0"
+        style={{ flex: "1 1 auto", minHeight: 0 }}
+      >
+        {messagesArea}
+      </div>
+      <div
+        style={{ flex: "0 0 auto", minHeight: 100 }}
+        className="input-area flex-0 shrink-0 p-4"
+      >
+        {inputArea}
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,70 @@
+import type { ComponentProps } from "react";
+import React, { useCallback } from "react";
+import {
+  StickToBottom,
+  StickToBottomProps,
+  useStickToBottomContext,
+} from "use-stick-to-bottom";
+import { Button } from "@/components/ui/button";
+import cn from "classnames";
+
+export type ConversationProps = ComponentProps<typeof StickToBottom>;
+
+export const Conversation: React.FC<StickToBottomProps> = ({
+  className,
+  ...props
+}) => (
+  <StickToBottom
+    className={cn(
+      "relative flex-1 touch-pan-y overflow-y-auto flex will-change-scroll",
+      className,
+    )}
+    style={{ minHeight: 0, height: "100%" }}
+    initial="smooth"
+    resize="smooth"
+    role="log"
+    {...props}
+  />
+);
+
+export type ConversationContentProps = ComponentProps<
+  typeof StickToBottom.Content
+>;
+
+export const ConversationContent = ({
+  className,
+  ...props
+}: ConversationContentProps) => (
+  <StickToBottom.Content className={cn("p-4", className)} {...props} />
+);
+
+export type ConversationScrollButtonProps = ComponentProps<typeof Button>;
+
+export const ConversationScrollButton = ({
+  className,
+  ...props
+}: ConversationScrollButtonProps) => {
+  const { isAtBottom, scrollToBottom } = useStickToBottomContext();
+
+  const handleScrollToBottom = useCallback(() => {
+    scrollToBottom();
+  }, [scrollToBottom]);
+
+  return (
+    !isAtBottom && (
+      <Button
+        className={cn(
+          "-translate-x-1/2 absolute bottom-4 left-1/2 z-10 rounded-full shadow-lg",
+          className,
+        )}
+        onClick={handleScrollToBottom}
+        size="icon"
+        type="button"
+        variant="outline"
+        {...props}
+      >
+        ↓
+      </Button>
+    )
+  );
+};

package/src/components/biz-comp/dock-btn.tsx

@@ -0,0 +1,52 @@
+import { useFrameMode } from "@/hooks/use-frame-mode";
+import { Button } from "../ui/button";
+
+export const DockBtn = () => {
+  const { mode, setMode } = useFrameMode();
+
+  // if (mode === "dock") {
+  //   return null;
+  // }
+  const isFloat = mode === "float";
+
+  return (
+    <Button
+      variant="ghost"
+      onClick={() => {
+        isFloat ? setMode("dock") : setMode("float");
+      }}
+    >
+      {!isFloat ? (
+        <svg
+          data-testid="geist-icon"
+          height="16"
+          stroke-linejoin="round"
+          viewBox="0 0 16 16"
+          width="16"
+        >
+          <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M1.99939 10.25V11H3.49939V10.25V4.56008L12.7191 13.7798L13.2495 14.3101L14.3101 13.2494L13.7798 12.7191L4.56121 3.50058H10.25H11V2.00058H10.25H2.99939C2.4471 2.00058 1.99939 2.4483 1.99939 3.00058V10.25Z"
+            fill="currentColor"
+          ></path>
+        </svg>
+      ) : (
+        <svg
+          data-testid="geist-icon"
+          height="16"
+          stroke-linejoin="round"
+          viewBox="0 0 16 16"
+          width="16"
+        >
+          <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M12.4994 11.4399V5.74999V4.99999H13.9994V5.74999V12.9994C13.9994 13.5517 13.5517 13.9994 12.9994 13.9994H5.74999H4.99999V12.4994H5.74999H11.4376L2.21908 3.28092L1.68875 2.75059L2.74941 1.68993L3.27974 2.22026L12.4994 11.4399Z"
+            fill="currentColor"
+          ></path>
+        </svg>
+      )}
+    </Button>
+  );
+};

package/src/components/biz-comp/field-icon.tsx

@@ -0,0 +1,8 @@
+import { FIELD_ICON_CODE_MAP } from '@/const';
+import { FieldType } from '@baishuyun/types';
+import { FontIcon } from '../bs-ui/font-icon';
+
+export const FieldIcon = ({ type }: { type: FieldType }) => {
+  const code = FIELD_ICON_CODE_MAP[type] || 'icon-unknown';
+  return <FontIcon code={code} />;
+};