@sciol/xyzen 0.1.2 → 0.1.4

package/src/components/layouts/XyzenChat.tsx

@@ -0,0 +1,212 @@
+"use client";
+import { useXyzen, type Message } from "@/store/xyzenStore";
+import { ArrowPathIcon } from "@heroicons/react/24/outline";
+import { AnimatePresence } from "framer-motion";
+import { useCallback, useEffect, useRef, useState } from "react";
+
+import ChatBubble from "./components/ChatBubble";
+import ChatInput from "./components/ChatInput";
+import EmptyChat from "./components/EmptyChat";
+import WelcomeMessage from "./components/WelcomeMessage";
+
+export default function XyzenChat() {
+  const {
+    activeChatChannel,
+    channels,
+    assistants,
+    sendMessage,
+    connectToChannel,
+  } = useXyzen();
+
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+  const messagesContainerRef = useRef<HTMLDivElement>(null);
+  const [autoScroll, setAutoScroll] = useState(true);
+  const [isRetrying, setIsRetrying] = useState(false);
+  const [inputHeight, setInputHeight] = useState(80);
+
+  const messagePaddingBottom = inputHeight + 36;
+  const scrollButtonBottom = inputHeight + 48;
+
+  const currentChannel = activeChatChannel ? channels[activeChatChannel] : null;
+  const currentAssistant = currentChannel?.assistantId
+    ? assistants.find((a) => a.id === currentChannel.assistantId)
+    : null;
+  const messages: Message[] = currentChannel?.messages || [];
+  const connected = currentChannel?.connected || false;
+  const error = currentChannel?.error || null;
+
+  const scrollToBottom = useCallback(
+    (force = false) => {
+      if (!autoScroll && !force) return;
+      setTimeout(() => {
+        messagesContainerRef.current?.scrollTo({
+          top: messagesContainerRef.current.scrollHeight,
+          behavior: force ? "auto" : "smooth",
+        });
+      }, 50);
+    },
+    [autoScroll],
+  );
+
+  const handleScroll = () => {
+    if (messagesContainerRef.current) {
+      const { scrollTop, scrollHeight, clientHeight } =
+        messagesContainerRef.current;
+      const isNearBottom = scrollHeight - scrollTop - clientHeight < 80;
+      setAutoScroll(isNearBottom);
+    }
+  };
+
+  const handleSendMessage = (inputMessage: string) => {
+    if (!inputMessage.trim() || !activeChatChannel) return;
+    sendMessage(inputMessage);
+    setAutoScroll(true);
+    setTimeout(() => scrollToBottom(true), 100);
+  };
+
+  const handleRetryConnection = () => {
+    if (!currentChannel) return;
+    setIsRetrying(true);
+    connectToChannel(currentChannel.sessionId, currentChannel.id);
+    setTimeout(() => {
+      setIsRetrying(false);
+    }, 2000);
+  };
+
+  useEffect(() => {
+    if (autoScroll) {
+      scrollToBottom();
+    }
+  }, [messages.length, autoScroll, scrollToBottom]);
+
+  useEffect(() => {
+    const container = messagesContainerRef.current;
+    if (container) {
+      scrollToBottom(true);
+      container.addEventListener("scroll", handleScroll, { passive: true });
+      return () => container.removeEventListener("scroll", handleScroll);
+    }
+  }, [activeChatChannel, scrollToBottom]);
+
+  const handleInputHeightChange = (newHeight: number) => {
+    setInputHeight(newHeight);
+    if (autoScroll) {
+      setTimeout(() => scrollToBottom(true), 100);
+    }
+  };
+
+  if (!activeChatChannel) {
+    return <EmptyChat />;
+  }
+
+  return (
+    <div className="flex h-full flex-col">
+      {currentAssistant ? (
+        <div className="flex-shrink-0 px-4 pb-2">
+          <h2 className="text-lg font-medium text-neutral-800 dark:text-white">
+            {currentAssistant.title}
+          </h2>
+          <p className="text-sm text-neutral-500 dark:text-neutral-400">
+            {currentAssistant.description}
+          </p>
+        </div>
+      ) : (
+        <div className="flex-shrink-0 px-4 pb-2">
+          <h2 className="text-lg font-medium text-neutral-800 dark:text-white">
+            自由对话
+          </h2>
+          <p className="text-sm text-neutral-500 dark:text-neutral-400">
+            您可以在这里与AI助手自由讨论任何话题
+          </p>
+        </div>
+      )}
+
+      {!connected && (
+        <div className="mb-1 flex flex-shrink-0 items-center justify-between rounded-md bg-amber-50 px-3 py-1.5 dark:bg-amber-900/20">
+          <span className="text-xs text-amber-700 dark:text-amber-200">
+            {error || "正在连接聊天服务..."}
+          </span>
+          <button
+            onClick={handleRetryConnection}
+            disabled={isRetrying}
+            className="ml-2 rounded-md p-1 text-amber-700 hover:bg-amber-100 focus:outline-none focus:ring-1 focus:ring-amber-500 dark:text-amber-300 dark:hover:bg-amber-800/30"
+            title="重试连接"
+          >
+            <ArrowPathIcon
+              className={`h-4 w-4 ${isRetrying ? "animate-spin" : ""}`}
+            />
+          </button>
+        </div>
+      )}
+
+      <div className="relative flex h-[calc(100vh-12rem)] flex-grow flex-col">
+        <div
+          ref={messagesContainerRef}
+          className="absolute inset-0 overflow-y-auto rounded-lg bg-neutral-50 pt-6 dark:bg-black"
+          style={{
+            scrollbarWidth: "thin",
+            scrollbarColor: "rgba(156,163,175,0.5) transparent",
+            paddingBottom: `${messagePaddingBottom}px`,
+          }}
+          onScroll={handleScroll}
+        >
+          <div className="px-3">
+            {messages.length === 0 ? (
+              <WelcomeMessage />
+            ) : (
+              <div className="space-y-6">
+                <AnimatePresence>
+                  {messages.map((msg) => (
+                    <ChatBubble key={msg.id} message={msg} />
+                  ))}
+                </AnimatePresence>
+                <div ref={messagesEndRef} className="h-4" />
+              </div>
+            )}
+          </div>
+        </div>
+
+        {!autoScroll && messages.length > 0 && (
+          <button
+            onClick={() => {
+              setAutoScroll(true);
+              scrollToBottom(true);
+            }}
+            className="absolute right-4 z-20 rounded-full bg-indigo-600 p-2 text-white shadow-md transition-colors hover:bg-indigo-700"
+            style={{
+              bottom: `${scrollButtonBottom}px`,
+            }}
+            aria-label="Scroll to bottom"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              className="h-4 w-4"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M19 14l-7 7m0 0l-7-7m7 7V3"
+              />
+            </svg>
+          </button>
+        )}
+
+        <div
+          className="absolute bottom-0 left-0 right-0 rounded-b-lg border-t border-neutral-200 bg-white p-2 shadow-[0_-2px_5px_rgba(0,0,0,0.05)] dark:border-neutral-800 dark:bg-black dark:shadow-[0_-2px_5px_rgba(0,0,0,0.2)]"
+          style={{ zIndex: 15 }}
+        >
+          <ChatInput
+            onSendMessage={handleSendMessage}
+            disabled={!connected}
+            placeholder="输入消息..."
+            onHeightChange={handleInputHeightChange}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/layouts/XyzenHistory.tsx

@@ -0,0 +1,117 @@
+"use client";
+
+import { formatTime } from "@/lib/formatDate";
+import { type ChatHistoryItem, useXyzen } from "@/store/xyzenStore";
+import { MapPinIcon } from "@heroicons/react/20/solid";
+import { ChevronRightIcon, ClockIcon } from "@heroicons/react/24/outline";
+import { useEffect } from "react";
+
+export default function XyzenHistory() {
+  const {
+    chatHistory,
+    chatHistoryLoading,
+    fetchChatHistory,
+    setActiveChatChannel,
+    togglePinChat,
+    setTabIndex,
+  } = useXyzen();
+
+  // 组件挂载时加载聊天历史
+  useEffect(() => {
+    fetchChatHistory();
+  }, [fetchChatHistory]);
+
+  // 根据置顶状态对聊天记录进行排序
+  const sortedHistory = [...chatHistory].sort((a, b) => {
+    if (a.isPinned && !b.isPinned) return -1;
+    if (!a.isPinned && b.isPinned) return 1;
+    const dateA = new Date(a.updatedAt);
+    const dateB = new Date(b.updatedAt);
+    return dateB.getTime() - dateA.getTime();
+  });
+
+  // 激活聊天会话
+  const activateChat = (chatId: string) => {
+    setActiveChatChannel(chatId);
+    setTabIndex(0); // 切换到聊天标签页
+  };
+
+  // 切换置顶状态
+  const handleTogglePin = (e: React.MouseEvent, chatId: string) => {
+    e.stopPropagation();
+    togglePinChat(chatId);
+  };
+
+  if (chatHistoryLoading) {
+    return (
+      <div className="flex h-full items-center justify-center">
+        <div className="h-8 w-8 animate-spin rounded-full border-4 border-neutral-300 border-t-indigo-600"></div>
+      </div>
+    );
+  }
+
+  if (sortedHistory.length === 0) {
+    return (
+      <div className="flex h-full flex-col items-center justify-center px-4 text-center text-neutral-400">
+        <ClockIcon className="h-12 w-12 opacity-50" />
+        <p className="mt-4">没有聊天记录</p>
+        <p className="mt-1 text-xs">创建新对话开始聊天</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-2 px-4">
+      {sortedHistory.map((chat: ChatHistoryItem) => (
+        <div
+          key={chat.id}
+          className="group relative flex cursor-pointer items-center justify-between rounded-lg border border-neutral-200 p-3 hover:bg-neutral-50 dark:border-neutral-800 dark:hover:bg-neutral-900"
+          onClick={() => activateChat(chat.id)}
+        >
+          <div className="flex-1 overflow-hidden">
+            <div className="flex items-center">
+              {chat.isPinned && (
+                <MapPinIcon className="mr-1.5 h-3.5 w-3.5 rotate-45 text-indigo-500 dark:text-indigo-400" />
+              )}
+              <h3
+                className={`truncate text-sm font-medium ${
+                  chat.isPinned
+                    ? "text-indigo-700 dark:text-indigo-400"
+                    : "text-neutral-800 dark:text-white"
+                }`}
+              >
+                {chat.title}
+              </h3>
+            </div>
+            <div className="mt-1 flex items-center text-xs text-neutral-500">
+              <span className="truncate">{chat.assistantTitle}</span>
+              <span className="mx-1.5">·</span>
+              <span className="whitespace-nowrap">
+                {formatTime(chat.updatedAt)}
+              </span>
+            </div>
+            {chat.lastMessage && (
+              <p className="mt-1 truncate text-xs text-neutral-500">
+                {chat.lastMessage}
+              </p>
+            )}
+          </div>
+          <div className="ml-4 flex items-center gap-2">
+            <button
+              className="invisible rounded p-1 text-neutral-400 hover:bg-neutral-200 hover:text-neutral-700 group-hover:visible dark:hover:bg-neutral-800 dark:hover:text-neutral-300"
+              title={chat.isPinned ? "取消置顶" : "置顶会话"}
+              onClick={(e) => handleTogglePin(e, chat.id)}
+            >
+              <MapPinIcon
+                className={`h-4 w-4 ${chat.isPinned ? "rotate-45" : ""}`}
+              />
+            </button>
+            <div className="rounded-full p-1.5 text-neutral-400 group-hover:text-neutral-500">
+              <ChevronRightIcon className="h-4 w-4" />
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

package/src/components/layouts/XyzenNodes.tsx

@@ -0,0 +1,7 @@
+export default function XyzenNodes() {
+  return (
+    <div className="flex h-full items-center justify-center">
+      <p className="text-neutral-500">节点视图正在建设中...</p>
+    </div>
+  );
+}

package/src/components/layouts/components/ChatBubble.tsx

@@ -0,0 +1,140 @@
+import Markdown from "@/lib/Markdown";
+
+import { motion } from "framer-motion";
+import React, { useEffect, useState } from "react";
+
+export interface Message {
+  id: string;
+  sender: string;
+  content: string;
+  timestamp: string;
+  avatar?: string;
+  isCurrentUser?: boolean;
+}
+
+interface ChatBubbleProps {
+  message: Message;
+}
+
+const ChatBubble: React.FC<ChatBubbleProps> = ({ message }) => {
+  const { isCurrentUser, content, timestamp, avatar } = message;
+  const [imageError, setImageError] = useState(false);
+  const [userAvatar, setUserAvatar] = useState<string | undefined>(avatar);
+
+  // 如果是当前用户，从localStorage获取最新的用户头像
+  useEffect(() => {
+    if (isCurrentUser) {
+      try {
+        const userInfoStr = localStorage.getItem("userInfo");
+        if (userInfoStr) {
+          const userInfo = JSON.parse(userInfoStr);
+          if (userInfo.avatar) {
+            setUserAvatar(userInfo.avatar);
+          }
+        }
+      } catch (e) {
+        console.error("Failed to get avatar from localStorage", e);
+      }
+    }
+  }, [isCurrentUser]);
+
+  // Updated time format to include seconds
+  const formattedTime = new Date(timestamp).toLocaleTimeString([], {
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+  });
+
+  // Different styles for user vs AI messages
+  const messageStyles = isCurrentUser
+    ? "border-l-4 border-blue-400 bg-blue-50/50 dark:border-blue-600 dark:bg-blue-900/20"
+    : "border-l-4 border-neutral-300 bg-white dark:border-neutral-600 dark:bg-neutral-800/50";
+
+  // 获取头像 URL 但避免使用不存在的默认头像文件
+  const getAvatarUrl = (avatarPath?: string) => {
+    if (!avatarPath) return null;
+
+    // 如果已经是完整URL就直接使用
+    if (avatarPath.startsWith("http")) {
+      return avatarPath;
+    }
+
+    // 如果是相对路径，根据环境添加正确的基本URL
+    const baseUrl = process.env.NEXT_PUBLIC_API_URL || "";
+    return avatarPath.startsWith("/")
+      ? `${baseUrl}${avatarPath}`
+      : `${baseUrl}/${avatarPath}`;
+  };
+
+  // 渲染头像，使用初始字母作为最后的备用选项
+  const renderAvatar = () => {
+    // 如果已经知道图像加载失败，或者没有提供头像
+    if (imageError || !userAvatar) {
+      // 显示用户或AI的首字母作为头像
+      const initial = isCurrentUser
+        ? message.sender?.charAt(0)?.toUpperCase() || "U"
+        : "A";
+
+      return (
+        <div
+          className={`flex h-6 w-6 items-center justify-center rounded-full ${
+            isCurrentUser
+              ? "bg-blue-500 text-white"
+              : "bg-purple-500 text-white"
+          }`}
+        >
+          <span className="text-xs font-medium">{initial}</span>
+        </div>
+      );
+    }
+
+    // 尝试加载实际头像
+    const avatarUrl = getAvatarUrl(userAvatar);
+    return (
+      <img
+        src={avatarUrl || ""}
+        alt={isCurrentUser ? "You" : "Assistant"}
+        className="h-6 w-6 rounded-full shadow-sm transition-transform duration-200 group-hover:scale-110"
+        onError={() => setImageError(true)} // 加载失败时设置状态，不再尝试加载图片
+      />
+    );
+  };
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.3, ease: "easeOut" }}
+      className="group relative w-full pl-8"
+    >
+      {/* Timestamp - hidden by default, shown on hover */}
+      <div className="absolute -top-6 left-8 z-10 transform opacity-0 transition-opacity duration-200 group-hover:opacity-100">
+        <span className="rounded px-2 py-1 text-xs text-neutral-500  dark:text-neutral-400">
+          {formattedTime}
+        </span>
+      </div>
+
+      {/* Avatar - positioned to the left */}
+      <div className="absolute left-0 top-1">{renderAvatar()}</div>
+
+      {/* Message content */}
+      <div
+        className={`w-full rounded-none ${messageStyles} transition-all duration-200 hover:shadow-sm`}
+      >
+        <div className="p-3">
+          <div
+            className={`prose prose-neutral dark:prose-invert prose-sm max-w-none ${
+              isCurrentUser
+                ? "text-sm text-neutral-800 dark:text-neutral-200"
+                : "text-sm text-neutral-700 dark:text-neutral-300"
+            }`}
+          >
+            {isCurrentUser ? <p>{content}</p> : <Markdown content={content} />}
+          </div>
+        </div>
+      </div>
+    </motion.div>
+  );
+};
+
+export default ChatBubble;

package/src/components/layouts/components/ChatInput.tsx

@@ -0,0 +1,173 @@
+import {
+  type DragEndEvent,
+  type DragMoveEvent,
+  DndContext,
+  PointerSensor,
+  useDraggable,
+  useSensor,
+  useSensors,
+} from "@dnd-kit/core";
+import { PaperAirplaneIcon } from "@heroicons/react/24/solid";
+import React, { useEffect, useRef, useState } from "react";
+
+interface ChatInputProps {
+  onSendMessage: (message: string) => void;
+  disabled?: boolean;
+  placeholder?: string;
+  onHeightChange?: (height: number) => void; // New prop to report height changes
+}
+
+// Draggable resize handle component
+const ResizeHandle = () => {
+  const { attributes, listeners, setNodeRef } = useDraggable({
+    id: "resize-handle",
+  });
+
+  return (
+    <div
+      ref={setNodeRef}
+      {...listeners}
+      {...attributes}
+      className="absolute -top-2 left-0 right-0 -mx-2 h-0.5 cursor-ns-resize transition-colors hover:bg-indigo-600"
+      title="拖动调整高度"
+    />
+  );
+};
+
+export const ChatInput: React.FC<ChatInputProps> = ({
+  onSendMessage,
+  disabled = false,
+  placeholder = "输入消息...",
+  onHeightChange,
+}) => {
+  const [inputMessage, setInputMessage] = useState("");
+  const [textareaHeight, setTextareaHeight] = useState(() => {
+    // Try to get saved height from localStorage
+    const savedHeight = localStorage.getItem("chatInputHeight");
+    return savedHeight ? parseInt(savedHeight, 10) : 80; // Default 80px
+  });
+  // 添加一个状态来跟踪输入法的组合状态
+  const [isComposing, setIsComposing] = useState(false);
+
+  // Keep track of initial height when drag starts
+  const initialHeightRef = useRef(textareaHeight);
+  // Keep track of total delta during drag
+  const dragDeltaRef = useRef(0);
+
+  // Setup dnd sensors with lower activation distance for more responsiveness
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        distance: 0, // Decreased from 1 to improve responsiveness
+      },
+    }),
+  );
+
+  // Save height to localStorage when it changes and report height changes to parent
+  useEffect(() => {
+    localStorage.setItem("chatInputHeight", textareaHeight.toString());
+    if (onHeightChange) {
+      onHeightChange(textareaHeight);
+    }
+  }, [textareaHeight, onHeightChange]);
+
+  // Handle drag start to set initial height reference
+  const handleDragStart = () => {
+    initialHeightRef.current = textareaHeight;
+    dragDeltaRef.current = 0;
+  };
+
+  // Handle drag move to update height in real-time
+  const handleDragMove = (event: DragMoveEvent) => {
+    const { delta } = event;
+    dragDeltaRef.current = delta.y;
+
+    // Calculate new height based on initial height and total delta
+    const newHeight = Math.max(60, initialHeightRef.current - delta.y);
+    setTextareaHeight(newHeight);
+  };
+
+  // Handle drag end for final cleanup
+  const handleDragEnd = (_: DragEndEvent) => {
+    // Final height adjustment already done during move, just ensure it's saved
+    const finalHeight = Math.max(
+      60,
+      initialHeightRef.current - dragDeltaRef.current,
+    );
+    setTextareaHeight(finalHeight);
+
+    // Reset the refs
+    dragDeltaRef.current = 0;
+  };
+
+  const handleSendMessage = () => {
+    if (!inputMessage.trim()) return;
+    onSendMessage(inputMessage);
+    setInputMessage("");
+  };
+
+  // 处理输入法组合开始事件
+  const handleCompositionStart = () => {
+    setIsComposing(true);
+  };
+
+  // 处理输入法组合结束事件
+  const handleCompositionEnd = () => {
+    setIsComposing(false);
+  };
+
+  // Handle Enter key to send message
+  const handleKeyPress = (e: React.KeyboardEvent) => {
+    // 如果是在输入法组合状态中，不处理回车键事件
+    if (e.key === "Enter" && !e.shiftKey && !isComposing) {
+      e.preventDefault();
+      handleSendMessage();
+    }
+  };
+
+  return (
+    <div className="w-full">
+      <DndContext
+        sensors={sensors}
+        onDragStart={handleDragStart}
+        onDragMove={handleDragMove}
+        onDragEnd={handleDragEnd}
+      >
+        <div className="group relative">
+          {/* Drag handle - only visible on hover */}
+          <ResizeHandle />
+
+          <textarea
+            value={inputMessage}
+            onChange={(e) => setInputMessage(e.target.value)}
+            onKeyDown={handleKeyPress}
+            onCompositionStart={handleCompositionStart}
+            onCompositionEnd={handleCompositionEnd}
+            placeholder={placeholder}
+            className="w-full resize-none  bg-white py-2 pl-3 pr-12 text-sm placeholder-neutral-500 focus:outline-none  dark:bg-black dark:text-white dark:placeholder-neutral-400"
+            style={{
+              height: `${textareaHeight}px`,
+              transition: "none", // Remove transition to make height follow mouse exactly
+            }}
+            disabled={disabled}
+          />
+          <button
+            onClick={handleSendMessage}
+            disabled={disabled || !inputMessage.trim()}
+            className="absolute bottom-4 right-2 rounded-md
+             bg-indigo-600 p-1.5 text-white transition-colors
+              hover:bg-indigo-700 disabled:bg-neutral-300 disabled:text-neutral-500 dark:disabled:bg-neutral-700 dark:disabled:text-neutral-400"
+            aria-label="Send message"
+          >
+            <PaperAirplaneIcon className="h-4 w-4" />
+          </button>
+        </div>
+      </DndContext>
+      <p className="mt-0.5 text-xs text-neutral-500">
+        按 Enter 发送，Shift+Enter 换行
+      </p>
+    </div>
+  );
+};
+
+export default ChatInput;