feat: add tab navigation, text cleanup and avatar caching

Author: huanglvjing

.env.template

@@ -14,6 +14,7 @@ SUMMARY_MODEL="gpt-4o-mini"
 EMBEDDING_MODEL="text-embedding-3-large"
 CHAT_MODEL="gpt-5-mini"
 FAST_MODEL="gpt-4o-mini"
+TAB_CHAT_MODEL="gemini-2.0-flash-lite-preview"
 EXTERNAL_VECTOR_BASE_URL=""
 VECTOR_BACKEND="internal"
 MAX_AI_RESPONSES_PER_TICKET="3"

frontend/src/components/chat/enhanced-message-input.tsx

@@ -0,0 +1,170 @@
+import React, { useState, useCallback } from "react";
+import { type JSONContentZod } from "tentix-server/types";
+import { useTextOptimizer } from "../../hooks/use-text-optimizer";
+import { useToast } from "tentix-ui";
+
+interface EnhancedMessageInputProps {
+  ticketId: string;
+  messageType?: "public" | "internal";
+  priority?: string;
+  onSendMessage: (content: JSONContentZod) => Promise<void>;
+  onTyping?: () => void;
+  isLoading?: boolean;
+  children: React.ReactElement; 
+}
+
+export function EnhancedMessageInput({
+  ticketId,
+  messageType = "public",
+  priority,
+  onTyping,
+  isLoading,
+  children,
+}: EnhancedMessageInputProps) {
+  const { toast } = useToast();
+  const [currentText, setCurrentText] = useState("");
+  const [isEnabled, setIsEnabled] = useState(true);
+
+  const {
+    isOptimizing,
+    lastOptimization,
+    hasOptimization,
+    optimizeText,
+    undoOptimization,
+    cancelOptimization,
+  } = useTextOptimizer({ ticketId, messageType, priority });
+
+
+  const extractTextFromContent = useCallback((content: JSONContentZod): string => {
+    if (!content || !content.content) return "";
+    
+    const extractFromNode = (node: any): string => {
+      if (typeof node === "string") return node;
+      if (node.type === "text") return node.text || "";
+      if (node.content && Array.isArray(node.content)) {
+        return node.content.map(extractFromNode).join("");
+      }
+      return "";
+    };
+
+    return content.content.map(extractFromNode).join(" ").trim();
+  }, []);
+
+
+  const createOptimizedContent = useCallback((optimizedText: string): JSONContentZod => {
+    return {
+      type: "doc",
+      content: [
+        {
+          type: "paragraph",
+          content: [{ type: "text", text: optimizedText }],
+        },
+      ],
+    };
+  }, []);
+
+
+  const handleOptimize = useCallback(async (text?: string) => {
+    const textToOptimize = text || currentText;
+    if (!textToOptimize.trim()) {
+      toast({
+        title: "无法优化",
+        description: "请先输入一些文本",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    const result = await optimizeText(textToOptimize);
+    if (result) {
+    
+      const childRef = (children as any)?.ref;
+      if (childRef?.current) {
+        const optimizedContent = createOptimizedContent(result.optimizedText);
+        childRef.current.setContent?.(optimizedContent);
+        setCurrentText(result.optimizedText);
+      }
+    }
+  }, [currentText, optimizeText, createOptimizedContent, toast, children]);
+
+  
+  const handleUndo = useCallback(() => {
+    const originalText = undoOptimization();
+    if (originalText) {
+      const childRef = (children as any)?.ref;
+      if (childRef?.current) {
+        const originalContent = createOptimizedContent(originalText);
+        childRef.current.setContent?.(originalContent);
+        setCurrentText(originalText);
+      }
+    }
+  }, [undoOptimization, createOptimizedContent, children]);
+
+ 
+  const childProps = children.props as any;
+  const enhancedChildren = React.cloneElement(children, {
+    ...childProps,
+    onChange: (content: JSONContentZod) => {
+  
+      if (childProps.onChange) {
+        childProps.onChange(content);
+      }
+      
+
+      const text = extractTextFromContent(content);
+      setCurrentText(text);
+      
+
+      if (onTyping) {
+        onTyping();
+      }
+    },
+    
+
+    editorProps: {
+      ...childProps.editorProps,
+      handleKeyDown: (view: any, event: KeyboardEvent) => {
+     
+        if (event.key === 'Tab' && !event.shiftKey && !event.ctrlKey && !event.metaKey) {
+          event.preventDefault();
+          if (isEnabled && !isOptimizing && currentText.trim()) {
+            handleOptimize();
+            return true;
+          }
+        }
+        
+
+        if (childProps.editorProps?.handleKeyDown) {
+          return childProps.editorProps.handleKeyDown(view, event);
+        }
+        
+        return false;
+      },
+    },
+  });
+
+  return (
+    <div className="border-t relative">
+
+      <div className="flex items-center justify-between p-2 border-b bg-gray-50/50">
+        <div className="flex items-center gap-3">
+
+          
+          <label className="flex items-center gap-2 text-xs">
+            <input
+              type="checkbox"
+              checked={isEnabled}
+              onChange={(e) => setIsEnabled(e.target.checked)}
+              className="w-3 h-3"
+            />
+            <span className="text-gray-600">启用Tab键优化</span>
+          </label>
+        </div>
+
+      </div>
+      
+
+      {enhancedChildren}
+    </div>
+  );
+}

frontend/src/components/chat/message-item.tsx

@@ -13,7 +13,6 @@ import { type TicketType } from "tentix-server/rpc";
 import {
   Avatar,
   AvatarFallback,
-  AvatarImage,
   Badge,
   Button,
   Popover,
@@ -28,6 +27,8 @@ import {
 } from "tentix-ui";
 import useLocalUser from "../../hooks/use-local-user.tsx";
 import { useChatStore, useSessionMembersStore } from "../../store/index.ts";
+import { useUserCacheStore } from "@store/user-cache";
+import { CachedAvatar } from "@comp/common/cached-avatar";
 import ContentRenderer from "./content-renderer.tsx";
 import { useTranslation } from "i18n";
 import { memo, useState, useEffect } from "react";
@@ -39,13 +40,37 @@ interface MessageItemProps {
   message: TicketType["messages"][number];
 }
 
+
+const useMessageSender = (message: TicketType["messages"][number]) => {
+  const { sessionMembers } = useSessionMembersStore();
+  const setUser = useUserCacheStore((state: any) => state.setUser);
+
+  const messageSender = sessionMembers?.find(
+    (member) => member.id === message.senderId,
+  );
+
+  // 缓存消息发送者信息
+  useEffect(() => {
+    if (messageSender) {
+      setUser({
+        id: messageSender.id,
+        name: messageSender.name,
+        nickname: messageSender.nickname || messageSender.name,
+        avatar: messageSender.avatar,
+        role: messageSender.role || 'unknown'
+      });
+    }
+  }, [messageSender, setUser]);
+
+  return messageSender;
+};
+
 // other's message component
 const OtherMessage = ({
   message,
 }: {
   message: TicketType["messages"][number];
 }) => {
-  const { sessionMembers } = useSessionMembersStore();
   const { role } = useLocalUser();
   const { currentTicketId, updateMessage } = useChatStore();
   const notCustomer = role !== "customer";
@@ -57,9 +82,8 @@ const OtherMessage = ({
   const [feedbackComment, setFeedbackComment] = useState("");
   const [hasComplaint, setHasComplaint] = useState(false);
 
-  const messageSender = sessionMembers?.find(
-    (member) => member.id === message.senderId,
-  );
+  // 使用提取的Hook
+  const messageSender = useMessageSender(message);
 
   // Get current feedback status
   const currentFeedback = message.feedbacks?.[0];
@@ -158,15 +182,17 @@ const OtherMessage = ({
   return (
     <div className="flex  flex-col animate-fadeIn justify-start">
       <div className="flex max-w-[85%] gap-3 min-w-0">
-        <Avatar className="h-8 w-8 shrink-0">
-          <AvatarImage
-            src={messageSender?.avatar}
-            alt={messageSender?.nickname ?? t("unknown")}
+        {messageSender ? (
+          <CachedAvatar 
+            user={messageSender} 
+            size="md" 
+            showDebugInfo={import.meta.env.DEV}
           />
-          <AvatarFallback>
-            {messageSender?.nickname?.charAt(0) ?? "U"}
-          </AvatarFallback>
-        </Avatar>
+        ) : (
+          <Avatar className="h-8 w-8 shrink-0">
+            <AvatarFallback>U</AvatarFallback>
+          </Avatar>
+        )}
         <div
           className={cn(
             "flex flex-col gap-2 min-w-0 flex-1",
@@ -434,27 +460,28 @@ const MyMessage = ({
 }: {
   message: TicketType["messages"][number];
 }) => {
-  const { sessionMembers } = useSessionMembersStore();
   const { isMessageSending, withdrawMessageFunc: withdrawMessage, kbSelectionMode } =
     useChatStore();
   const { t } = useTranslation();
 
-  const messageSender = sessionMembers?.find(
-    (member) => member.id === message.senderId,
-  );
+  // 使用提取的Hook
+  const messageSender = useMessageSender(message);
 
   return (
     <div className="flex animate-fadeIn justify-end">
       <div className="flex max-w-[85%]  flex-row-reverse min-w-0">
-        <Avatar className="h-8 w-8 shrink-0 ml-3">
-          <AvatarImage
-            src={messageSender?.avatar}
-            alt={messageSender?.nickname ?? t("unknown")}
+        {messageSender ? (
+          <CachedAvatar 
+            user={messageSender} 
+            size="md" 
+            className="ml-3"
+            showDebugInfo={import.meta.env.DEV}
           />
-          <AvatarFallback>
-            {messageSender?.nickname?.charAt(0) ?? "U"}
-          </AvatarFallback>
-        </Avatar>
+        ) : (
+          <Avatar className="h-8 w-8 shrink-0 ml-3">
+            <AvatarFallback>U</AvatarFallback>
+          </Avatar>
+        )}
         <div
           className={cn(
             "flex flex-col gap-2 rounded-xl py-4 px-5 ml-1 min-w-0 flex-1",