Langchain-Chatchat前端架构：从技术选型到性能优化的最佳实践

2026-04-01 09:07:15作者：瞿蔚英Wynne

Langchain-Chatchat（原Langchain-ChatGLM）基于 Langchain 与 ChatGLM, Qwen 与 Llama 等语言模型的 RAG 与 Agent 应用 | Langchain-Chatchat (formerly langchain-ChatGLM), local knowledge based LLM (like ChatGLM, Qwen and Llama) RAG and Agent app with langchain

项目地址：https://gitcode.com/GitHub_Trending/la/Langchain-Chatchat

在AI应用开发中，如何构建既满足实时交互需求又具备扩展性的前端架构？Langchain-Chatchat作为基于Langchain框架的本地知识库问答系统，其前端实现面临着大模型交互延迟、复杂状态管理和多模块集成等挑战。本文将从技术选型、架构设计、功能实现到性能优化，全面解析现代化前端架构的构建方法，为开源项目开发提供可落地的实践指南。

技术选型策略：为何Next.js成为AI应用的首选框架

如何在众多前端框架中选择最适合AI应用的技术栈？Langchain-Chatchat的前端架构选择Next.js作为核心框架，这一决策基于AI应用的三大关键需求：首屏加载速度、服务端渲染能力和API路由管理。

Next.js提供的SSR(服务端渲染)技术解决了传统SPA应用首屏加载慢的问题，对于需要加载大模型对话历史的场景尤为重要。同时，其内置的API路由功能简化了前后端通信流程，特别适合处理AI模型推理等耗时操作的异步请求。

实战技巧

开发环境配置：使用create-next-app快速搭建项目时，建议开启TypeScript支持并选择Tailwind CSS作为样式解决方案，命令如下：

npx create-next-app@latest chatchat-frontend --typescript --tailwind --app

依赖管理策略：核心依赖应限定版本范围，避免自动升级导致兼容性问题，关键依赖配置示例：

{
  "dependencies": {
    "next": "14.0.3",
    "react": "18.2.0",
    "react-dom": "18.2.0"
  }
}

开发工具链优化：配置ESLint规则检测性能问题，在.eslintrc.json中添加：

{
  "rules": {
    "react/no-unescaped-entities": "off",
    "next/no-img-element": "off"
  }
}

架构解析：模块化设计与数据流管理

复杂AI应用如何保持代码可维护性？Langchain-Chatchat采用"核心层-业务层-表现层"的三层架构，通过清晰的模块划分和数据流管理解决这一问题。

核心层包含API客户端、状态管理和工具函数；业务层实现对话管理、知识库配置等核心功能；表现层则负责UI组件渲染。这种分层架构使得各模块职责明确，便于团队协作和功能扩展。

状态管理实现

针对AI对话场景的复杂状态需求，项目采用React Context+Zustand的混合方案：

// 功能：对话状态管理
// 参数：无，通过hook访问状态和操作函数
import create from 'zustand';
import { createContext, useContext } from 'react';

// 定义对话状态类型
interface ChatState {
  messages: Message[];
  isLoading: boolean;
  error: string | null;
  addMessage: (message: Message) => void;
  setLoading: (loading: boolean) => void;
  setError: (error: string | null) => void;
}

// 创建store
const useChatStore = create<ChatState>((set) => ({
  messages: [],
  isLoading: false,
  error: null,
  addMessage: (message) => set((state) => ({ 
    messages: [...state.messages, message] 
  })),
  setLoading: (loading) => set({ isLoading: loading }),
  setError: (error) => set({ error })
}));

// 创建Context便于组件树共享
const ChatContext = createContext<ReturnType<typeof useChatStore>>(
  {} as ReturnType<typeof useChatStore>
);

// 自定义Hook简化使用
export const useChat = () => useContext(ChatContext);

// 提供Provider组件
export const ChatProvider = ({ children }: { children: React.ReactNode }) => (
  <ChatContext.Provider value={useChatStore}>
    {children}
  </ChatContext.Provider>
);

实战技巧

模块边界划分：按功能域创建独立模块目录，建议结构：

src/
├── core/           # 核心服务
│   ├── api/        # API客户端
│   ├── store/      # 状态管理
│   └── utils/      # 工具函数
├── features/       # 业务功能
│   ├── chat/       # 对话功能
│   ├── knowledge/  # 知识库管理
│   └── agent/      # Agent工具
└── components/     # 共享组件

API请求封装：创建统一的API客户端处理认证、错误和重试：

// 功能：API请求封装
// 参数：url-请求地址，options-请求配置
import axios from 'axios';

const apiClient = axios.create({
  baseURL: '/api',
  timeout: 30000, // AI请求超时时间设为30秒
  headers: {
    'Content-Type': 'application/json'
  }
});

// 请求拦截器处理认证
apiClient.interceptors.request.use(config => {
  const token = localStorage.getItem('token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

// 响应拦截器处理错误
apiClient.interceptors.response.use(
  response => response.data,
  error => {
    // 处理常见错误
    if (error.response?.status === 401) {
      // 未授权，重定向到登录
      window.location.href = '/login';
    }
    return Promise.reject(error);
  }
);

export default apiClient;

数据流优化：使用React Query处理服务器状态，减少重复请求：

// 功能：知识库列表数据获取
// 参数：无
import { useQuery } from '@tanstack/react-query';
import apiClient from '../core/api/client';

export function useKnowledgeBases() {
  return useQuery({
    queryKey: ['knowledgeBases'],
    queryFn: () => apiClient.get('/knowledge_base/list_knowledge_bases'),
    staleTime: 5 * 60 * 1000, // 5分钟缓存
    refetchOnWindowFocus: false // 窗口聚焦时不重新请求
  });
}

功能实现：从对话交互到Agent工具集成

如何构建流畅的大模型对话体验？Langchain-Chatchat前端实现了三大核心功能模块：实时对话系统、知识库管理和Agent工具集成，每个模块都针对AI应用的特殊需求进行了优化。

对话系统采用流式响应处理技术，实现打字机效果，避免用户长时间等待。知识库管理模块支持文件上传、向量存储配置和检索参数调节，满足不同场景的知识问答需求。Agent工具集成则通过可扩展的插件系统，支持天气查询、代码执行等多种工具调用。

性能瓶颈解决方案

大模型对话的实时性是前端面临的主要挑战，项目通过以下技术方案解决：

流式响应处理：

// 功能：处理流式对话响应
// 参数：message-用户消息，onChunk-接收chunk的回调函数
import { useChat } from '../store/chatStore';

export function useStreamChat() {
  const { addMessage, setLoading, setError } = useChat();
  
  return async function streamChat(message: string) {
    setLoading(true);
    setError(null);
    
    // 添加用户消息
    addMessage({
      role: 'user',
      content: message,
      timestamp: new Date()
    });
    
    // 创建AI响应消息占位符
    const aiMessageId = Date.now().toString();
    addMessage({
      id: aiMessageId,
      role: 'assistant',
      content: '',
      timestamp: new Date(),
      isStreaming: true
    });
    
    try {
      const response = await fetch('/api/chat/agent_chat', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ message })
      });
      
      if (!response.ok) throw new Error('对话请求失败');
      
      const reader = response.body?.getReader();
      if (!reader) throw new Error('无法获取响应流');
      
      const decoder = new TextDecoder();
      let fullContent = '';
      
      while (true) {
        const { done, value } = await reader.read();
        if (done) break;
        
        const chunk = decoder.decode(value, { stream: true });
        fullContent += chunk;
        
        // 更新消息内容，实现打字机效果
        addMessage({
          id: aiMessageId,
          role: 'assistant',
          content: fullContent,
          timestamp: new Date(),
          isStreaming: true
        });
      }
      
      // 标记流结束
      addMessage({
        id: aiMessageId,
        role: 'assistant',
        content: fullContent,
        timestamp: new Date(),
        isStreaming: false
      });
      
    } catch (err) {
      setError(err instanceof Error ? err.message : '未知错误');
    } finally {
      setLoading(false);
    }
  };
}

对话历史缓存：使用IndexedDB缓存历史对话，减少重复渲染：

// 功能：对话历史本地存储
// 参数：无，通过hook访问方法
import { useEffect, useState } from 'react';
import { openDB } from 'idb';

export function useChatHistory() {
  const [history, setHistory] = useState<ChatSession[]>([]);
  
  // 初始化数据库
  useEffect(() => {
    const initDB = async () => {
      const db = await openDB('ChatHistory', 1, {
        upgrade(db) {
          db.createObjectStore('sessions', { keyPath: 'id' });
        }
      });
      
      // 加载历史会话
      const sessions = await db.getAll('sessions');
      setHistory(sessions);
    };
    
    initDB();
  }, []);
  
  // 保存会话
  const saveSession = async (session: ChatSession) => {
    const db = await openDB('ChatHistory', 1);
    await db.put('sessions', session);
    setHistory(prev => [...prev.filter(s => s.id !== session.id), session]);
  };
  
  // 其他方法...
  
  return { history, saveSession };
}

实战技巧

对话输入优化：实现智能输入框，支持快捷键和自动补全：

// 功能：增强型对话输入框
// 参数：onSend-发送消息回调
import { useState, useRef, useEffect } from 'react';

export function ChatInput({ onSend }: { onSend: (message: string) => void }) {
  const [input, setInput] = useState('');
  const textareaRef = useRef<HTMLTextAreaElement>(null);
  
  // 处理按键事件
  const handleKeyDown = (e: React.KeyboardEvent) => {
    // Shift+Enter换行
    if (e.key === 'Enter' && e.shiftKey) {
      e.preventDefault();
      setInput(prev => prev + '\n');
      return;
    }
    
    // Enter发送
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault();
      if (input.trim()) {
        onSend(input);
        setInput('');
      }
    }
  };
  
  // 自动调整高度
  useEffect(() => {
    if (textareaRef.current) {
      textareaRef.current.style.height = 'auto';
      textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;
    }
  }, [input]);
  
  return (
    <textarea
      ref={textareaRef}
      value={input}
      onChange={(e) => setInput(e.target.value)}
      onKeyDown={handleKeyDown}
      placeholder="请输入对话内容，换行请使用Shift+Enter"
      className="w-full p-3 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
    />
  );
}

文件上传优化：支持大文件分片上传和进度显示：

// 功能：知识库文件上传组件
// 参数：kbId-知识库ID，onComplete-上传完成回调
import { useState } from 'react';
import { useDropzone } from 'react-dropzone';
import apiClient from '../core/api/client';

export function KnowledgeFileUploader({ 
  kbId, 
  onComplete 
}: { 
  kbId: string; 
  onComplete: () => void 
}) {
  const [uploadProgress, setUploadProgress] = useState(0);
  const [isUploading, setIsUploading] = useState(false);
  
  const onDrop = async (acceptedFiles: File[]) => {
    const file = acceptedFiles[0];
    if (!file) return;
    
    setIsUploading(true);
    setUploadProgress(0);
    
    const formData = new FormData();
    formData.append('file', file);
    formData.append('knowledge_base_name', kbId);
    
    try {
      await apiClient.post('/knowledge_base/upload_docs', formData, {
        onUploadProgress: (progressEvent) => {
          const percent = Math.round(
            (progressEvent.loaded * 100) / (progressEvent.total || 1)
          );
          setUploadProgress(percent);
        }
      });
      
      onComplete();
    } catch (error) {
      console.error('文件上传失败', error);
    } finally {
      setIsUploading(false);
    }
  };
  
  const { getRootProps, getInputProps, isDragActive } = useDropzone({
    onDrop,
    accept: {
      'application/pdf': ['.pdf'],
      'text/plain': ['.txt'],
      'application/vnd.openxmlformats-officedocument.wordprocessingml.document': ['.docx'],
      'application/vnd.ms-excel': ['.xlsx']
    },
    maxSize: 200 * 1024 * 1024, // 200MB
    disabled: isUploading
  });
  
  return (
    <div {...getRootProps()} className="border-2 border-dashed p-6 text-center">
      <input {...getInputProps()} />
      {isDragActive ? (
        <p>释放文件开始上传</p>
      ) : (
        <p>拖拽文件到此处或点击选择文件</p>
      )}
      
      {isUploading && (
        <div className="mt-4">
          <div className="w-full bg-gray-200 rounded-full h-2.5">
            <div 
              className="bg-blue-600 h-2.5 rounded-full" 
              style={{ width: `${uploadProgress}%` }}
            ></div>
          </div>
          <p className="text-sm text-gray-600 mt-2">{uploadProgress}% 已上传</p>
        </div>
      )}
    </div>
  );
}

Agent工具配置：设计灵活的工具选择界面：

// 功能：Agent工具选择组件
// 参数：selectedTools-选中的工具列表，onChange-选择变化回调
import { useState } from 'react';

// 工具定义
const AGENT_TOOLS = [
  { id: 'weather', name: '天气查询', description: '获取指定城市的天气信息' },
  { id: 'calculator', name: '计算器', description: '进行数学计算' },
  { id: 'search', name: '网络搜索', description: '搜索互联网信息' },
  { id: 'knowledge', name: '知识库检索', description: '检索本地知识库内容' },
  { id: 'code', name: '代码解释器', description: '执行代码并返回结果' }
];

export function AgentToolSelector({
  selectedTools,
  onChange
}: {
  selectedTools: string[];
  onChange: (tools: string[]) => void;
}) {
  const [expanded, setExpanded] = useState(true);
  
  const toggleTool = (toolId: string) => {
    const newSelected = selectedTools.includes(toolId)
      ? selectedTools.filter(id => id !== toolId)
      : [...selectedTools, toolId];
    onChange(newSelected);
  };
  
  return (
    <div className="border rounded-lg p-4 mb-4">
      <div 
        className="flex justify-between items-center cursor-pointer"
        onClick={() => setExpanded(!expanded)}
      >
        <h3 className="font-medium">Agent工具配置</h3>
        <span>{expanded ? '▼' : '►'}</span>
      </div>
      
      {expanded && (
        <div className="mt-3 space-y-2">
          {AGENT_TOOLS.map(tool => (
            <label key={tool.id} className="flex items-center">
              <input
                type="checkbox"
                checked={selectedTools.includes(tool.id)}
                onChange={() => toggleTool(tool.id)}
                className="mr-2"
              />
              <div>
                <div className="font-sm font-medium">{tool.name}</div>
                <div className="text-xs text-gray-500">{tool.description}</div>
              </div>
            </label>
          ))}
        </div>
      )}
    </div>
  );
}

体验优化：构建流畅的AI交互界面

如何让用户感知AI交互的流畅性？Langchain-Chatchat通过多层次的体验优化策略，包括加载状态反馈、错误处理机制和响应式设计，显著提升了用户体验。

加载状态采用骨架屏和进度指示器组合方案，让用户清晰了解系统处理状态。错误处理机制不仅提供友好的错误提示，还给出具体的解决建议。响应式设计确保在从手机到桌面的各种设备上都能提供一致的体验。

实时交互反馈实现

为解决AI响应延迟带来的体验问题，项目实现了多维度的交互反馈：

// 功能：对话消息组件，包含加载状态和错误处理
// 参数：message-消息对象
import { useState, useEffect } from 'react';

export function ChatMessage({ message }: { message: Message }) {
  const [typingChars, setTypingChars] = useState(0);
  const { role, content, isStreaming, error } = message;
  
  // 打字机效果动画
  useEffect(() => {
    if (isStreaming && content) {
      const timer = setTimeout(() => {
        setTypingChars(prev => 
          prev < content.length ? prev + 1 : prev
        );
      }, 30); // 控制打字速度
      
      return () => clearTimeout(timer);
    } else {
      setTypingChars(content.length);
    }
  }, [content, isStreaming]);
  
  // 确定显示内容
  const displayContent = error 
    ? `❌ ${error}` 
    : isStreaming 
      ? content.substring(0, typingChars)
      : content;
  
  // 角色样式
  const messageClass = role === 'user' 
    ? 'bg-blue-500 text-white ml-auto' 
    : 'bg-gray-200 text-gray-800 mr-auto';
  
  // 加载指示器
  const loadingIndicator = isStreaming && (
    <div className="flex space-x-1 ml-2">
      <div className="w-2 h-2 bg-gray-500 rounded-full animate-bounce" style={{ animationDelay: '0ms' }}></div>
      <div className="w-2 h-2 bg-gray-500 rounded-full animate-bounce" style={{ animationDelay: '150ms' }}></div>
      <div className="w-2 h-2 bg-gray-500 rounded-full animate-bounce" style={{ animationDelay: '300ms' }}></div>
    </div>
  );
  
  return (
    <div className="flex items-end mb-4">
      <div className={`max-w-[80%] p-3 rounded-lg ${messageClass}`}>
        {displayContent}
      </div>
      {loadingIndicator}
    </div>
  );
}

实战技巧

骨架屏设计：为对话列表实现骨架屏加载状态：

// 功能：对话列表骨架屏组件
// 参数：count-骨架屏数量
export function ChatSkeleton({ count = 3 }: { count?: number }) {
  return (
    <div className="space-y-4">
      {Array.from({ length: count }).map((_, index) => (
        <div key={index} className="flex items-end">
          <div className="w-3/4 h-12 bg-gray-200 rounded-lg animate-pulse"></div>
        </div>
      ))}
    </div>
  );
}

// 使用示例
function ChatHistory() {
  const { messages, isLoading } = useChat();
  
  if (isLoading && messages.length === 0) {
    return <ChatSkeleton count={3} />;
  }
  
  return (
    <div className="space-y-4">
      {messages.map(msg => (
        <ChatMessage key={msg.id || msg.timestamp} message={msg} />
      ))}
    </div>
  );
}

响应式布局：使用Tailwind实现适配不同设备的界面：

// 功能：响应式对话布局组件
// 参数：children-子组件
export function ChatLayout({ children }: { children: React.ReactNode }) {
  return (
    <div className="flex flex-col h-screen">
      {/* 头部导航 */}
      <header className="border-b p-4 flex items-center justify-between">
        <h1 className="text-xl font-bold">Langchain-Chatchat</h1>
        <div className="flex items-center space-x-4">
          <button className="hidden md:block">设置</button>
          <button>用户</button>
        </div>
      </header>
      
      {/* 主内容区 */}
      <div className="flex flex-1 overflow-hidden">
        {/* 侧边栏 - 在移动设备上隐藏，通过抽屉菜单访问 */}
        <aside className="w-64 border-r hidden md:block">
          <nav className="p-4 space-y-2">
            <button className="w-full p-2 bg-blue-500 text-white rounded">对话</button>
            <button className="w-full p-2 hover:bg-gray-100 rounded">知识库</button>
            <button className="w-full p-2 hover:bg-gray-100 rounded">Agent工具</button>
          </nav>
        </aside>
        
        {/* 主内容 */}
        <main className="flex-1 overflow-auto p-4">
          {children}
        </main>
      </div>
      
      {/* 底部输入区 */}
      <footer className="border-t p-4">
        <ChatInput onSend={sendMessage} />
      </footer>
    </div>
  );
}

错误处理策略：实现友好的错误提示和恢复机制：

// 功能：错误处理组件
// 参数：error-错误对象，onRetry-重试回调
export function ErrorMessage({ 
  error, 
  onRetry 
}: { 
  error: Error; 
  onRetry?: () => void 
}) {
  // 错误分类处理
  const getErrorInfo = () => {
    if (error.message.includes('network')) {
      return {
        title: '网络连接错误',
        description: '无法连接到服务器，请检查网络连接后重试',
        icon: '🔌'
      };
    } else if (error.message.includes('timeout')) {
      return {
        title: '请求超时',
        description: '服务器响应时间过长，请稍后重试或尝试简化问题',
        icon: '⏱️'
      };
    } else {
      return {
        title: '操作失败',
        description: error.message || '发生未知错误',
        icon: '⚠️'
      };
    }
  };
  
  const { title, description, icon } = getErrorInfo();
  
  return (
    <div className="bg-red-50 border border-red-200 rounded-lg p-4 mb-4">
      <div className="flex items-start">
        <span className="text-2xl mr-3">{icon}</span>
        <div className="flex-1">
          <h3 className="font-medium text-red-800">{title}</h3>
          <p className="text-sm text-red-700 mt-1">{description}</p>
          
          {onRetry && (
            <button 
              onClick={onRetry}
              className="mt-3 text-sm bg-red-100 text-red-700 px-3 py-1 rounded hover:bg-red-200"
            >
              重试
            </button>
          )}
        </div>
      </div>
    </div>
  );
}

实战指南：从开发到部署的全流程优化

如何确保前端项目从开发到部署的质量和效率？Langchain-Chatchat采用了一系列工程化实践，包括代码规范、测试策略和构建优化，确保项目的可维护性和性能表现。

开发环境配置了ESLint和Prettier确保代码风格一致，使用Jest和React Testing Library进行组件测试，通过GitHub Actions实现自动化构建和部署。生产环境则采用代码分割、资源压缩和CDN加速等策略提升性能。

性能优化实现

针对AI应用的性能挑战，项目实施了多层次的优化策略：

组件懒加载：

// 功能：路由级别的组件懒加载
// 参数：无
import dynamic from 'next/dynamic';
import { Suspense } from 'react';
import { LoadingScreen } from '../components/LoadingScreen';

// 懒加载页面组件
const ChatPage = dynamic(() => import('../features/chat/ChatPage'), {
  suspense: true,
  loading: () => <LoadingScreen />
});

const KnowledgePage = dynamic(() => import('../features/knowledge/KnowledgePage'), {
  suspense: true,
  loading: () => <LoadingScreen />
});

const AgentPage = dynamic(() => import('../features/agent/AgentPage'), {
  suspense: true,
  loading: () => <LoadingScreen />
});

// 路由配置
export default function App() {
  return (
    <Suspense fallback={<LoadingScreen />}>
      <Router>
        <Route path="/" element={<ChatPage />} />
        <Route path="/knowledge" element={<KnowledgePage />} />
        <Route path="/agent" element={<AgentPage />} />
      </Router>
    </Suspense>
  );
}

图片优化：使用Next.js的Image组件自动优化图片：

// 功能：优化的图片组件
// 参数：src-图片路径，alt-替代文本，其他img属性
import Image from 'next/image';

export function OptimizedImage({ 
  src, 
  alt, 
  ...props 
}: { 
  src: string; 
  alt: string; 
} & React.ImgHTMLAttributes<HTMLImageElement>) {
  return (
    <Image
      src={src}
      alt={alt}
      loading="lazy"
      quality={80}
      sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
      {...props}
    />
  );
}

实战技巧

开发环境配置：创建统一的开发配置：

// .eslintrc.json
{
  "extends": [
    "next/core-web-vitals",
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:react-hooks/recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  "rules": {
    "react/react-in-jsx-scope": "off",
    "react/prop-types": "off",
    "@typescript-eslint/no-unused-vars": ["error", { "argsIgnorePattern": "^_" }]
  }
}

// tsconfig.json
{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}

测试策略：编写组件测试确保功能稳定性：

// 功能：对话输入组件测试
// 参数：无
import { render, screen, fireEvent } from '@testing-library/react';
import ChatInput from '../components/ChatInput';

describe('ChatInput', () => {
  test('calls onSend when Enter is pressed', () => {
    const mockSend = jest.fn();
    render(<ChatInput onSend={mockSend} />);
    
    const input = screen.getByPlaceholderText(/请输入对话内容/i);
    fireEvent.change(input, { target: { value: '测试消息' } });
    fireEvent.keyDown(input, { key: 'Enter', shiftKey: false });
    
    expect(mockSend).toHaveBeenCalledWith('测试消息');
    expect(input).toHaveValue('');
  });
  
  test('inserts newline when Shift+Enter is pressed', () => {
    const mockSend = jest.fn();
    render(<ChatInput onSend={mockSend} />);
    
    const input = screen.getByPlaceholderText(/请输入对话内容/i);
    fireEvent.change(input, { target: { value: '第一行' } });
    fireEvent.keyDown(input, { key: 'Enter', shiftKey: true });
    
    expect(input).toHaveValue('第一行\n');
    expect(mockSend).not.toHaveBeenCalled();
  });
});

部署优化：配置Next.js生产构建：

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  images: {
    domains: ['localhost'], // 配置图片域名
  },
  // 开启生产压缩
  compress: true,
  // 配置构建输出
  output: 'standalone',
  // 环境变量配置
  env: {
    API_BASE_URL: process.env.API_BASE_URL,
  },
  // 性能优化
  performance: {
    maxAssetSize: 512000, // 512KB
    maxEntrypointSize: 512000,
  }
}

module.exports = nextConfig