@baishuyun/chat-sdk 0.0.1-alpha.1

package/src/components/biz-comp/markdown-part.tsx

@@ -0,0 +1,48 @@
+import { MsgPartCompProps } from "@baishuyun/types";
+import { MessageContent } from "./message-content";
+import { cn, sanitizeText } from "@/lib/utils";
+import { MemoizedMarkdown } from "./markdown";
+import { UserTextMsgBubble } from "../bs-ui/user-txt-msg-bubble";
+import { CollapsibleTxtMsg } from "../bs-ui/collapsible-txt-msg";
+import { AnalysisIcon } from "../bs-ui/bs-icons";
+import { UIDataTypes, UIMessagePart, UITools } from "ai";
+
+export const MarkdownMsgpart = (
+  props: MsgPartCompProps & { children?: React.ReactNode },
+) => {
+  const { part: p, role, id } = props;
+
+  const part = p as UIMessagePart<UIDataTypes, UITools>;
+
+  if (part.type !== "text" || !part.text) {
+    return null;
+  }
+
+  const typoCls = cn({
+    prose: role === "assistant",
+  });
+
+  if (role === "user") {
+    return <UserTextMsgBubble>{part.text}</UserTextMsgBubble>
+  }
+
+  return (
+    <div>
+      <MessageContent
+        className={cn({
+          // "w-fit wrap-break-words rounded-2 px-3 py-2 text-right text-white":
+          //   role === "user",
+          "bg-transparent px-0 py-0 text-left": role === "assistant",
+        })}
+        data-testid="message-content"
+      >
+        <CollapsibleTxtMsg title="表单设计" icon={<AnalysisIcon />} defaultOpen>
+          <article className={typoCls}>
+            <MemoizedMarkdown id={id} content={sanitizeText(part.text)} />
+          </article>
+        </CollapsibleTxtMsg>
+        {props.children}
+      </MessageContent>
+    </div>
+  );
+};

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

@@ -0,0 +1,36 @@
+import { marked } from "marked";
+import { memo, useMemo } from "react";
+import ReactMarkdown from "react-markdown";
+
+function parseMarkdownIntoBlocks(markdown: string): string[] {
+  const tokens = marked.lexer(markdown);
+  return tokens.map((token) => token.raw);
+}
+
+const MemoizedMarkdownBlock = memo(
+  ({ content }: { content: string }) => {
+    return <ReactMarkdown>{content}</ReactMarkdown>;
+  },
+  (prevProps, nextProps) => {
+    if (prevProps.content !== nextProps.content) return false;
+    return true;
+  },
+);
+
+MemoizedMarkdownBlock.displayName = "MemoizedMarkdownBlock";
+
+export const MemoizedMarkdown = memo(
+  ({ content, id }: { content: string; id: string }) => {
+    // 【确认搭建】
+
+    // content = content.replace(/【确?认?搭?建?.*】?/g, "");
+
+    const blocks = useMemo(() => parseMarkdownIntoBlocks(content), [content]);
+
+    return blocks.map((block, index) => (
+      <MemoizedMarkdownBlock content={block} key={`${id}-block_${index}`} />
+    ));
+  },
+);
+
+MemoizedMarkdown.displayName = "MemoizedMarkdown";

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

@@ -0,0 +1,21 @@
+import cn from 'classnames';
+import { HTMLAttributes } from 'react';
+
+export type MessageContentProps = HTMLAttributes<HTMLDivElement> & {
+  compact?: boolean;
+};
+
+export const MessageContent = ({ children, className, ...props }: MessageContentProps) => (
+  <div
+    className={cn(
+      'flex flex-col gap-[10px] overflow-hidden p-0 text-foreground text-sm',
+      'group-[.is-user]:bg-primary group-[.is-user]:text-primary-foreground',
+      'group-[.is-assistant]:bg-secondary group-[.is-assistant]:text-foreground',
+      'is-user:dark overflow-visible',
+      className
+    )}
+    {...props}
+  >
+    {children}
+  </div>
+);

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

@@ -0,0 +1,42 @@
+import { useRef } from "react";
+import { MessagesProps } from "@baishuyun/types";
+import { Conversation, ConversationContent } from "./conversation";
+import { PreviewMessage } from "./preview-message";
+import { FakeBotMessage } from "./FakeBotMsg";
+import { OpeningLines } from "./opening-lines";
+
+export const Messages = (props: MessagesProps) => {
+  const messagesContainerRef = useRef<HTMLDivElement>(null);
+
+  const { messages, setMessages, addToolOutput, sendMessage } = props;
+
+  return (
+    <div
+      className="overscroll-behavior-contain -webkit-overflow-scrolling-touch flex-1 touch-pan-y overflow-y-scroll m-h-0 h-full"
+      ref={messagesContainerRef}
+      style={{ overflowAnchor: "none", overscrollBehavior: "contain" }}
+    >
+      <Conversation className="mx-auto flex min-w-0 max-w-4xl flex-col">
+        <ConversationContent className="flex flex-col px-2 py-4 md:px-4 gap-[40px]">
+          {messages.length === 0 && (
+            <FakeBotMessage>
+              <OpeningLines sendMessage={sendMessage} />
+            </FakeBotMessage>
+          )}
+          {messages.map((message, index) => (
+            <PreviewMessage
+              isLoading={
+                props.status === "streaming" && messages.length - 1 === index
+              }
+              key={message.id}
+              addToolOutput={addToolOutput}
+              sendMessage={props.sendMessage}
+              message={message}
+              setMessages={setMessages}
+            />
+          ))}
+        </ConversationContent>
+      </Conversation>
+    </div>
+  );
+};

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

@@ -0,0 +1,30 @@
+import { UseChatHelpers } from '@ai-sdk/react';
+import { ChatMessage } from '@baishuyun/types';
+import { Button } from '../../ui/button';
+import { PaperclipIcon } from '../../ui/icons';
+import { memo } from 'react';
+
+function PureAttachmentsButton({
+  fileInputRef,
+  status,
+}: {
+  fileInputRef: React.MutableRefObject<HTMLInputElement | null>;
+  status: UseChatHelpers<ChatMessage>['status'];
+}) {
+  return (
+    <Button
+      className="aspect-square h-8 rounded-lg p-1 transition-colors hover:bg-accent"
+      data-testid="attachments-button"
+      disabled={status !== 'ready'}
+      onClick={(event) => {
+        event.preventDefault();
+        fileInputRef.current?.click();
+      }}
+      variant="ghost"
+    >
+      <PaperclipIcon size={14} />
+    </Button>
+  );
+}
+
+export const AttachmentsButton = memo(PureAttachmentsButton);

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

@@ -0,0 +1,42 @@
+import { TrashIcon } from '@/components/bs-ui/bs-icons';
+import type { UseChatHelpers } from '@ai-sdk/react';
+import { usePluginLifeCycleChainRunner } from '@/hooks/use-plugin-life-cycle-chain-runner';
+import { ChatMessage } from '@baishuyun/types';
+import { useCallback, useEffect } from 'react';
+import { useChatStore } from '@/store/context';
+import { IconBtn } from '@/components/bs-ui/icon-btn';
+
+export const ClearBtn = ({
+  setMessages,
+  status,
+}: {
+  setMessages: UseChatHelpers<ChatMessage>['setMessages'];
+  status: UseChatHelpers<ChatMessage>['status'];
+}) => {
+  const { exec: onBeforeClearMsg = () => {} } =
+    usePluginLifeCycleChainRunner('onBeforeMessagesClear');
+
+  const clearMsg = useCallback(() => {
+    onBeforeClearMsg(null);
+    setMessages(() => []);
+  }, [onBeforeClearMsg, setMessages]);
+
+  const { clearTimestamp } = useChatStore((store) => ({
+    clearTimestamp: store.msgClearTimestamp,
+  }));
+
+  useEffect(() => {
+    clearTimestamp && clearMsg();
+  }, [clearTimestamp]);
+
+  return (
+    <IconBtn
+      icon={<TrashIcon />}
+      disabled={status !== 'ready'}
+      onClick={(event: any) => {
+        event.preventDefault();
+        clearMsg();
+      }}
+    />
+  );
+};

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

@@ -0,0 +1,422 @@
+import type { UseChatHelpers } from '@ai-sdk/react';
+import type { UIMessage } from 'ai';
+import equal from 'fast-deep-equal';
+import {
+  type ChangeEvent,
+  type Dispatch,
+  memo,
+  type SetStateAction,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+import { cn } from '@/lib/utils';
+import {
+  PromptInput,
+  PromptInputSubmit,
+  PromptInputTextarea,
+  PromptInputToolbar,
+  PromptInputTools,
+} from './prompt-input';
+import { PreviewAttachment } from './preview-attachment';
+// import { SuggestedActions } from "./suggested-actions";
+import { ChatMessage, Attachment } from '@baishuyun/types';
+import { ArrowUpIcon, PaperclipIcon, StopIcon } from '@/components/ui/icons';
+import { Button } from '@/components/ui/button';
+import { usePluginLifeCycleChainRunner } from '@/hooks/use-plugin-life-cycle-chain-runner';
+import { ClearBtn } from './clear-btn';
+import { IconBtn } from '@/components/bs-ui/icon-btn';
+import { DividerIcon, PlaneIcon, UploadIcon } from '@/components/bs-ui/bs-icons';
+
+function setCookie(name: string, value: string) {
+  const maxAge = 60 * 60 * 24 * 365; // 1 year
+  // biome-ignore lint/suspicious/noDocumentCookie: needed for client-side cookie setting
+  document.cookie = `${name}=${encodeURIComponent(value)}; path=/; max-age=${maxAge}`;
+}
+
+function PureMultimodalInput({
+  chatId,
+  input,
+  setInput,
+  status,
+  stop,
+  attachments,
+  setAttachments,
+  messages,
+  fileUploadEndpoint,
+  setMessages,
+  sendMessage,
+  className,
+}: {
+  chatId: string;
+  input: string;
+  setInput: Dispatch<SetStateAction<string>>;
+  status: UseChatHelpers<ChatMessage>['status'];
+  stop: () => void;
+  attachments: Attachment[];
+  fileUploadEndpoint: string;
+  setAttachments: Dispatch<SetStateAction<Attachment[]>>;
+  messages: UIMessage[];
+  setMessages: UseChatHelpers<ChatMessage>['setMessages'];
+  sendMessage: UseChatHelpers<ChatMessage>['sendMessage'];
+  className?: string;
+}) {
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const adjustHeight = useCallback(() => {
+    if (textareaRef.current) {
+      textareaRef.current.style.height = '44px';
+    }
+  }, []);
+
+  useEffect(() => {
+    if (textareaRef.current) {
+      adjustHeight();
+    }
+  }, [adjustHeight]);
+
+  const hasAutoFocused = useRef(false);
+  // useEffect(() => {
+  //   if (!hasAutoFocused.current && width) {
+  //     const timer = setTimeout(() => {
+  //       textareaRef.current?.focus();
+  //       hasAutoFocused.current = true;
+  //     }, 100);
+  //     return () => clearTimeout(timer);
+  //   }
+  // }, [width]);
+
+  const resetHeight = useCallback(() => {
+    if (textareaRef.current) {
+      textareaRef.current.style.height = '44px';
+    }
+  }, []);
+
+  // const [localStorageInput, setLocalStorageInput] = useLocalStorage(
+  //   "input",
+  //   "",
+  // );
+
+  useEffect(() => {
+    if (textareaRef.current) {
+      const domValue = textareaRef.current.value;
+      // Prefer DOM value over localStorage to handle hydration
+      const finalValue = domValue || '';
+      setInput(finalValue);
+      adjustHeight();
+    }
+    // Only run once after hydration
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [adjustHeight, setInput]);
+
+  const handleInput = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setInput(event.target.value);
+  };
+
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [uploadQueue, setUploadQueue] = useState<string[]>([]);
+
+  const { exec: onBeforeSendMsg } = usePluginLifeCycleChainRunner('onBeforeMessageSend');
+
+  const submitForm = useCallback(() => {
+    // window.history.pushState({}, "", `/chat/${chatId}`);
+
+    const finalMsg = onBeforeSendMsg({
+      text: input,
+      options: {
+        body: { stage: 'design', name: 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,
+          },
+        ],
+      },
+      finalMsg.options
+    );
+
+    setAttachments([]);
+    resetHeight();
+    setInput('');
+  }, [input, setInput, attachments, sendMessage, setAttachments, chatId, resetHeight]);
+
+  const uploadFile = useCallback(async (file: File) => {
+    const formData = new FormData();
+    formData.append('file', file);
+
+    try {
+      const response = await fetch(fileUploadEndpoint, {
+        method: 'POST',
+        body: formData,
+      });
+
+      if (response.ok) {
+        const data = await response.json();
+
+        console.log(data);
+
+        return data;
+      }
+      const { error } = await response.json();
+      console.error('upload error', error);
+    } catch (_error) {}
+  }, []);
+
+  const handleFileChange = useCallback(
+    async (event: ChangeEvent<HTMLInputElement>) => {
+      const files = Array.from(event.target.files || []);
+
+      setUploadQueue(files.map((file) => file.name));
+
+      try {
+        const uploadPromises = files.map((file) => uploadFile(file));
+        const uploadedAttachments = await Promise.all(uploadPromises);
+        const successfullyUploadedAttachments = uploadedAttachments.filter(
+          (attachment) => attachment !== undefined
+        );
+
+        console.log('uploaded attachements', uploadedAttachments);
+
+        setAttachments((currentAttachments) => [
+          ...currentAttachments,
+          ...successfullyUploadedAttachments,
+        ]);
+      } catch (error) {
+        console.error('Error uploading files!', error);
+      } finally {
+        setUploadQueue([]);
+      }
+    },
+    [setAttachments, uploadFile]
+  );
+
+  const handlePaste = useCallback(
+    async (event: ClipboardEvent) => {
+      const items = event.clipboardData?.items;
+      if (!items) {
+        return;
+      }
+
+      const imageItems = Array.from(items).filter((item) => item.type.startsWith('image/'));
+
+      if (imageItems.length === 0) {
+        return;
+      }
+
+      // Prevent default paste behavior for images
+      event.preventDefault();
+
+      setUploadQueue((prev) => [...prev, 'Pasted image']);
+
+      try {
+        const uploadPromises = imageItems
+          .map((item) => item.getAsFile())
+          .filter((file): file is File => file !== null)
+          .map((file) => uploadFile(file));
+
+        const uploadedAttachments = await Promise.all(uploadPromises);
+        const successfullyUploadedAttachments = uploadedAttachments.filter(
+          (attachment) =>
+            attachment !== undefined &&
+            attachment.url !== undefined &&
+            attachment.contentType !== undefined
+        );
+
+        setAttachments((curr) => [...curr, ...(successfullyUploadedAttachments as Attachment[])]);
+      } catch (error) {
+        console.error('Error uploading pasted images:', error);
+      } finally {
+        setUploadQueue([]);
+      }
+    },
+    [setAttachments, uploadFile]
+  );
+
+  // Add paste event listener to textarea
+  useEffect(() => {
+    const textarea = textareaRef.current;
+    if (!textarea) {
+      return;
+    }
+
+    textarea.addEventListener('paste', handlePaste);
+    return () => textarea.removeEventListener('paste', handlePaste);
+  }, [handlePaste]);
+
+  return (
+    <div className={cn('relative flex w-full flex-col gap-4', className)}>
+      {/*{messages.length === 0 &&
+        attachments.length === 0 &&
+        uploadQueue.length === 0 && (
+          <SuggestedActions
+            chatId={chatId}
+            selectedVisibilityType={selectedVisibilityType}
+            sendMessage={sendMessage}
+          />
+        )}*/}
+
+      <input
+        className="-top-4 -left-4 pointer-events-none fixed size-0.5 opacity-0"
+        multiple
+        onChange={handleFileChange}
+        ref={fileInputRef}
+        tabIndex={-1}
+        type="file"
+        // accept=".csv,text/csv,text/plain,.txt"
+      />
+
+      <PromptInput
+        className="border border-[#e0e0e0] bg-background p-[10px] shadow-xs transition-all duration-200 focus-within:border-border hover:border-[#0265ff]"
+        onSubmit={(event) => {
+          event.preventDefault();
+          if (status !== 'ready') {
+            // toast.error("Please wait for the model to finish its response!");
+          } else {
+            submitForm();
+          }
+        }}
+      >
+        {(attachments.length > 0 || uploadQueue.length > 0) && (
+          <div
+            className="flex flex-row items-end gap-2 overflow-x-scroll"
+            data-testid="attachments-preview"
+          >
+            {attachments.map((attachment) => (
+              <PreviewAttachment
+                attachment={attachment}
+                key={attachment.url}
+                onRemove={() => {
+                  setAttachments((currentAttachments) =>
+                    currentAttachments.filter((a) => a.url !== attachment.url)
+                  );
+                  if (fileInputRef.current) {
+                    fileInputRef.current.value = '';
+                  }
+                }}
+              />
+            ))}
+
+            {uploadQueue.map((filename) => (
+              <PreviewAttachment
+                attachment={{
+                  url: '',
+                  name: filename,
+                  contentType: '',
+                }}
+                isUploading={true}
+                key={filename}
+              />
+            ))}
+          </div>
+        )}
+        <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]"
+            data-testid="multimodal-input"
+            disableAutoResize={true}
+            maxHeight={200}
+            minHeight={44}
+            onChange={handleInput}
+            placeholder="Send a message..."
+            ref={textareaRef}
+            rows={1}
+            value={input}
+          />
+        </div>
+        <PromptInputToolbar className="border-top-0! border-t-0! p-0 shadow-none dark:border-0 dark:border-transparent!">
+          <div></div>
+          <PromptInputTools className="gap-2.5">
+            <AttachmentsButton fileInputRef={fileInputRef} status={status} />
+            <ClearBtn setMessages={setMessages} status={status} />
+            <DividerIcon />
+            {status === 'submitted' ? (
+              <StopButton setMessages={setMessages} stop={stop} />
+            ) : (
+              <PromptInputSubmit
+                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]"
+                data-testid="send-button"
+                disabled={!input.trim() || uploadQueue.length > 0}
+                status={status}
+              >
+                <PlaneIcon />
+              </PromptInputSubmit>
+            )}
+          </PromptInputTools>
+        </PromptInputToolbar>
+      </PromptInput>
+    </div>
+  );
+}
+
+export const MultimodalInput = memo(PureMultimodalInput, (prevProps, nextProps) => {
+  if (prevProps.input !== nextProps.input) {
+    return false;
+  }
+  if (prevProps.status !== nextProps.status) {
+    return false;
+  }
+  if (!equal(prevProps.attachments, nextProps.attachments)) {
+    return false;
+  }
+
+  return true;
+});
+
+function PureAttachmentsButton({
+  fileInputRef,
+  status,
+}: {
+  fileInputRef: React.MutableRefObject<HTMLInputElement | null>;
+  status: UseChatHelpers<ChatMessage>['status'];
+}) {
+  return (
+    <IconBtn
+      icon={<UploadIcon />}
+      disabled={status !== 'ready'}
+      onClick={(event: any) => {
+        event.preventDefault();
+        fileInputRef.current?.click();
+      }}
+    />
+  );
+}
+
+const AttachmentsButton = memo(PureAttachmentsButton);
+
+function PureStopButton({
+  stop,
+  setMessages,
+}: {
+  stop: () => void;
+  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"
+      onClick={(event: any) => {
+        event.preventDefault();
+        stop();
+        setMessages((messages) => messages);
+      }}
+    >
+      <div className="rounded-[2px] w-[8px] h-[8px] bg-white flex-shrink-0" />
+    </Button>
+  );
+}
+
+const StopButton = memo(PureStopButton);