init

src/pages/.cursor/rules/pages_rules.mdc

@@ -0,0 +1,5 @@
+---
+description:
+globs:
+alwaysApply: false
+---

src/pages/chat/MessageItem/components/EditActions.tsx

@@ -0,0 +1,48 @@
+import { Button, ButtonGroup, cn } from '@heroui/react';
+
+export type EditActionsProps = {
+  isUser: boolean;
+  isEditing: boolean;
+  onSaveEdit: () => void;
+  onCancelEdit: () => void;
+};
+
+export const EditActions = ({
+  isUser,
+  isEditing,
+  onSaveEdit,
+  onCancelEdit,
+}: EditActionsProps) => {
+  if (!isEditing) return null;
+
+  return (
+    <div
+      className={cn(
+        `flex w-full row-start-2 col-start-1 col-end-4`,
+        isUser ? 'justify-end' : 'justify-start',
+      )}
+    >
+      <ButtonGroup
+        className="bg-white/15 text-default rounded-full"
+        radius="full"
+        size="sm"
+        variant="light"
+      >
+        <Button
+          className="text-default"
+          size="sm"
+          onPress={onSaveEdit}
+        >
+          保存
+        </Button>
+        <Button
+          className="text-default"
+          size="sm"
+          onPress={onCancelEdit}
+        >
+          取消
+        </Button>
+      </ButtonGroup>
+    </div>
+  );
+};

src/pages/chat/MessageItem/components/MessageActions.tsx

@@ -0,0 +1,124 @@
+import {
+  Button,
+  ButtonGroup,
+  cn,
+  Dropdown,
+  DropdownItem,
+  DropdownMenu,
+  DropdownTrigger,
+} from '@heroui/react';
+import { ChevronLeftIcon, ChevronRightIcon, Ellipsis } from 'lucide-react';
+import React from 'react';
+import { useMessageActions } from './useMessageActions';
+
+export type LastMessageActionsProps = {
+  isUser: boolean;
+  isLastMsg: boolean;
+  isFirstMsg: boolean;
+  isStreaming: boolean;
+  isEditing: boolean;
+  swipes: string[];
+  activeSwipeId: number;
+  onRegenerate: (() => Promise<void>) | undefined;
+  onContinue: (() => Promise<void>) | undefined;
+  onEditButtonClick: () => void;
+  onSwipe: (direction: 'prev' | 'next') => void;
+  onMessageTextClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+  onDelete: () => void;
+};
+
+export const MessageActions = ({
+  isUser,
+  isLastMsg,
+  isFirstMsg,
+  isStreaming,
+  isEditing,
+  swipes,
+  activeSwipeId,
+  onRegenerate,
+  onContinue,
+  onEditButtonClick,
+  onSwipe,
+  onMessageTextClick,
+  onDelete,
+}: LastMessageActionsProps) => {
+  const dropdownItems = useMessageActions({
+    isLastMsg,
+    onEditButtonClick,
+    onRegenerate,
+    onContinue,
+    onDelete,
+  });
+
+  if (isStreaming || isUser || isEditing) return null;
+
+  return (
+    <div
+      className={cn(
+        'message-actions flex justify-between row-start-2 col-start-1 col-end-4',
+      )}
+      role="presentation"
+      onClick={onMessageTextClick} /* Stop propagation */
+    >
+      <div className="flex items-start">
+        {!isFirstMsg && (
+          <Dropdown placement="top-start" className="dark" size="sm">
+            <DropdownTrigger>
+              <Button
+                variant="light"
+                size="sm"
+                className="bg-white/15 text-default min-w-10"
+              >
+                <Ellipsis size={14}/>
+              </Button>
+            </DropdownTrigger>
+            <DropdownMenu items={dropdownItems}>
+              {(item) => (
+                <DropdownItem
+                  key={item.key}
+                  color={item.color}
+                  className={item.className}
+                  onPress={item.onPress}
+                >
+                  {item.label}
+                </DropdownItem>
+              )}
+            </DropdownMenu>
+          </Dropdown>
+        )}
+      </div>
+      <div className="flex items-end">
+        {isLastMsg && swipes.length > 1 && (
+          <ButtonGroup
+            className="bg-white/15 rounded-full backdrop-blur-sm text-default"
+            radius="full"
+            size="sm"
+            variant="light"
+          >
+            <Button
+              className="min-w-8 px-2 text-default"
+              isDisabled={swipes.length <= 1}
+              size="sm"
+              onPress={() => onSwipe('prev')}
+            >
+              <ChevronLeftIcon className="w-4 h-4" />
+            </Button>
+            <div className="flex items-center px-1 text-xs">
+              {swipes.length > 0
+                ? `${activeSwipeId + 1}/${swipes.length}`
+                : '1/1'}
+            </div>
+            <Button
+              className="min-w-8 px-2 text-default"
+              isDisabled={swipes.length <= 1}
+              size="sm"
+              onPress={() => onSwipe('next')}
+            >
+              <ChevronRightIcon className="w-4 h-4" />
+            </Button>
+          </ButtonGroup>
+        )}
+      </div>
+    </div>
+  );
+};

src/pages/chat/MessageItem/components/MessageBubble.tsx

@@ -0,0 +1,99 @@
+import {
+  cn,
+  Dropdown,
+  DropdownItem,
+  DropdownMenu,
+  DropdownTrigger,
+  Spinner,
+} from '@heroui/react';
+import { type Message as BaseMessage, MdRenderer } from '@mujian/js-sdk/react';
+import { MessageEditArea } from './MessageEditArea';
+import { useMessageActions } from './useMessageActions';
+
+export type MessageBubbleProps = {
+  message: BaseMessage;
+  isUser: boolean;
+  isEditing: boolean;
+  editedMessage: string;
+  onEditChange: (content: string) => void;
+  isStreaming: boolean;
+  currentMessage: string;
+  onEditButtonClick: () => void;
+  onDelete: () => void;
+  onEditAreaShow: () => void;
+};
+
+export const MessageBubble = ({
+  isUser,
+  isEditing,
+  editedMessage,
+  onEditChange,
+  isStreaming,
+  currentMessage,
+  onEditButtonClick,
+  onDelete,
+  onEditAreaShow,
+}: MessageBubbleProps) => {
+  const dropdownItems = useMessageActions({
+    isLastMsg: false,
+    onEditButtonClick,
+    onDelete,
+  });
+
+  return (
+    <div
+      className={cn(
+        'row-start-1 col-start-1 col-end-4 flex flex-col size-full min-w-0 message-wrapper',
+        isUser ? 'items-end' : 'items-stretch',
+      )}
+    >
+      {!isEditing ? (
+        isUser ? (
+          <Dropdown placement="top-end" className="dark">
+            <DropdownTrigger>
+              <div
+                className={cn(
+                  'h-full rounded-xl dark:prose-invert text-blue-100 p-4 bg-black/50',
+                  {
+                    'rounded-br-sm': isUser,
+                  },
+                )}
+                role="presentation"
+              >
+                <MdRenderer content={currentMessage} />
+              </div>
+            </DropdownTrigger>
+            <DropdownMenu items={dropdownItems}>
+              {(item) => (
+                <DropdownItem
+                  key={item.key}
+                  color={item.color}
+                  className={item.className}
+                  onPress={item.onPress}
+                >
+                  {item.label}
+                </DropdownItem>
+              )}
+            </DropdownMenu>
+          </Dropdown>
+        ) : (
+          <div className="py-4">
+            <MdRenderer content={currentMessage} />
+          </div>
+        )
+      ) : (
+        <MessageEditArea
+          isUser={isUser}
+          editedMessage={editedMessage}
+          onEditChange={onEditChange}
+          onEditAreaShow={onEditAreaShow}
+        />
+      )}
+      {isStreaming && !currentMessage?.length && (
+        <div className="flex w-full items-center">
+          <Spinner variant="dots" />
+        </div>
+      )}
+    </div>
+  );
+};

src/pages/chat/MessageItem/components/MessageEditArea.tsx

@@ -0,0 +1,64 @@
+import { cn } from '@heroui/react';
+import { useEffect, useRef, useState } from 'react';
+
+export type MessageEditAreaProps = {
+  isUser: boolean;
+  editedMessage: string;
+  onEditChange: (content: string) => void;
+  onEditAreaShow: () => void;
+};
+
+export const MessageEditArea = ({
+  isUser,
+  editedMessage,
+  onEditChange,
+  onEditAreaShow,
+}: MessageEditAreaProps) => {
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const [wrapHeight, setWrapHeight] = useState(0);
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: useMount
+  useEffect(() => {
+    const t = textareaRef.current;
+    if (t) {
+      const parent = t.parentElement;
+      console.log(parent);
+
+      t.style.height = 'auto';
+      t.style.height = t.scrollHeight + 'px';
+      if (parent) {
+        parent.style.height = t?.scrollHeight + 'px';
+      }
+
+      t.focus();
+      // 光标移到最后
+      const length = t.value.length;
+      t.setSelectionRange(length, length);
+      onEditAreaShow();
+    }
+  }, []);
+
+  return (
+    <div
+      className="w-full"
+      style={{
+        height: wrapHeight,
+      }}
+    >
+      <textarea
+        ref={textareaRef}
+        className={cn(
+          'w-full outline-none resize-none h-fit overflow-hidden p-4 bg-background rounded-xl text-[16px]',
+          isUser ? 'rounded-br-sm' : 'rounded-bl-sm',
+        )}
+        value={editedMessage}
+        onChange={(e) => {
+          onEditChange(e.target.value);
+          e.target.style.height = '5px';
+          e.target.style.height = `${e.target.scrollHeight}px`;
+          setWrapHeight(e.target.scrollHeight);
+        }}
+      />
+    </div>
+  );
+};

src/pages/chat/MessageItem/components/useMessageActions.ts

@@ -0,0 +1,61 @@
+export type DropdownItem = {
+  key: string;
+  label: string;
+  onPress: () => void | Promise<void>;
+  color?:
+    | 'default'
+    | 'primary'
+    | 'secondary'
+    | 'success'
+    | 'warning'
+    | 'danger';
+  className?: string;
+};
+
+export type UseDropdownItemsProps = {
+  isLastMsg: boolean;
+  onEditButtonClick: () => void;
+  onRegenerate?: (() => Promise<void>) | undefined;
+  onContinue?: (() => Promise<void>) | undefined;
+  onDelete: () => void;
+};
+
+export const useMessageActions = ({
+  isLastMsg,
+  onEditButtonClick,
+  onRegenerate,
+  onContinue,
+  onDelete,
+}: UseDropdownItemsProps): DropdownItem[] => {
+  const dropdownItems: DropdownItem[] = [
+    {
+      key: 'edit',
+      label: '编辑',
+      onPress: onEditButtonClick,
+    },
+    ...(isLastMsg
+      ? [
+          {
+            key: 'regenerate',
+            label: '重说',
+            onPress: async () => await onRegenerate?.(),
+          },
+          {
+            key: 'continue',
+            label: '继续',
+            onPress: async () => await onContinue?.(),
+          },
+        ]
+      : []),
+    {
+      key: 'delete',
+      label: '删除',
+      onPress: onDelete,
+      color: 'danger',
+      className: 'text-danger',
+    },
+  ];
+
+  return dropdownItems;
+};
+

src/pages/chat/MessageItem/index.tsx

@@ -0,0 +1,217 @@
+import { cn } from '@heroui/react';
+import { type Message as BaseMessage } from '@mujian/js-sdk/react';
+import React, { type MouseEventHandler } from 'react';
+import { EditActions } from './components/EditActions';
+import { MessageActions } from './components/MessageActions';
+import { MessageBubble } from './components/MessageBubble';
+
+export type MessageItemProps = {
+  message: BaseMessage;
+  originalMessage: BaseMessage;
+
+  index: number;
+  avatar: string;
+  name: string;
+  isLastMsg?: boolean;
+  isFirstMsg?: boolean;
+
+  onRegenerate?: () => Promise<void>;
+  onContinue?: () => Promise<void>;
+  onDelete: (messageId: string) => Promise<void>;
+  onEdit: (messageId: string, content: string) => Promise<void>;
+  onSwipe: (messageId: string, swipeId: number) => Promise<void>;
+  sendMessage?: (message: string) => Promise<void>;
+};
+
+// Add comparison function for React.memo
+const arePropsEqual = (
+  prevProps: MessageItemProps,
+  nextProps: MessageItemProps,
+) => {
+  // 如果 swipes 长度不同，直接返回 false
+  if (prevProps.message.swipes?.length !== nextProps.message.swipes?.length) {
+    return false;
+  }
+  // 如果 swipes 内容不同，直接返回 false
+  if (
+    prevProps.message.swipes?.some(
+      (swipe, index) => swipe !== nextProps.message.swipes[index],
+    )
+  ) {
+    return false;
+  }
+
+  // 其他属性比较
+  return (
+    prevProps.avatar === nextProps.avatar &&
+    prevProps.message.content === nextProps.message.content &&
+    prevProps.message.role === nextProps.message.role &&
+    prevProps.message.isStreaming === nextProps.message.isStreaming &&
+    prevProps.name === nextProps.name &&
+    prevProps.isLastMsg === nextProps.isLastMsg &&
+    prevProps.message.sendAt === nextProps.message.sendAt &&
+    prevProps.message.activeSwipeId === nextProps.message.activeSwipeId &&
+    prevProps.message.id === nextProps.message.id &&
+    prevProps.index === nextProps.index
+  );
+};
+
+export const MessageItem = React.memo((props: MessageItemProps) => {
+  const {
+    message,
+    originalMessage,
+
+    // index,
+    // avatar,
+    // name,
+    isLastMsg,
+    isFirstMsg,
+    onRegenerate,
+    onContinue,
+    onDelete,
+    onEdit,
+    onSwipe,
+  } = props;
+  const {
+    id,
+
+    role,
+    isStreaming,
+
+    content,
+    swipes = [],
+    activeSwipeId,
+
+    // sendAt,
+  } = message;
+  const isUser = role === 'user';
+
+  const messageRef = React.useRef<HTMLDivElement>(null); // 使用 useRef 获取当前组件的引用
+  const [isEditing, setIsEditing] = React.useState(false); // State to toggle edit mode
+  const [editedMessage, setEditedMessage] = React.useState(content);
+
+  const renderedMessage = isUser ? content : swipes[activeSwipeId];
+
+  // 滚动到消息可见位置的通用函数
+  const scrollMessageIntoView = (
+    alignToBlock: ScrollLogicalPosition = 'end',
+    behavior: ScrollBehavior = 'instant',
+  ) => {
+    if (messageRef.current) {
+      messageRef.current.scrollIntoView({
+        behavior: behavior,
+        block: alignToBlock,
+      });
+    }
+  };
+
+  const handleSaveEdit = async () => {
+    if (id && activeSwipeId !== undefined) {
+      await onEdit(id, editedMessage);
+      setIsEditing(false);
+
+      setTimeout(() => scrollMessageIntoView(), 50);
+    }
+  };
+
+  // Separate function to handle message deletion
+  const handleDeleteMessage = async () => {
+    if (id) {
+      onDelete(id);
+    }
+  };
+  // console.log("content", index, content);
+
+  // 确保 currentSwipeId 在有效范围内
+  const validSwipeId = Math.min(Math.max(0, activeSwipeId), swipes.length - 1);
+
+  const handleSwipe = async (direction: 'prev' | 'next') => {
+    if (swipes.length <= 1) return;
+
+    // 简化计算逻辑，直接使用模运算确保能够循环浏览所有页面
+    const newSwipeId =
+      direction === 'prev'
+        ? (activeSwipeId - 1 + swipes.length) % swipes.length
+        : (activeSwipeId + 1) % swipes.length;
+
+    await onSwipe(id, newSwipeId);
+
+    scrollMessageIntoView();
+  };
+
+  // Stop propagation for message text clicks
+  const handleMessageTextClick: MouseEventHandler<HTMLDivElement> = (e) => {
+    e.stopPropagation();
+  };
+
+  const handleEditButtonClick = async () => {
+    setIsEditing(true);
+    if (isUser) {
+      setEditedMessage(originalMessage.content);
+    } else {
+      setEditedMessage(originalMessage.swipes[validSwipeId]);
+    }
+  };
+
+  return (
+    <div
+      key={`message-${activeSwipeId}`}
+      ref={messageRef} // 将 ref 绑定到根容器
+      className={cn(
+        'grid items-end gap-2 mb-2 w-full grid-cols-[32px_1fr_32px]',
+      )}
+      onContextMenu={(event) => {
+        // 按ctrl点击时打印ID
+        if (event.ctrlKey) {
+          event.preventDefault();
+          console.log('Message ID:', id);
+        }
+      }}
+    >
+      <MessageBubble
+        message={message}
+        isUser={isUser}
+        isEditing={isEditing}
+        editedMessage={editedMessage}
+        onEditChange={setEditedMessage}
+        isStreaming={isStreaming}
+        currentMessage={renderedMessage}
+        onEditButtonClick={handleEditButtonClick}
+        onDelete={handleDeleteMessage}
+        onEditAreaShow={() => scrollMessageIntoView()}
+      />
+      <EditActions
+        isUser={isUser}
+        isEditing={isEditing}
+        onSaveEdit={handleSaveEdit}
+        onCancelEdit={() => {
+          setIsEditing(false);
+          setEditedMessage(
+            isUser
+              ? originalMessage.content
+              : originalMessage.swipes[activeSwipeId],
+          );
+          // 滚动到消息位置
+          setTimeout(() => scrollMessageIntoView('nearest', 'smooth'), 10);
+        }}
+      />
+      <MessageActions
+        isUser={isUser}
+        isLastMsg={Boolean(isLastMsg)}
+        isFirstMsg={Boolean(isFirstMsg)}
+        isStreaming={isStreaming}
+        isEditing={isEditing}
+        swipes={swipes}
+        activeSwipeId={activeSwipeId}
+        onRegenerate={onRegenerate}
+        onContinue={onContinue}
+        onEditButtonClick={handleEditButtonClick}
+        onSwipe={handleSwipe}
+        onMessageTextClick={handleMessageTextClick}
+        onDelete={handleDeleteMessage}
+      />
+    </div>
+  );
+}, arePropsEqual);
+
+MessageItem.displayName = 'Message';

src/pages/chat/MessageList.tsx

@@ -0,0 +1,128 @@
+import type { Message as MessageType } from '@mujian/js-sdk/react';
+import { Thread, type VListHandle } from '@mujian/js-sdk/react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { useGlobalStore } from '@/store/global';
+import { MessageItem } from './MessageItem/';
+
+export type MsgProps = {
+  data: MessageType[];
+  onRegenerate?: () => Promise<void>;
+  sendMessage?: (message: string) => Promise<void>;
+  onContinue?: () => Promise<void>;
+  onDelete: (messageId: string) => Promise<void>;
+  onEdit: (messageId: string, content: string) => Promise<void>;
+  onSwipe: (messageId: string, swipeId: number) => Promise<void>;
+};
+
+const OVERSCAN = 10;
+
+export const MessageList = React.memo(
+  ({
+    data,
+    onRegenerate,
+    sendMessage,
+    onContinue,
+    onDelete,
+    onEdit,
+    onSwipe,
+  }: MsgProps) => {
+    const prevLengthRef = useRef(0);
+    const { activePersona, projectInfo } = useGlobalStore();
+    const vListRef = useRef<VListHandle>(null);
+    const [visibleRange, setVisibleRange] = useState<[number, number]>([0, 0]);
+
+    useEffect(() => {
+      const vl = vListRef.current;
+      if (!vl) {
+        return;
+      }
+      const isScrolledBottom = () =>
+        vl.viewportSize + vl.scrollOffset + 16 >= vl.scrollSize;
+      const isFirstLoading = prevLengthRef.current === 0;
+
+      const shouldScroll = [
+        isFirstLoading, // 首次加载
+        data.length > prevLengthRef.current, // 新消息
+        data[data.length - 1]?.isStreaming && isScrolledBottom(), // 正在生成
+      ].some(Boolean);
+
+      if (shouldScroll) {
+        vListRef.current?.scrollTo(isFirstLoading ? 99999999 : vl.scrollSize);
+      }
+
+      prevLengthRef.current = data.length;
+    }, [data]);
+
+    const onScroll = () => {
+      const vl = vListRef.current;
+      if (!vl) {
+        return;
+      }
+
+      const startIndex = vl.findStartIndex();
+      const endIndex = vl.findEndIndex();
+      setVisibleRange([startIndex, endIndex]);
+    };
+
+    const keepMountedList = useMemo(() => {
+      if (visibleRange[0] === 0 && visibleRange[1] === 0) {
+        return [];
+      }
+
+      const overscan = 10;
+      const from = Math.max(visibleRange[0] - overscan, 0);
+      const to = Math.min(visibleRange[1] + overscan, data.length - 1);
+      const array = [];
+      for (let i = from; i <= to; i++) {
+        array.push(i);
+      }
+      return array;
+    }, [visibleRange[0], visibleRange[1], data.length]);
+
+    return (
+      <Thread.MessageList
+        ref={vListRef}
+        messages={data}
+        vListProps={{
+          reverse: false,
+          overscan: OVERSCAN,
+          keepMounted: keepMountedList,
+          onScroll,
+        }}
+      >
+        {(props) => (
+          <Thread.MessageItem key={props.message.id} {...props}>
+            {(msg, originalMessage) => (
+              <MessageItem
+                key={msg.id}
+                message={msg}
+                originalMessage={originalMessage}
+                avatar={
+                  msg.role === 'user'
+                    ? activePersona?.avatarUrl || ''
+                    : projectInfo?.coverImageUrl || ''
+                }
+                name={
+                  msg.role === 'user'
+                    ? activePersona?.name || ''
+                    : projectInfo?.title || ''
+                }
+                index={props.index}
+                isFirstMsg={props.index === 0}
+                isLastMsg={props.depth === 0}
+                sendMessage={sendMessage}
+                onContinue={onContinue}
+                onDelete={onDelete}
+                onEdit={onEdit}
+                onSwipe={onSwipe}
+                onRegenerate={onRegenerate}
+              />
+            )}
+          </Thread.MessageItem>
+        )}
+      </Thread.MessageList>
+    );
+  },
+);
+
+MessageList.displayName = 'MessageList';

src/pages/chat/MsgSend.tsx

@@ -0,0 +1,107 @@
+import { Button, Textarea } from '@heroui/react';
+import { CircleStopIcon, SendIcon } from 'lucide-react';
+
+interface Props {
+  onSend: (query: string) => void;
+  onStop: () => void;
+  running?: boolean;
+  value: string;
+  onChange: (value: string) => void;
+}
+
+export const isMobile = ((): boolean => {
+  const userAgent =
+    typeof window !== 'undefined'
+      ? window?.navigator?.userAgent?.toLowerCase()
+      : '';
+  const mobileRegex =
+    /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini|mobile|tablet/i;
+
+  return mobileRegex.test(userAgent);
+})();
+
+export const MsgSend = ({
+  onSend,
+  onStop,
+  running = false,
+  value,
+  onChange,
+}: Props) => {
+  const isEmptyInput = value.trim().length === 0;
+
+  const handleSend = () => {
+    if (value) {
+      onSend(value);
+      onChange(''); // 发送后清空输入框
+    }
+  };
+
+  return (
+    <>
+      <Textarea
+        className="dark"
+        classNames={{
+          label: 'text-black/50 dark:text-white/90',
+          input: [
+            'bg-transparent',
+            'text-black/90 dark:text-white/90',
+            'placeholder:text-default-700/50 dark:placeholder:text-white/60',
+          ],
+          innerWrapper: 'bg-transparent items-center',
+          inputWrapper: ['shadow-xl', 'bg-dark/40', 'dark:bg-black/40'],
+          mainWrapper: 'px-2',
+        }}
+        disabled={running}
+        endContent={
+          running ? (
+            <Button
+              isIconOnly
+              color="primary"
+              radius="full"
+              size="sm"
+              onPress={() => {
+                onStop();
+              }}
+            >
+              <CircleStopIcon className="w-5 h-5" />
+            </Button>
+          ) : (
+            <Button
+              isIconOnly
+              color="primary"
+              radius="full"
+              size="sm"
+              onPress={handleSend}
+              isDisabled={isEmptyInput}
+            >
+              <SendIcon className="w-5 h-5" />
+            </Button>
+          )
+        }
+        maxLength={1000}
+        maxRows={4}
+        minRows={1}
+        placeholder={running ? '正在生成...' : '按 Enter 发送'}
+        radius="lg"
+        size="lg"
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        onKeyDown={(e) => {
+          if (
+            e.key === 'Enter' &&
+            !isMobile &&
+            !e.ctrlKey &&
+            !e.shiftKey &&
+            !e.altKey &&
+            !e.metaKey &&
+            !e.nativeEvent.isComposing &&
+            !isEmptyInput
+          ) {
+            e.preventDefault();
+            handleSend();
+          }
+        }}
+      />
+    </>
+  );
+};

src/pages/chat/index.tsx

@@ -0,0 +1,169 @@
+import { Alert, ScrollShadow, Spinner } from '@heroui/react';
+import { useChat, useMujian } from '@mujian/js-sdk/react';
+import { useEffect, useMemo, useState } from 'react';
+import { useGlobalStore } from '@/store/global';
+import { MessageList } from './MessageList';
+import { MsgSend } from './MsgSend';
+
+// 扩展Window接口以包含chat对象
+declare global {
+  interface Window {
+    $mj_engine: {
+      chat: {
+        complete?: (message: string) => Promise<void>;
+      };
+    };
+  }
+}
+
+window.$mj_engine = {
+  chat: {},
+};
+
+export const Chat = () => {
+  const { init, projectInfo } = useGlobalStore();
+  const mujian = useMujian();
+  const [inputValue, setInputValue] = useState('');
+  const {
+    messages,
+    status,
+    error,
+    append,
+    continueGenerate,
+    regenerate,
+    stop,
+    deleteMessage,
+    editMessage,
+    setSwipe,
+  } = useChat({
+    onError: (e) => {
+      console.error(e);
+    },
+  });
+
+  // 自定义删除消息函数
+  const handleDeleteMessage = async (messageId: string) => {
+    // 找到要删除的消息
+    const messageIndex = messages.findIndex((msg) => msg.id === messageId);
+    if (messageIndex === -1) return;
+
+    let deletedUserMessageContent = '';
+
+    // 检查前一条消息是否是用户消息且被删除的消息是AI消息
+    if (messageIndex > 0 && messages[messageIndex].role === 'assistant') {
+      const prevMessage = messages[messageIndex - 1];
+      if (prevMessage.role === 'user') {
+        // 保存用户消息内容
+        deletedUserMessageContent = prevMessage.content;
+        // 同时删除前一条用户消息
+        deleteMessage(prevMessage.id);
+      }
+    }
+
+    // 删除当前消息
+    await deleteMessage(messageId);
+
+    // 如果有删除的用户消息，将其内容填入发送框
+    if (deletedUserMessageContent) {
+      setInputValue(deletedUserMessageContent);
+    }
+  };
+
+  const paddingTop = useMemo(() => {
+    const params = new URLSearchParams(window.location.search);
+    return parseInt(params.get('insetTop') || '0', 10);
+  }, []);
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: onMount ONLY
+  useEffect(() => {
+    init(mujian);
+  }, []);
+
+  const onSend = append;
+
+  // 将chat对象挂载到window上
+  useEffect(() => {
+    window.$mj_engine.chat.complete = async (message: string) => {
+      await onSend(message);
+    };
+
+    return () => {
+      delete window.$mj_engine.chat.complete;
+    };
+  }, [onSend]);
+
+  const handleInputChange = (value: string) => {
+    setInputValue(value);
+  };
+
+  if (status === 'uninitialized') {
+    return (
+      <div className="w-full h-full flex justify-center items-center">
+        <Spinner />
+      </div>
+    );
+  }
+
+  const errorMessage =
+    Boolean(error) &&
+    (typeof error === 'object' &&
+    error &&
+    'message' in error &&
+    typeof error.message === 'string'
+      ? error.message
+      : '哎呀，发生了未知错误，刷新页面再试试吧~');
+
+  return (
+    <div className="size-full relative">
+      <div
+        className="h-full opacity-30 blur-xs object-cover absolute top-0 left-1/2 w-[min(640px,100%)] -translate-x-1/2 bg-cover bg-top bg-no-repeat [mask-image:linear-gradient(to_right,transparent,black_100px,black_calc(100%-100px),transparent)]"
+        style={{
+          backgroundImage: projectInfo
+            ? `url(${projectInfo.coverImageUrl})`
+            : undefined,
+        }}
+      />
+      <div
+        className="size-full z-10 p-3 flex flex-col"
+        style={{
+          paddingTop,
+        }}
+      >
+        <ScrollShadow hideScrollBar className="h-full" size={20}>
+          <MessageList
+            data={messages}
+            sendMessage={async (q) => {
+              await onSend(q);
+            }}
+            onContinue={continueGenerate}
+            onDelete={handleDeleteMessage}
+            onEdit={editMessage}
+            onSwipe={setSwipe}
+            onRegenerate={regenerate}
+          />
+          {errorMessage && (
+            <Alert
+              hideIcon
+              className="mt-2 mb-6"
+              classNames={{
+                mainWrapper: 'min-h-4 ml-0',
+              }}
+              color="danger"
+              title={errorMessage}
+              variant="bordered"
+            />
+          )}
+        </ScrollShadow>
+        <div className="flex flex-col gap-2 mt-2">
+          <MsgSend
+            running={status === 'streaming'}
+            onSend={onSend}
+            onStop={stop}
+            value={inputValue}
+            onChange={handleInputChange}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};