diff --git a/.env.exaple b/.env.exaple
new file mode 100644
index 0000000..5876800
--- /dev/null
+++ b/.env.exaple
@@ -0,0 +1,6 @@
+# APP ID
+NEXT_PUBLIC_APP_ID=
+# APP API key
+NEXT_PUBLIC_APP_KEY=
+# API url prefix
+NEXT_PUBLIC_API_URL=
\ No newline at end of file
diff --git a/app/components/chat/chat-input.tsx b/app/components/chat/chat-input.tsx
new file mode 100644
index 0000000..7f7d276
--- /dev/null
+++ b/app/components/chat/chat-input.tsx
@@ -0,0 +1,256 @@
+import React, { useState, useRef, useCallback, useEffect } from 'react';
+import { Input, Button, Upload, Tooltip, message as antdMessage, Space } from 'antd';
+import { SendOutlined, StopOutlined, PaperClipOutlined, PictureOutlined } from '@ant-design/icons';
+import type { VisionFile } from '../../types/dify_chat';
+import '../../styles/components/chat-with-llm/chat-input.css';
+
+const { TextArea } = Input;
+
+interface ChatInputProps {
+    onSendMessage: (message: string, files?: VisionFile[]) => void;
+    disabled?: boolean;
+    placeholder?: string;
+    onStop?: () => void;
+    isResponding?: boolean;
+    visionConfig?: {
+        enabled: boolean;
+        number_limits?: number;
+        image_file_size_limit?: number;
+        transfer_methods?: string[];
+    };
+}
+
+/**
+ * 聊天输入组件
+ */
+export default function ChatInput({
+    onSendMessage,
+    disabled = false,
+    placeholder = '输入消息...',
+    onStop,
+    isResponding = false,
+    visionConfig,
+}: ChatInputProps) {
+    const [message, setMessage] = useState('');
+    const [files, setFiles] = useState<VisionFile[]>([]);
+    const textareaRef = useRef<any>(null);
+    const isComposing = useRef(false);
+
+    /**
+     * 提交消息
+     */
+    const handleSubmit = () => {
+        if (!message.trim() || disabled) return;
+
+        onSendMessage(message, files.length > 0 ? files : undefined);
+        setMessage('');
+        setFiles([]);
+
+        // 聚焦回输入框
+        setTimeout(() => {
+            textareaRef.current?.focus();
+        }, 10);
+    };
+
+    /**
+     * 处理键盘事件
+     */
+    const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+        // 处理输入法状态
+        if (e.nativeEvent.isComposing) {
+            isComposing.current = true;
+            return;
+        }
+
+        // Enter发送，Shift+Enter换行
+        if (e.key === 'Enter' && !e.shiftKey && !isComposing.current) {
+            e.preventDefault();
+            handleSubmit();
+        }
+    };
+
+    /**
+     * 处理输入法结束
+     */
+    const handleCompositionEnd = () => {
+        isComposing.current = false;
+    };
+
+    /**
+     * 停止响应
+     */
+    const handleStop = () => {
+        onStop?.();
+    };
+
+    /**
+     * 处理文件上传
+     */
+    const handleFileUpload = (file: File) => {
+        // 检查文件数量限制
+        if (visionConfig?.number_limits && files.length >= visionConfig.number_limits) {
+            antdMessage.error(`最多只能上传 ${visionConfig.number_limits} 个文件`);
+            return false;
+        }
+
+        // 检查文件大小限制
+        if (visionConfig?.image_file_size_limit) {
+            const limitMB = visionConfig.image_file_size_limit;
+            const fileSizeMB = file.size / (1024 * 1024);
+            if (fileSizeMB > limitMB) {
+                antdMessage.error(`文件大小不能超过 ${limitMB}MB`);
+                return false;
+            }
+        }
+
+        // 检查文件类型
+        if (!file.type.startsWith('image/')) {
+            antdMessage.error('只支持图片文件');
+            return false;
+        }
+
+        // 创建文件对象
+        const reader = new FileReader();
+        reader.onload = (e) => {
+            const newFile: VisionFile = {
+                id: `file-${Date.now()}-${Math.random()}`,
+                type: 'image',
+                transfer_method: 'local_file' as any,
+                url: e.target?.result as string,
+                upload_file_id: '',
+            };
+
+            setFiles(prev => [...prev, newFile]);
+        };
+        reader.readAsDataURL(file);
+
+        return false; // 阻止默认上传行为
+    };
+
+    /**
+     * 移除文件
+     */
+    const handleRemoveFile = (fileId: string) => {
+        setFiles(prev => prev.filter(file => file.id !== fileId));
+    };
+
+    /**
+     * 渲染文件预览
+     */
+    const renderFilePreview = () => {
+        if (files.length === 0) return null;
+
+        return (
+            <div className="flex flex-wrap gap-2 mb-2 p-2 bg-gray-50 rounded">
+                {files.map((file) => (
+                    <div key={file.id} className="relative group">
+                        <img
+                            src={file.url}
+                            alt="预览"
+                            className="w-16 h-16 object-cover rounded border"
+                        />
+                        <Button
+                            type="text"
+                            size="small"
+                            className="absolute -top-1 -right-1 bg-red-500 text-white rounded-full w-5 h-5 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"
+                            onClick={() => handleRemoveFile(file.id!)}
+                        >
+                            ×
+                        </Button>
+                    </div>
+                ))}
+            </div>
+        );
+    };
+
+    /**
+     * 渲染上传按钮
+     */
+    const renderUploadButton = () => {
+        if (!visionConfig?.enabled) return null;
+
+        const isDisabled = disabled || (visionConfig.number_limits ? files.length >= visionConfig.number_limits : false);
+
+        return (
+            <Upload
+                beforeUpload={handleFileUpload}
+                showUploadList={false}
+                accept="image/*"
+                multiple={false}
+            >
+                <Tooltip title="上传图片">
+                    <Button
+                        type="text"
+                        icon={<PictureOutlined />}
+                        size="small"
+                        disabled={isDisabled}
+                        className="text-gray-500 hover:text-blue-500"
+                    />
+                </Tooltip>
+            </Upload>
+        );
+    };
+
+    return (
+        <div className="border-t border-gray-200 bg-white p-4">
+            <div className="max-w-4xl mx-auto">
+                {/* 文件预览 */}
+                {renderFilePreview()}
+
+                {/* 输入区域 */}
+                <div className="relative">
+                    <div className="flex items-end gap-2">
+                        {/* 上传按钮 */}
+                        <div className="flex items-end pb-1">
+                            {renderUploadButton()}
+                        </div>
+
+                        {/* 文本输入 */}
+                        <div className="flex-1">
+                            <TextArea
+                                ref={textareaRef}
+                                value={message}
+                                onChange={(e) => setMessage(e.target.value)}
+                                onKeyDown={handleKeyDown}
+                                onCompositionEnd={handleCompositionEnd}
+                                placeholder={placeholder}
+                                disabled={disabled}
+                                autoSize={{ minRows: 1, maxRows: 6 }}
+                                className="resize-none"
+                                style={{ paddingRight: '50px' }}
+                            />
+                        </div>
+
+                        {/* 发送/停止按钮 */}
+                        <div className="flex items-end pb-1">
+                            {isResponding ? (
+                                <Tooltip title="停止生成">
+                                    <Button
+                                        type="primary"
+                                        danger
+                                        icon={<StopOutlined />}
+                                        onClick={handleStop}
+                                        disabled={disabled}
+                                        size="large"
+                                    />
+                                </Tooltip>
+                            ) : (
+                                <Tooltip title="发送消息 (Enter)">
+                                    <Button
+                                        type="primary"
+                                        icon={<SendOutlined />}
+                                        onClick={handleSubmit}
+                                        disabled={disabled || !message.trim()}
+                                        size="large"
+                                    />
+                                </Tooltip>
+                            )}
+                        </div>
+                    </div>
+
+                    {/* 字符计数和提示 */}
+                </div>
+            </div>
+        </div>
+    );
+} 
\ No newline at end of file
diff --git a/app/components/chat/chat-message.tsx b/app/components/chat/chat-message.tsx
new file mode 100644
index 0000000..920f4ab
--- /dev/null
+++ b/app/components/chat/chat-message.tsx
@@ -0,0 +1,208 @@
+import React, { useState } from 'react';
+import { Button, Tooltip, Avatar, Card, Image, Spin } from 'antd';
+import { AntDesignOutlined, SmileTwoTone, RobotOutlined } from '@ant-design/icons';
+import type { ChatItem, Feedbacktype, ThoughtItem, VisionFile } from '../../types/dify_chat';
+import { CHAT_CONFIG } from '../../config/chat';
+import Markdown from './markdown';
+import ThoughtProcess from './thought-process';
+import { Dayjs } from 'dayjs';
+import '../../styles/components/chat-with-llm/chat-message.css';
+
+interface ChatMessageProps {
+    message: ChatItem;
+    onFeedback?: (messageId: string, feedback: Feedbacktype) => void;
+    isResponding?: boolean;
+    onRegenerate?: (messageId: string) => void;
+}
+
+/**
+ * 聊天消息组件
+ */
+export default function ChatMessage({
+    message,
+    onFeedback,
+    isResponding = false,
+    onRegenerate
+}: ChatMessageProps) {
+    const [feedback, setFeedback] = useState<'like' | 'dislike' | null>(
+        message.feedback?.rating || null
+    );
+
+    const { id, content, isAnswer, agent_thoughts, message_files, isOpeningStatement, suggestedQuestions, more } = message;
+    const isAgentMode = !!agent_thoughts && agent_thoughts.length > 0;
+
+    /**
+     * 处理反馈
+     */
+    const handleFeedback = async (type: 'like' | 'dislike') => {
+        if (!id || id.startsWith('placeholder-') || id.startsWith('question-') || id.startsWith('opening-'))
+            return;
+
+        // 如果已经选择了相同的反馈，则取消选择
+        const newFeedback = feedback === type ? null : type;
+        setFeedback(newFeedback);
+
+        await onFeedback?.(id, {
+            rating: newFeedback,
+        });
+    };
+
+    /**
+     * 渲染AI回答内容
+     */
+    const renderAnswerContent = () => {
+        // console.log('🎨 渲染AI回答内容:', { content, isResponding, isAgentMode });
+
+        // 如果正在响应且没有内容
+        if (isResponding && (isAgentMode ? (!content && (agent_thoughts || []).filter(item => !!item.thought || !!item.tool).length === 0) : !content)) {
+            return (
+                <div className="responding-indicator">
+                    <Spin size="small" />
+                    <span>AI 正在思考...</span>
+                </div>
+            );
+        }
+
+        // Agent模式（有思考过程）
+        if (isAgentMode) {
+            return (
+                <div className="space-y-3">
+                    {agent_thoughts?.map((thought, index) => (
+                        <div key={index}>
+                            {thought.thought && (
+                                <div className={isResponding && index === agent_thoughts.length - 1 ? 'streaming-text' : ''}>
+                                    <Markdown content={thought.thought} />
+                                </div>
+                            )}
+                            {thought.tool && (
+                                <ThoughtProcess
+                                    thought={thought}
+                                    isFinished={!!thought.observation || !isResponding}
+                                />
+                            )}
+                        </div>
+                    ))}
+                </div>
+            );
+        }
+
+        // 普通模式 - 恢复Markdown渲染
+        return (
+            <div>
+                <div className={isResponding ? 'streaming-text' : ''}>
+                    <Markdown content={content} />
+                </div>
+            </div>
+        );
+    };
+
+    /**
+     * 渲染建议问题
+     */
+    const renderSuggestedQuestions = () => {
+        if (!suggestedQuestions || suggestedQuestions.length === 0) return null;
+
+        return (
+            <div className="suggested-questions">
+                <div className="text-sm text-gray-500 mb-2">建议问题：</div>
+                <div className="flex flex-wrap gap-2">
+                    {suggestedQuestions.map((question, index) => (
+                        <Button
+                            key={index}
+                            size="small"
+                            type="dashed"
+                            className="question-button text-left"
+                            onClick={() => {
+                                // 这里可以添加点击建议问题的处理逻辑
+                                console.log('Suggested question clicked:', question);
+                            }}
+                        >
+                            {question}
+                        </Button>
+                    ))}
+                </div>
+            </div>
+        );
+    };
+
+    /**
+     * 渲染消息元信息
+     */
+    const renderMessageMeta = () => {
+        if (!more) return null;
+
+        return (
+            <div className="message-timestamp">
+                {more.time && <span>时间: {more.time}</span>}
+                {more.tokens && <span className="ml-2">Token: {more.tokens}</span>}
+                {more.latency && <span className="ml-2">延迟: {more.latency}</span>}
+            </div>
+        );
+    };
+
+    // 如果是开场白，特殊处理
+    if (isOpeningStatement) {
+        return (
+            <div className="chat-message">
+                <Card className="message-card assistant" size="small">
+                    <div className="flex items-start gap-3">
+                        {/* <Avatar icon={<RobotOutlined />} className="flex-shrink-0" />
+                         */}
+                        <Avatar
+                            size={{ xs: 24, sm: 32, md: 40, lg: 64, xl: 80, xxl: 100 }}
+                            icon={<RobotOutlined />}
+                        />
+                        <div className="flex-1">
+                            <Markdown content={content} />
+                            {renderSuggestedQuestions()}
+                        </div>
+                    </div>
+                </Card>
+            </div>
+        );
+    }
+
+    return (
+        <div className="chat-message">
+            <div className={`flex ${isAnswer ? 'justify-start' : 'justify-end'} mb-2`}>
+                <div className={`message-card ${isAnswer ? 'assistant' : 'user'}`}>
+                    <Card size="small" className="shadow-sm">
+                        <div className="flex items-start gap-2">
+                            {/* 头像 */}
+                            <Avatar
+                                icon={isAnswer ? <RobotOutlined /> : <SmileTwoTone />}
+                                className="flex-shrink-0"
+                                style={{
+                                    backgroundColor: isAnswer ? '#1890ff' : '#52c41a'
+                                }}
+                            />
+
+                            {/* 消息内容 */}
+                            <div className="flex-1 min-w-0">
+                                {isAnswer ? renderAnswerContent() : (
+                                    <div>
+                                        <Markdown content={content} />
+                                        {/* {renderImages(message_files)} */}
+                                    </div>
+                                )}
+
+                                {/* 建议问题 */}
+                                {/* {isAnswer && renderSuggestedQuestions()} */}
+
+                                {/* 消息元信息 */}
+                                {/* {renderMessageMeta()} */}
+
+                                {/* 反馈按钮 */}
+                                {/* {isAnswer && (
+                                    <div className="feedback-buttons">
+                                        {renderFeedbackButtons()}
+                                    </div>
+                                )} */}
+                            </div>
+                        </div>
+                    </Card>
+                </div>
+            </div>
+        </div>
+    );
+} 
\ No newline at end of file
diff --git a/app/components/chat/index.tsx b/app/components/chat/index.tsx
new file mode 100644
index 0000000..8af8770
--- /dev/null
+++ b/app/components/chat/index.tsx
@@ -0,0 +1,571 @@
+import { useState, useEffect, useRef } from 'react';
+import { produce } from 'immer';
+import { useBoolean, useGetState } from 'ahooks';
+import { Layout, theme } from 'antd';
+import ChatMessage from './chat-message';
+import ChatInput from './chat-input';
+import ChatSidebar, { type ChatSidebarRef } from './sidebar';
+// import Header from '../layout/Header';
+import useConversation from '../../hooks/use-conversation';
+import useChatMessage from '../../hooks/use-chat-message';
+import type { ChatItem, ConversationItem } from '../../types/dify_chat';
+import { CHAT_CONFIG } from '../../config/chat';
+import { fetchConversations, fetchAppParams, fetchChatList } from '../../services/api.client';
+import '../../styles/components/chat-with-llm/index.css';
+
+const { Content } = Layout;
+
+/**
+ * 主聊天组件
+ * 实现单页面应用模式，参考webapp-conversation的初始化逻辑
+ */
+export default function Chat() {
+    // 侧边栏状态
+    const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
+    const {
+        token: { colorBgContainer, borderRadiusLG },
+    } = theme.useToken();
+
+    // 会话管理
+    const {
+        conversationList,
+        setConversationList,
+        currConversationId,
+        getCurrConversationId,
+        setCurrConversationId,
+        getConversationIdFromStorage,
+        isNewConversation,
+        currInputs,
+        newConversationInputs,
+        resetNewConversationInputs,
+        setCurrInputs,
+        currConversationInfo,
+        setNewConversationInfo,
+        setExistConversationInfo,
+        addConversationToList,
+        updateConversationInList,
+        removeConversationFromList,
+    } = useConversation();
+
+    // 消息管理
+    const {
+        chatList,
+        setChatList,
+        getChatList,
+        isResponding,
+        handleSend,
+        stopResponding,
+        handleFeedback,
+    } = useChatMessage({
+        onUpdateConversationList: updateConversationInList,
+        onConversationIdChange: async (conversationId: string) => {
+            console.log('🔄 收到会话ID变更通知:', conversationId);
+
+            // 设置当前会话ID（这会触发localStorage更新）
+            setCurrConversationId(conversationId, CHAT_CONFIG.APP_ID);
+
+            // 如果是新会话，添加到会话列表
+            const existingConversation = conversationList.find(item => item.id === conversationId);
+            if (!existingConversation) {
+                console.log('🆕 添加新会话到列表:', conversationId);
+                const newConversation = {
+                    id: conversationId,
+                    name: '新对话',
+                    inputs: currInputs || {},
+                    introduction: '',
+                };
+                addConversationToList(newConversation);
+
+                // 检查是否需要自动重命名（新对话的第一条消息）
+                if (!newConversationFirstMessageSent.has(conversationId)) {
+                    console.log('🏷️ 新对话第一条消息，准备自动重命名:', conversationId);
+
+                    // 标记该对话已发送第一条消息
+                    setNewConversationFirstMessageSent(prev => new Set(prev).add(conversationId));
+
+                    // 延迟一下确保组件状态已更新
+                    setTimeout(async () => {
+                        try {
+                            if (sidebarRef.current) {
+                                await sidebarRef.current.autoRename(conversationId);
+                                console.log('✅ 新对话自动重命名完成:', conversationId);
+                            } else {
+                                console.warn('⚠️ 侧边栏引用不可用，无法自动重命名');
+                            }
+                        } catch (error) {
+                            console.error('❌ 新对话自动重命名失败:', error);
+                        }
+                    }, 1000);
+                }
+            }
+        },
+    });
+
+    // 应用状态
+    const [appUnavailable, setAppUnavailable] = useState<boolean>(false);
+    const [isUnknownReason, setIsUnknownReason] = useState<boolean>(false);
+    const [inited, setInited] = useState<boolean>(false);
+    const [promptConfig, setPromptConfig] = useState<any>(null);
+
+    // 会话状态管理
+    const [conversationIdChangeBecauseOfNew, setConversationIdChangeBecauseOfNew, getConversationIdChangeBecauseOfNew] = useGetState(false);
+    const [isChatStarted, { setTrue: setChatStarted, setFalse: setChatNotStarted }] = useBoolean(false);
+
+    // 聊天列表容器引用
+    const chatListDomRef = useRef<HTMLDivElement>(null);
+
+    // 侧边栏组件引用
+    const sidebarRef = useRef<ChatSidebarRef>(null);
+
+    // 跟踪新对话是否已发送第一条消息
+    const [newConversationFirstMessageSent, setNewConversationFirstMessageSent] = useState<Set<string>>(new Set());
+
+    // 检查应用配置
+    const hasSetAppConfig = CHAT_CONFIG.APP_ID && CHAT_CONFIG.API_KEY;
+
+    /**
+     * 处理开始聊天
+     */
+    const handleStartChat = (inputs: Record<string, any>) => {
+        createNewChat();
+        setConversationIdChangeBecauseOfNew(true);
+        setCurrInputs(inputs);
+        setChatStarted();
+        // 解析变量并生成开场白
+        setChatList(generateNewChatListWithOpenStatement('', inputs));
+    };
+
+    /**
+     * 创建新聊天
+     */
+    const createNewChat = () => {
+        setChatList([]);
+        setChatNotStarted();
+        resetNewConversationInputs();
+    };
+
+    /**
+     * 生成带开场白的新聊天列表
+     */
+    const generateNewChatListWithOpenStatement = (introduction?: string, inputs?: Record<string, any> | null): ChatItem[] => {
+        const newChatList: ChatItem[] = [];
+
+        if (introduction) {
+            newChatList.push({
+                id: `opening-statement-${Date.now()}`,
+                content: introduction,
+                isAnswer: true,
+                isOpeningStatement: true,
+            });
+        }
+
+        return newChatList;
+    };
+
+    /**
+     * 处理会话切换
+     */
+    const handleConversationSwitch = async () => {
+        if (!inited) {
+            return;
+        }
+
+        console.log('🔄 处理会话切换:', { currConversationId, isNewConversation });
+
+        // 更新当前会话的输入
+        let notSyncToStateIntroduction = '';
+        let notSyncToStateInputs: Record<string, any> | undefined | null = {};
+
+        if (!isNewConversation) {
+            const item = conversationList.find(item => item.id === currConversationId);
+            notSyncToStateInputs = item?.inputs || {};
+            setCurrInputs(notSyncToStateInputs as any);
+            notSyncToStateIntroduction = item?.introduction || '';
+            setExistConversationInfo({
+                name: item?.name || '',
+                introduction: notSyncToStateIntroduction,
+            });
+        } else {
+            notSyncToStateInputs = newConversationInputs;
+            setCurrInputs(notSyncToStateInputs);
+        }
+
+        // 更新当前会话的聊天列表
+        if (!isNewConversation && !conversationIdChangeBecauseOfNew && !isResponding) {
+            try {
+                console.log('📨 获取会话历史消息:', currConversationId);
+
+                // 调用API获取历史消息
+                const response = await fetchChatList(currConversationId);
+                console.log('📋 历史消息响应:', response);
+
+                if (response && (response as any).data) {
+                    const { data: historyMessages } = response as any;
+
+                    // 生成新的聊天列表，包含开场白
+                    const newChatList: ChatItem[] = generateNewChatListWithOpenStatement(notSyncToStateIntroduction, notSyncToStateInputs);
+
+                    // 添加历史消息
+                    historyMessages.forEach((item: any) => {
+                        // 添加用户问题
+                        newChatList.push({
+                            id: `question-${item.id}`,
+                            content: item.query,
+                            isAnswer: false,
+                            message_files: item.message_files?.filter((file: any) => file.belongs_to === 'user') || [],
+                        });
+
+                        // 添加AI回答
+                        newChatList.push({
+                            id: item.id,
+                            content: item.answer,
+                            agent_thoughts: item.agent_thoughts || [],
+                            feedback: item.feedback,
+                            isAnswer: true,
+                            message_files: item.message_files?.filter((file: any) => file.belongs_to === 'assistant') || [],
+                        });
+                    });
+
+                    console.log('✅ 设置历史聊天列表:', newChatList.length, '条消息');
+                    setChatList(newChatList);
+                } else {
+                    console.warn('⚠️ 获取历史消息失败或无数据');
+                    // 如果获取失败，至少显示开场白
+                    const newChatList: ChatItem[] = generateNewChatListWithOpenStatement(notSyncToStateIntroduction, notSyncToStateInputs);
+                    setChatList(newChatList);
+                }
+            } catch (error) {
+                console.error('❌ 获取历史消息失败:', error);
+                // 如果获取失败，至少显示开场白
+                const newChatList: ChatItem[] = generateNewChatListWithOpenStatement(notSyncToStateIntroduction, notSyncToStateInputs);
+                setChatList(newChatList);
+            }
+        }
+
+        if (isNewConversation && isChatStarted) {
+            setChatList(generateNewChatListWithOpenStatement());
+        }
+    };
+
+    /**
+     * 处理会话ID变化
+     */
+    const handleConversationIdChange = (id: string) => {
+        console.log('🔄 会话ID变化:', { id, currentId: currConversationId });
+
+        if (id === '-1') {
+            createNewChat();
+            setConversationIdChangeBecauseOfNew(true);
+        } else {
+            setConversationIdChangeBecauseOfNew(false);
+        }
+
+        // 触发会话切换
+        setCurrConversationId(id, CHAT_CONFIG.APP_ID);
+    };
+
+    /**
+     * 检查是否可以发送消息
+     */
+    const checkCanSend = () => {
+        if (currConversationId !== '-1') {
+            return true;
+        }
+
+        if (!currInputs || !promptConfig?.prompt_variables) {
+            return true;
+        }
+
+        const inputLens = Object.values(currInputs).length;
+        const promptVariablesLens = promptConfig.prompt_variables.length;
+
+        const emptyInput = inputLens < promptVariablesLens || Object.values(currInputs).find(v => !v);
+        if (emptyInput) {
+            console.error('必填变量值不能为空');
+            return false;
+        }
+        return true;
+    };
+
+    /**
+     * 处理发送消息
+     */
+    const handleSendMessage = async (message: string, files?: any[]) => {
+        if (isResponding) {
+            console.log('正在响应中，请等待...');
+            return;
+        }
+
+        if (!checkCanSend()) {
+            return;
+        }
+
+        // console.log('📤 发送消息:', { message, conversationId: currConversationId });
+
+        try {
+            // 准备输入数据
+            const toServerInputs: Record<string, any> = {};
+            if (currInputs) {
+                Object.keys(currInputs).forEach((key) => {
+                    toServerInputs[key] = currInputs[key];
+                });
+            }
+
+            // 使用 useChatMessage 钩子的 handleSend 方法
+            await handleSend(
+                message,
+                isNewConversation ? null : currConversationId,
+                files,
+                toServerInputs
+            );
+
+        } catch (error) {
+            console.error('发送消息失败:', error);
+        }
+    };
+
+    /**
+     * 处理侧边栏切换
+     */
+    const handleSidebarToggle = () => {
+        setSidebarCollapsed(!sidebarCollapsed);
+    };
+
+    /**
+     * 处理会话选择
+     */
+    const handleConversationSelect = (conversationId: string) => {
+        if (conversationId !== currConversationId) {
+            setCurrConversationId(conversationId, CHAT_CONFIG.APP_ID);
+        }
+    };
+
+    /**
+     * 处理新建会话
+     */
+    const handleNewConversation = () => {
+        setCurrConversationId('-1', CHAT_CONFIG.APP_ID, false);
+        createNewChat();
+    };
+
+    /**
+     * 处理会话删除后的状态更新
+     */
+    const handleConversationDeleted = (conversationId: string) => {
+        console.log('🗑️ 处理会话删除后的状态更新:', conversationId);
+
+        // 如果删除的是当前会话，切换到新会话
+        if (conversationId === currConversationId) {
+            handleNewConversation();
+        }
+
+        // 从列表中移除会话
+        removeConversationFromList(conversationId);
+
+        console.log('✅ 会话删除状态更新完成:', conversationId);
+    };
+
+    /**
+     * 处理会话重命名后的状态更新
+     */
+    const handleConversationRenamed = (conversationId: string, newName: string) => {
+        console.log('✏️ 处理会话重命名后的状态更新:', { conversationId, newName });
+
+        // 更新本地会话列表中的名称
+        updateConversationInList(conversationId, { name: newName });
+
+        console.log('✅ 会话重命名状态更新完成:', conversationId, '->', newName);
+    };
+
+    /**
+     * 组件初始化 - 参考webapp-conversation的逻辑
+     */
+    useEffect(() => {
+        if (!hasSetAppConfig) {
+            console.error('应用配置不完整');
+            setAppUnavailable(true);
+            return;
+        }
+
+        (async () => {
+            try {
+                console.log('🚀 开始初始化聊天应用...');
+
+                // 并行获取会话列表和应用参数
+                const [conversationData, appParams] = await Promise.all([
+                    fetchConversations(),
+                    fetchAppParams()
+                ]);
+
+                console.log('📋 获取到的数据:', { conversationData, appParams });
+
+                // 处理会话数据
+                const conversations = (conversationData as any).data || [];
+                if ((conversationData as any).error) {
+                    console.error('获取会话列表失败:', (conversationData as any).error);
+                    throw new Error((conversationData as any).error);
+                }
+
+                // 处理当前会话ID
+                const _conversationId = getConversationIdFromStorage(CHAT_CONFIG.APP_ID);
+                const isNotNewConversation = conversations.some((item: ConversationItem) => item.id === _conversationId);
+
+                console.log('💾 本地存储的会话ID:', _conversationId);
+                console.log('🔍 是否为已存在的会话:', isNotNewConversation);
+
+                // 获取新会话信息
+                const { user_input_form, opening_statement: introduction } = (appParams as any).data || {};
+
+                setNewConversationInfo({
+                    name: '新对话',
+                    introduction: introduction || '',
+                });
+
+                // 设置提示配置
+                setPromptConfig({
+                    prompt_template: '',
+                    prompt_variables: user_input_form || [],
+                });
+
+                // 设置会话列表
+                setConversationList(conversations);
+
+                // 如果存在有效的会话ID，则设置为当前会话
+                if (isNotNewConversation) {
+                    console.log('🎯 设置当前会话ID:', _conversationId);
+                    setCurrConversationId(_conversationId, CHAT_CONFIG.APP_ID, false);
+                } else {
+                    // 如果localStorage为空或会话不存在，自动创建新会话
+                    console.log('🆕 localStorage为空或会话不存在，创建新会话');
+                    setCurrConversationId('-1', CHAT_CONFIG.APP_ID, false);
+                }
+
+                setInited(true);
+                console.log('✅ 聊天应用初始化完成');
+            } catch (e: any) {
+                console.error('❌ 初始化失败:', e);
+                if (e.status === 404) {
+                    setAppUnavailable(true);
+                } else {
+                    setIsUnknownReason(true);
+                    setAppUnavailable(true);
+                }
+            }
+        })();
+    }, []);
+
+    // 监听会话切换
+    useEffect(() => {
+        handleConversationSwitch();
+    }, [currConversationId, inited]);
+
+    // 自动滚动到底部
+    useEffect(() => {
+        if (chatListDomRef.current) {
+            chatListDomRef.current.scrollTop = chatListDomRef.current.scrollHeight;
+        }
+    }, [chatList]);
+
+    // 如果应用不可用，显示错误页面
+    if (appUnavailable) {
+        return (
+            <div className="flex items-center justify-center h-full">
+                <div className="text-center">
+                    <h2 className="text-xl font-semibold text-gray-900 mb-2">应用暂时不可用</h2>
+                    <p className="text-gray-600">
+                        {isUnknownReason ? '发生了未知错误，请稍后重试' : '应用配置不正确，请检查配置'}
+                    </p>
+                </div>
+            </div>
+        );
+    }
+
+    // 如果未初始化完成，显示加载状态
+    if (!inited) {
+        return (
+            <div className="flex items-center justify-center h-full">
+                <div className="text-center">
+                    <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto mb-2"></div>
+                    <p className="text-gray-600">正在加载...</p>
+                </div>
+            </div>
+        );
+    }
+
+    // 判断是否已设置输入
+    const hasSetInputs = (() => {
+        if (!isNewConversation) {
+            return true;
+        }
+        return isChatStarted;
+    })();
+
+    const conversationName = currConversationInfo?.name || '新对话';
+    const conversationIntroduction = currConversationInfo?.introduction || '';
+
+    return (
+        <Layout style={{ height: '90vh' }}>
+            {/* 侧边栏 */}
+            <ChatSidebar
+                ref={sidebarRef}
+                collapsed={sidebarCollapsed}
+                onToggle={handleSidebarToggle}
+                conversations={conversationList}
+                currentConversationId={currConversationId}
+                onConversationSelect={handleConversationSelect}
+                onNewConversation={handleNewConversation}
+                onConversationDeleted={handleConversationDeleted}
+                onConversationRenamed={handleConversationRenamed}
+            />
+
+            {/* 主内容区域 */}
+            <Layout>
+                <Content
+                    style={{
+                        background: colorBgContainer,
+                        display: 'flex',
+                        flexDirection: 'column',
+                        height: '100%',
+                    }}
+                >
+                    {/* 聊天区域 */}
+                    <div className="flex-[0.85] overflow-hidden">
+                        <div
+                            ref={chatListDomRef}
+                            className="h-full overflow-y-auto px-4 py-4 space-y-2"
+                        >
+                            {/* 如果是新会话且未开始聊天，显示欢迎信息 */}
+                            {isNewConversation && !isChatStarted && (
+                                <div className="text-center py-8">
+                                    <h3 className="text-lg font-medium text-gray-900 mb-2">开始新的对话</h3>
+                                    <p className="text-gray-600">请在下方输入您的问题</p>
+                                </div>
+                            )}
+
+                            {/* 聊天消息列表 */}
+                            {chatList.map((item) => (
+                                <ChatMessage
+                                    key={item.id}
+                                    message={item}
+                                    isResponding={isResponding && item.id === chatList[chatList.length - 1]?.id}
+                                    onFeedback={handleFeedback}
+                                />
+                            ))}
+                        </div>
+                    </div>
+
+                    {/* 输入区域 */}
+                    <div className="flex-[0.16] border-t border-gray-200 bg-white">
+                        <ChatInput
+                            onSendMessage={handleSendMessage}
+                            disabled={isResponding}
+                            placeholder="请输入您的问题..."
+                            onStop={stopResponding}
+                            isResponding={isResponding}
+                        />
+                    </div>
+                </Content>
+            </Layout>
+        </Layout>
+    );
+} 
\ No newline at end of file
diff --git a/app/components/chat/markdown.tsx b/app/components/chat/markdown.tsx
new file mode 100644
index 0000000..bfa8454
--- /dev/null
+++ b/app/components/chat/markdown.tsx
@@ -0,0 +1,242 @@
+import React from 'react';
+import { Typography } from 'antd';
+import '../../styles/components/chat-with-llm/markdown.css';
+
+const { Paragraph, Text, Title } = Typography;
+
+interface MarkdownProps {
+    content: string;
+    className?: string;
+}
+
+/**
+ * Markdown 渲染组件
+ * 简化版本，支持基本的 Markdown 语法
+ */
+export default function Markdown({ content, className = '' }: MarkdownProps) {
+    if (!content) return null;
+
+    /**
+     * 简单的 Markdown 解析器
+     */
+    const parseMarkdown = (text: string): React.ReactNode => {
+        // 分割成行
+        const lines = text.split('\n');
+        const elements: React.ReactNode[] = [];
+        let currentParagraph: string[] = [];
+        let inCodeBlock = false;
+        let codeBlockContent: string[] = [];
+        let codeBlockLanguage = '';
+
+        const flushParagraph = () => {
+            if (currentParagraph.length > 0) {
+                const paragraphText = currentParagraph.join('\n');
+                elements.push(
+                    <Paragraph key={elements.length} className={className}>
+                        {parseInlineElements(paragraphText)}
+                    </Paragraph>
+                );
+                currentParagraph = [];
+            }
+        };
+
+        const flushCodeBlock = () => {
+            if (codeBlockContent.length > 0) {
+                elements.push(
+                    <pre
+                        key={elements.length}
+                        className="bg-gray-800 text-white p-3 rounded-md overflow-x-auto my-2"
+                    >
+                        <code className={codeBlockLanguage ? `language-${codeBlockLanguage}` : ''}>
+                            {codeBlockContent.join('\n')}
+                        </code>
+                    </pre>
+                );
+                codeBlockContent = [];
+                codeBlockLanguage = '';
+            }
+        };
+
+        lines.forEach((line, index) => {
+            // 处理代码块
+            if (line.startsWith('```')) {
+                if (inCodeBlock) {
+                    // 结束代码块
+                    flushCodeBlock();
+                    inCodeBlock = false;
+                } else {
+                    // 开始代码块
+                    flushParagraph();
+                    inCodeBlock = true;
+                    codeBlockLanguage = line.slice(3).trim();
+                }
+                return;
+            }
+
+            if (inCodeBlock) {
+                codeBlockContent.push(line);
+                return;
+            }
+
+            // 处理标题
+            if (line.startsWith('# ')) {
+                flushParagraph();
+                elements.push(
+                    <Title key={elements.length} level={1} className={className}>
+                        {parseInlineElements(line.slice(2))}
+                    </Title>
+                );
+                return;
+            }
+
+            if (line.startsWith('## ')) {
+                flushParagraph();
+                elements.push(
+                    <Title key={elements.length} level={2} className={className}>
+                        {parseInlineElements(line.slice(3))}
+                    </Title>
+                );
+                return;
+            }
+
+            if (line.startsWith('### ')) {
+                flushParagraph();
+                elements.push(
+                    <Title key={elements.length} level={3} className={className}>
+                        {parseInlineElements(line.slice(4))}
+                    </Title>
+                );
+                return;
+            }
+
+            // 处理列表
+            if (line.startsWith('- ') || line.startsWith('* ')) {
+                flushParagraph();
+                elements.push(
+                    <ul key={elements.length} className="list-disc list-inside my-2">
+                        <li>{parseInlineElements(line.slice(2))}</li>
+                    </ul>
+                );
+                return;
+            }
+
+            if (/^\d+\.\s/.test(line)) {
+                flushParagraph();
+                const match = line.match(/^\d+\.\s(.*)$/);
+                if (match) {
+                    elements.push(
+                        <ol key={elements.length} className="list-decimal list-inside my-2">
+                            <li>{parseInlineElements(match[1])}</li>
+                        </ol>
+                    );
+                }
+                return;
+            }
+
+            // 处理空行
+            if (line.trim() === '') {
+                flushParagraph();
+                return;
+            }
+
+            // 普通段落
+            currentParagraph.push(line);
+        });
+
+        // 处理剩余内容
+        flushParagraph();
+        flushCodeBlock();
+
+        return elements;
+    };
+
+    /**
+     * 解析行内元素（粗体、斜体、代码、链接等）
+     */
+    const parseInlineElements = (text: string): React.ReactNode => {
+        const parts: React.ReactNode[] = [];
+        let currentText = text;
+        let key = 0;
+
+        // 处理行内代码
+        currentText = currentText.replace(/`([^`]+)`/g, (match, code) => {
+            const placeholder = `__CODE_${key}__`;
+            parts.push(
+                <Text key={`code-${key}`} code className="bg-gray-100 px-1 rounded">
+                    {code}
+                </Text>
+            );
+            key++;
+            return placeholder;
+        });
+
+        // 处理粗体
+        currentText = currentText.replace(/\*\*([^*]+)\*\*/g, (match, bold) => {
+            const placeholder = `__BOLD_${key}__`;
+            parts.push(
+                <Text key={`bold-${key}`} strong>
+                    {bold}
+                </Text>
+            );
+            key++;
+            return placeholder;
+        });
+
+        // 处理斜体
+        currentText = currentText.replace(/\*([^*]+)\*/g, (match, italic) => {
+            const placeholder = `__ITALIC_${key}__`;
+            parts.push(
+                <Text key={`italic-${key}`} italic>
+                    {italic}
+                </Text>
+            );
+            key++;
+            return placeholder;
+        });
+
+        // 处理链接
+        currentText = currentText.replace(/\[([^\]]+)\]\(([^)]+)\)/g, (match, linkText, url) => {
+            const placeholder = `__LINK_${key}__`;
+            parts.push(
+                <a
+                    key={`link-${key}`}
+                    href={url}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-blue-500 hover:text-blue-700 underline"
+                >
+                    {linkText}
+                </a>
+            );
+            key++;
+            return placeholder;
+        });
+
+        // 重新组装文本
+        const finalParts: React.ReactNode[] = [];
+        const textParts = currentText.split(/(__(?:CODE|BOLD|ITALIC|LINK)_\d+__)/);
+
+        textParts.forEach((part, index) => {
+            const match = part.match(/^__(\w+)_(\d+)__$/);
+            if (match) {
+                const [, type, partKey] = match;
+                const component = parts.find((p: any) =>
+                    p.key === `${type.toLowerCase()}-${partKey}`
+                );
+                if (component) {
+                    finalParts.push(component);
+                }
+            } else if (part) {
+                finalParts.push(part);
+            }
+        });
+
+        return finalParts.length === 1 ? finalParts[0] : finalParts;
+    };
+
+    return (
+        <div className={`markdown-content ${className}`}>
+            {parseMarkdown(content)}
+        </div>
+    );
+} 
\ No newline at end of file
diff --git a/app/components/chat/sidebar.tsx b/app/components/chat/sidebar.tsx
new file mode 100644
index 0000000..41e72f7
--- /dev/null
+++ b/app/components/chat/sidebar.tsx
@@ -0,0 +1,397 @@
+import React, { useState, forwardRef, useImperativeHandle } from 'react';
+import { Button, Layout, Menu, theme, Input, Tooltip, Dropdown, Modal, message } from 'antd';
+import {
+    MenuFoldOutlined,
+    MenuUnfoldOutlined,
+    MessageOutlined,
+    PlusOutlined,
+    SearchOutlined,
+    MoreOutlined,
+    DeleteOutlined,
+    EditOutlined,
+    ExclamationCircleOutlined,
+} from '@ant-design/icons';
+import type { ConversationItem } from '../../types/dify_chat';
+import { deleteConversation, renameConversation } from '../../services/api.client';
+import '../../styles/components/chat-with-llm/sidebar.css';
+
+const { Sider } = Layout;
+
+interface ChatSidebarProps {
+    collapsed: boolean;
+    onToggle: () => void;
+    conversations: ConversationItem[];
+    currentConversationId: string;
+    onConversationSelect: (conversationId: string) => void;
+    onNewConversation: () => void;
+    onConversationDeleted?: (conversationId: string) => void;
+    onConversationRenamed?: (conversationId: string, newName: string) => void;
+}
+
+// 暴露给父组件的方法接口
+export interface ChatSidebarRef {
+    autoRename: (conversationId: string) => Promise<void>;
+}
+
+/**
+ * 聊天侧边栏组件
+ */
+const ChatSidebar = forwardRef<ChatSidebarRef, ChatSidebarProps>(({
+    collapsed,
+    onToggle,
+    conversations,
+    currentConversationId,
+    onConversationSelect,
+    onNewConversation,
+    onConversationDeleted,
+    onConversationRenamed,
+}, ref) => {
+    const [searchValue, setSearchValue] = useState('');
+    const [renameModalVisible, setRenameModalVisible] = useState(false);
+    const [deleteModalVisible, setDeleteModalVisible] = useState(false);
+    const [renamingConversation, setRenamingConversation] = useState<ConversationItem | null>(null);
+    const [deletingConversation, setDeletingConversation] = useState<ConversationItem | null>(null);
+    const [newName, setNewName] = useState('');
+    const [renameLoading, setRenameLoading] = useState(false);
+    const [deleteLoading, setDeleteLoading] = useState(false);
+    const {
+        token: { colorBgContainer, borderRadiusLG },
+    } = theme.useToken();
+
+    // 过滤会话列表
+    const filteredConversations = conversations.filter(conv =>
+        conv.name.toLowerCase().includes(searchValue.toLowerCase())
+    );
+
+    // 处理重命名
+    const handleRename = (conv: ConversationItem) => {
+        setRenamingConversation(conv);
+        setNewName(conv.name);
+        setRenameModalVisible(true);
+    };
+
+    // 处理删除会话 - 显示确认Modal
+    const handleDeleteClick = (conv: ConversationItem) => {
+        setDeletingConversation(conv);
+        setDeleteModalVisible(true);
+    };
+
+    // 确认删除会话
+    const handleDeleteConfirm = async () => {
+        if (!deletingConversation) return;
+
+        setDeleteLoading(true);
+        try {
+            console.log('🗑️ 开始删除会话:', deletingConversation.id);
+
+            // 调用API删除服务器端的会话
+            const response = await deleteConversation(deletingConversation.id);
+            console.log('✅ 服务器端会话删除响应:', response);
+
+            // 检查响应是否成功
+            if (response && (response as any).result === 'success') {
+                console.log('✅ 服务器端会话删除成功');
+                message.success('会话删除成功');
+                setDeleteModalVisible(false);
+
+                // 通知父组件会话已删除
+                onConversationDeleted?.(deletingConversation.id);
+
+                console.log('✅ 会话删除完成:', deletingConversation.id);
+            } else {
+                throw new Error((response as any)?.error || '删除会话失败');
+            }
+        } catch (error) {
+            console.error('❌ 删除会话失败:', error);
+            message.error(`删除会话失败: ${error instanceof Error ? error.message : '未知错误'}`);
+        } finally {
+            setDeleteLoading(false);
+        }
+    };
+
+    // 取消删除
+    const handleDeleteCancel = () => {
+        setDeleteModalVisible(false);
+        setDeletingConversation(null);
+        setDeleteLoading(false);
+    };
+
+    // 确认重命名
+    const handleRenameConfirm = async () => {
+        if (!renamingConversation || !newName.trim()) {
+            message.error('请输入有效的会话名称');
+            return;
+        }
+
+        if (newName.trim() === renamingConversation.name) {
+            setRenameModalVisible(false);
+            return;
+        }
+
+        setRenameLoading(true);
+        try {
+            console.log('✏️ 开始重命名会话:', { conversationId: renamingConversation.id, newName: newName.trim() });
+
+            // 调用API重命名服务器端的会话
+            const response = await renameConversation(renamingConversation.id, newName.trim(), false);
+            console.log('✅ 服务器端会话重命名响应:', response);
+
+            // 检查响应是否成功
+            if (response && (response as any).name) {
+                console.log('✅ 服务器端会话重命名成功');
+                message.success('重命名成功');
+                setRenameModalVisible(false);
+
+                // 通知父组件会话已重命名
+                onConversationRenamed?.(renamingConversation.id, (response as any).name);
+
+                console.log('✅ 会话重命名完成:', renamingConversation.id, '->', (response as any).name);
+            } else {
+                throw new Error((response as any)?.error || '重命名会话失败');
+            }
+        } catch (error) {
+            console.error('❌ 重命名会话失败:', error);
+            message.error(`重命名失败: ${error instanceof Error ? error.message : '未知错误'}`);
+        } finally {
+            setRenameLoading(false);
+        }
+    };
+
+    // 取消重命名
+    const handleRenameCancel = () => {
+        setRenameModalVisible(false);
+        setRenamingConversation(null);
+        setNewName('');
+        setRenameLoading(false);
+    };
+
+    // 生成菜单项
+    const menuItems = filteredConversations.map(conv => ({
+        key: conv.id,
+        icon: <MessageOutlined />,
+        label: (
+            <div className="flex items-center justify-between group">
+                <span className="truncate flex-1" title={conv.name}>
+                    {conv.name}
+                </span>
+                {!collapsed && (
+                    <Dropdown
+                        menu={{
+                            items: [
+                                {
+                                    key: 'rename',
+                                    icon: <EditOutlined />,
+                                    label: '重命名',
+                                    onClick: () => handleRename(conv),
+                                },
+                                {
+                                    key: 'delete',
+                                    icon: <DeleteOutlined />,
+                                    label: '删除',
+                                    danger: true,
+                                    onClick: () => handleDeleteClick(conv),
+                                },
+                            ],
+                        }}
+                        trigger={['click']}
+                        placement="bottomRight"
+                    >
+                        <Button
+                            type="text"
+                            size="small"
+                            icon={<MoreOutlined />}
+                            className="opacity-0 group-hover:opacity-100 transition-opacity"
+                            onClick={(e) => e.stopPropagation()}
+                        />
+                    </Dropdown>
+                )}
+            </div>
+        ),
+    }));
+
+    useImperativeHandle(ref, () => ({
+        autoRename: async (conversationId: string) => {
+            try {
+                console.log('🏷️ 开始自动重命名会话为"新对话":', conversationId);
+
+                // 调用API将会话重命名为固定的"新对话"
+                const response = await renameConversation(conversationId, '新对话', false);
+                console.log('✅ 服务器端会话重命名响应:', response);
+
+                // 检查响应是否成功
+                if (response && (response as any).name) {
+                    console.log('✅ 服务器端会话重命名成功');
+
+                    // 通知父组件会话已重命名
+                    onConversationRenamed?.(conversationId, (response as any).name);
+
+                    console.log('✅ 会话重命名完成:', conversationId, '->', (response as any).name);
+                } else {
+                    throw new Error((response as any)?.error || '重命名会话失败');
+                }
+            } catch (error) {
+                console.error('❌ 重命名会话失败:', error);
+                // 重命名失败时不显示错误消息，避免打扰用户
+                console.warn('⚠️ 重命名失败，会话将保持默认名称');
+            }
+        },
+    }));
+
+    return (
+        <Sider
+            trigger={null}
+            collapsible
+            collapsed={collapsed}
+            width={280}
+            style={{
+                background: colorBgContainer,
+                borderRight: '1px solid #f0f0f0',
+                display: 'flex',
+                flexDirection: 'column',
+                height: '100%',
+            }}
+        >
+            {/* 侧边栏头部 - 固定在顶部 */}
+            <div className="p-4 border-b border-gray-100 flex-shrink-0">
+                <div className="flex items-center justify-between mb-3">
+                    <Button
+                        type="text"
+                        icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
+                        onClick={onToggle}
+                        style={{
+                            fontSize: '16px',
+                            width: 32,
+                            height: 32,
+                            color: 'rgb(0, 104, 74)',
+                        }}
+                    />
+                    {!collapsed && (
+                        <Tooltip title="新建对话">
+                            <Button
+                                type="primary"
+                                icon={<PlusOutlined />}
+                                onClick={onNewConversation}
+                                size="small"
+                            >
+                                新对话
+                            </Button>
+                        </Tooltip>
+                    )}
+                </div>
+
+                {/* 搜索框 */}
+                {!collapsed && (
+                    <Input
+                        placeholder="搜索对话..."
+                        prefix={<SearchOutlined />}
+                        value={searchValue}
+                        onChange={(e) => setSearchValue(e.target.value)}
+                        allowClear
+                    />
+                )}
+            </div>
+
+            {/* 会话列表 - 可滚动区域 */}
+            <div className="flex-1 overflow-hidden">
+                <div
+                    className="h-full overflow-y-auto"
+                    style={{
+                        scrollbarWidth: 'thin',
+                        scrollbarColor: '#c1c1c1 #f1f1f1',
+                    }}
+                >
+                    {!collapsed && filteredConversations.length === 0 && searchValue && (
+                        <div className="p-4 text-center text-gray-500">
+                            <MessageOutlined className="text-2xl mb-2" />
+                            <p>未找到相关对话</p>
+                        </div>
+                    )}
+
+                    {!collapsed && conversations.length === 0 && !searchValue && (
+                        <div className="p-4 text-center text-gray-500">
+                            <MessageOutlined className="text-2xl mb-2" />
+                            <p>暂无对话记录</p>
+                            <Button
+                                type="link"
+                                onClick={onNewConversation}
+                                className="mt-2"
+                            >
+                                开始新对话
+                            </Button>
+                        </div>
+                    )}
+
+                    <Menu
+                        mode="inline"
+                        selectedKeys={[currentConversationId]}
+                        items={menuItems}
+                        onClick={({ key }) => onConversationSelect(key)}
+                        style={{
+                            border: 'none',
+                            background: 'transparent',
+                        }}
+                        className="chat-sidebar-menu"
+                    />
+                </div>
+            </div>
+
+            {/* 侧边栏底部 - 固定在底部 */}
+            {!collapsed && (
+                <div className="p-4 border-t border-gray-100 flex-shrink-0">
+                    <div className="text-xs text-gray-500 text-center">
+                        共 {conversations.length} 个对话
+                    </div>
+                </div>
+            )}
+
+            {/* 重命名Modal */}
+            <Modal
+                title="重命名会话"
+                open={renameModalVisible}
+                onOk={handleRenameConfirm}
+                onCancel={handleRenameCancel}
+                confirmLoading={renameLoading}
+                okText="确定"
+                cancelText="取消"
+                destroyOnClose
+            >
+                <div className="py-4">
+                    <Input
+                        value={newName}
+                        onChange={(e) => setNewName(e.target.value)}
+                        placeholder="请输入新的会话名称"
+                        maxLength={10}
+                        showCount
+                        onPressEnter={handleRenameConfirm}
+                        autoFocus
+                    />
+                </div>
+            </Modal>
+
+            {/* 删除确认Modal */}
+            <Modal
+                title={
+                    <div className="flex items-center">
+                        <ExclamationCircleOutlined className="text-red-500 mr-2" />
+                        删除会话
+                    </div>
+                }
+                open={deleteModalVisible}
+                onOk={handleDeleteConfirm}
+                onCancel={handleDeleteCancel}
+                confirmLoading={deleteLoading}
+                okText="删除"
+                cancelText="取消"
+                okType="danger"
+                destroyOnClose
+            >
+                <div className="py-4">
+                    <p>确定要删除会话 <strong>"{deletingConversation?.name}"</strong> 吗？</p>
+                    <p className="text-gray-500 text-sm mt-2">此操作不可撤销，会话中的所有消息都将被永久删除。</p>
+                </div>
+            </Modal>
+        </Sider>
+    );
+});
+
+export default ChatSidebar; 
\ No newline at end of file
diff --git a/app/components/chat/thought-process.tsx b/app/components/chat/thought-process.tsx
new file mode 100644
index 0000000..b6d51c2
--- /dev/null
+++ b/app/components/chat/thought-process.tsx
@@ -0,0 +1,220 @@
+import React, { useState } from 'react';
+import { Card, Collapse, Tag, Spin, Typography, Button } from 'antd';
+import { ToolOutlined, ThunderboltOutlined, CheckCircleOutlined, LoadingOutlined } from '@ant-design/icons';
+import type { ThoughtItem } from '../../types/dify_chat';
+import Markdown from './markdown';
+import '../../styles/components/chat-with-llm/thought-process.css';
+
+const { Panel } = Collapse;
+const { Text, Paragraph } = Typography;
+
+interface ThoughtProcessProps {
+    thought: ThoughtItem;
+    isFinished: boolean;
+    allToolIcons?: Record<string, string>;
+}
+
+/**
+ * 思考过程组件
+ * 展示AI的思考过程和工具调用
+ */
+export default function ThoughtProcess({
+    thought,
+    isFinished,
+    allToolIcons = {}
+}: ThoughtProcessProps) {
+    const [expanded, setExpanded] = useState(false);
+
+    const { tool_name, tool_input, tool_output, thought: thoughtText, observation } = thought;
+
+    /**
+     * 获取工具图标
+     */
+    const getToolIcon = (toolName?: string) => {
+        if (!toolName) return <ToolOutlined />;
+
+        // 如果有自定义图标映射
+        if (allToolIcons[toolName]) {
+            return <span>{allToolIcons[toolName]}</span>;
+        }
+
+        // 根据工具名称返回默认图标
+        switch (toolName.toLowerCase()) {
+            case 'search':
+            case 'web_search':
+                return '🔍';
+            case 'calculator':
+            case 'math':
+                return '🧮';
+            case 'code':
+            case 'python':
+                return '💻';
+            case 'image':
+            case 'vision':
+                return '👁️';
+            case 'file':
+            case 'document':
+                return '📄';
+            default:
+                return <ToolOutlined />;
+        }
+    };
+
+    /**
+     * 获取状态图标和颜色
+     */
+    const getStatusInfo = () => {
+        if (isFinished && observation) {
+            return {
+                icon: <CheckCircleOutlined />,
+                color: 'success',
+                text: '已完成'
+            };
+        } else if (!isFinished) {
+            return {
+                icon: <LoadingOutlined spin />,
+                color: 'processing',
+                text: '执行中'
+            };
+        } else {
+            return {
+                icon: <ThunderboltOutlined />,
+                color: 'default',
+                text: '等待中'
+            };
+        }
+    };
+
+    const statusInfo = getStatusInfo();
+
+    /**
+     * 格式化工具输入
+     */
+    const formatToolInput = (input?: string) => {
+        if (!input) return '无输入参数';
+
+        try {
+            const parsed = JSON.parse(input);
+            return (
+                <pre className="bg-gray-50 p-2 rounded text-sm overflow-x-auto">
+                    {JSON.stringify(parsed, null, 2)}
+                </pre>
+            );
+        } catch {
+            return <Text code>{input}</Text>;
+        }
+    };
+
+    /**
+     * 格式化工具输出
+     */
+    const formatToolOutput = (output?: string) => {
+        if (!output) return '暂无输出';
+
+        try {
+            const parsed = JSON.parse(output);
+            return (
+                <pre className="bg-gray-50 p-2 rounded text-sm overflow-x-auto">
+                    {JSON.stringify(parsed, null, 2)}
+                </pre>
+            );
+        } catch {
+            return <Markdown content={output} />;
+        }
+    };
+
+    return (
+        <Card
+            size="small"
+            className="my-2 border-l-4 border-l-blue-400 bg-blue-50"
+            bodyStyle={{ padding: '12px' }}
+        >
+            <div className="flex items-center justify-between mb-2">
+                <div className="flex items-center gap-2">
+                    <span className="text-lg">{getToolIcon(tool_name)}</span>
+                    <Text strong className="text-blue-700">
+                        {tool_name || '工具调用'}
+                    </Text>
+                    <Tag
+                        color={statusInfo.color as any}
+                        icon={statusInfo.icon}
+                        className="ml-2"
+                    >
+                        {statusInfo.text}
+                    </Tag>
+                </div>
+
+                {(tool_input || tool_output) && (
+                    <Button
+                        type="text"
+                        size="small"
+                        onClick={() => setExpanded(!expanded)}
+                        className="text-blue-600"
+                    >
+                        {expanded ? '收起详情' : '查看详情'}
+                    </Button>
+                )}
+            </div>
+
+            {/* 思考内容 */}
+            {thoughtText && (
+                <div className="mb-2">
+                    <Markdown content={thoughtText} />
+                </div>
+            )}
+
+            {/* 工具详情 */}
+            {expanded && (tool_input || tool_output) && (
+                <Collapse
+                    ghost
+                    size="small"
+                    className="bg-white rounded"
+                >
+                    {tool_input && (
+                        <Panel
+                            header={
+                                <span className="text-sm font-medium text-gray-600">
+                                    📥 输入参数
+                                </span>
+                            }
+                            key="input"
+                        >
+                            {formatToolInput(tool_input)}
+                        </Panel>
+                    )}
+
+                    {tool_output && (
+                        <Panel
+                            header={
+                                <span className="text-sm font-medium text-gray-600">
+                                    📤 执行结果
+                                </span>
+                            }
+                            key="output"
+                        >
+                            {formatToolOutput(tool_output)}
+                        </Panel>
+                    )}
+                </Collapse>
+            )}
+
+            {/* 观察结果 */}
+            {observation && observation !== tool_output && (
+                <div className="mt-2 p-2 bg-green-50 rounded border border-green-200">
+                    <Text className="text-green-700 text-sm font-medium">💡 观察结果：</Text>
+                    <div className="mt-1">
+                        <Markdown content={observation} />
+                    </div>
+                </div>
+            )}
+
+            {/* 加载状态 */}
+            {!isFinished && !observation && (
+                <div className="flex items-center justify-center py-2 text-blue-600">
+                    <Spin size="small" className="mr-2" />
+                    <Text className="text-sm">正在执行工具调用...</Text>
+                </div>
+            )}
+        </Card>
+    );
+} 
\ No newline at end of file
diff --git a/app/components/layout/Sidebar.tsx b/app/components/layout/Sidebar.tsx
index ef565ea..b9d1f4b 100644
--- a/app/components/layout/Sidebar.tsx
+++ b/app/components/layout/Sidebar.tsx
@@ -23,7 +23,7 @@ interface SidebarProps {
 const APP_MENU_MAP = {
   'contract': ['home', 'contract-template', 'file-management', 'rule-management', 'system-settings'],
   'record': ['home', 'file-management', 'rule-management', 'system-settings'],
-  'model': ['home']
+  'model': ['chat-with-llm']
 };
 
 // 应用模块名称映射
@@ -45,7 +45,7 @@ export function Sidebar({ onToggle, collapsed, userRole, selectedApp = 'contract
   const [expandedMenus, setExpandedMenus] = useState<Record<string, boolean>>({});
   const [currentApp, setCurrentApp] = useState<string>(selectedApp);
   const navigate = useNavigate();
-  
+
   // 组件挂载后从 sessionStorage 读取初始 reviewType
   useEffect(() => {
     try {
@@ -58,7 +58,7 @@ export function Sidebar({ onToggle, collapsed, userRole, selectedApp = 'contract
       console.error('读取 reviewType 失败:', error);
     }
   }, []);
-  
+
   // 从 sessionStorage 获取 reviewType 并设置当前应用模块
   useEffect(() => {
     // 监听 sessionStorage 变化（主要用于多标签页情况）
@@ -67,15 +67,15 @@ export function Sidebar({ onToggle, collapsed, userRole, selectedApp = 'contract
         setCurrentApp(e.newValue);
       }
     };
-    
+
     // 添加事件监听器
     window.addEventListener('storage', handleStorageChange);
-    
+
     return () => {
       window.removeEventListener('storage', handleStorageChange);
     };
   }, []);
-  
+
   // 监听路由变化，重新检查 reviewType
   useEffect(() => {
     try {
@@ -88,14 +88,14 @@ export function Sidebar({ onToggle, collapsed, userRole, selectedApp = 'contract
       console.error('路由变化时读取 reviewType 失败:', error);
     }
   }, [location.pathname]);
-  
+
   // 监听 selectedApp 属性变化
   useEffect(() => {
     if (selectedApp) {
       setCurrentApp(selectedApp);
     }
   }, [selectedApp]);
-  
+
   const menuItems: MenuItem[] = [
     {
       id: 'home',
@@ -103,6 +103,12 @@ export function Sidebar({ onToggle, collapsed, userRole, selectedApp = 'contract
       path: '/home',
       icon: 'ri-home-line'
     },
+    {
+      id: 'chat-with-llm',
+      title: 'AI对话',
+      path: '/chat-with-llm',
+      icon: 'ri-chat-smile-2-line'
+    },
     {
       id: 'file-management',
       title: '文件管理',
@@ -116,10 +122,10 @@ export function Sidebar({ onToggle, collapsed, userRole, selectedApp = 'contract
           icon: 'ri-upload-cloud-line'
         },
         {
-          id:'documents',
-          title:'文档列表',
-          path:'/documents',
-          icon:'ri-file-list-3-line'
+          id: 'documents',
+          title: '文档列表',
+          path: '/documents',
+          icon: 'ri-file-list-3-line'
         }
       ]
     },
@@ -219,7 +225,7 @@ export function Sidebar({ onToggle, collapsed, userRole, selectedApp = 'contract
       ]
     }
   ];
-  
+
   // 初始化展开状态，默认全部展开
   useEffect(() => {
     const initialExpandedState: Record<string, boolean> = {};
@@ -230,23 +236,23 @@ export function Sidebar({ onToggle, collapsed, userRole, selectedApp = 'contract
     });
     setExpandedMenus(initialExpandedState);
   }, []);
-  
+
   const toggleMenu = (id: string, e: React.MouseEvent) => {
     // 我们只防止事件冒泡，不阻止默认行为
     e.stopPropagation();
-    
+
     // console.log('父菜单展开/折叠:', id);
-    
+
     setExpandedMenus(prev => ({
       ...prev,
       [id]: !prev[id]
     }));
   };
-  
+
   const isActive = (path: string) => {
     return location.pathname === path || location.pathname.startsWith(`${path}/`);
   };
-  
+
   // 处理侧边栏切换事件
   const handleToggleSidebar = (e: React.MouseEvent) => {
     // console.log('侧边栏折叠/展开');
@@ -254,7 +260,7 @@ export function Sidebar({ onToggle, collapsed, userRole, selectedApp = 'contract
     e.stopPropagation();
     onToggle();
   };
-  
+
   // 处理子菜单项点击事件
   const handleSubMenuClick = (child: MenuItem, e: React.MouseEvent) => {
     // 只需要阻止冒泡，不阻止默认行为
@@ -272,15 +278,15 @@ export function Sidebar({ onToggle, collapsed, userRole, selectedApp = 'contract
     if (item.requiredRole && item.requiredRole !== userRole) {
       return false;
     }
-    
+
     // 检查当前菜单是否在所选应用模式中显示
     if (!visibleMenuIds.includes(item.id)) {
       return false;
     }
-    
+
     return true;
   });
-  
+
   return (
     <div className={`sidebar ${collapsed ? 'collapsed' : ''}`}>
       <div className="py-6 px-4 border-b border-gray-100 flex justify-between items-center">
@@ -300,7 +306,7 @@ export function Sidebar({ onToggle, collapsed, userRole, selectedApp = 'contract
           <img src="/logo.svg" alt="智慧法务" className="w-12 h-12 mr-2" />
           {!collapsed && <h2 className="text-lg font-medium">智慧法务</h2>}
         </div>
-        <button 
+        <button
           className="sidebar-toggle"
           onClick={handleToggleSidebar}
           aria-label={collapsed ? "展开侧边栏" : "折叠侧边栏"}
@@ -309,7 +315,7 @@ export function Sidebar({ onToggle, collapsed, userRole, selectedApp = 'contract
           <i className={`${collapsed ? 'ri-menu-unfold-line' : 'ri-menu-fold-line'}`}></i>
         </button>
       </div>
-      
+
       {!collapsed && (
         <div className="px-4 py-3 border-b border-gray-100">
           <div className="flex items-center text-green-700">
@@ -318,7 +324,7 @@ export function Sidebar({ onToggle, collapsed, userRole, selectedApp = 'contract
           </div>
         </div>
       )}
-      
+
       <div className="py-4 px-[10px]">
         {filteredMenuItems.map((item) => (
           <div key={item.id} className={`${collapsed ? 'px-0' : ''}`}>
@@ -337,7 +343,7 @@ export function Sidebar({ onToggle, collapsed, userRole, selectedApp = 'contract
               </Link>
             ) : (
               <>
-                <div 
+                <div
                   className={`sidebar-menu-item flex items-center ${collapsed ? 'justify-center' : 'justify-between'} cursor-pointer z-10`}
                   onClick={(e) => {
                     // console.log('%c父菜单点击 ===> ', 'background: #722ed1; color: white; padding: 2px 4px; border-radius: 2px;', item.title);
@@ -362,25 +368,25 @@ export function Sidebar({ onToggle, collapsed, userRole, selectedApp = 'contract
                     <i className={`ri-arrow-${expandedMenus[item.id] ? 'down' : 'right'}-s-line`}></i>
                   )}
                 </div>
-                
+
                 {(expandedMenus[item.id] || collapsed) && (
-                  <div 
+                  <div
                     className={`submenu-container ${collapsed ? 'border-l-0 pl-0' : 'border-l border-gray-100 ml-4 pl-3'} z-20`}
                     id={`submenu-${item.id}`}
                   >
                     {item.children
                       .filter(child => !child.requiredRole || child.requiredRole === userRole)
                       .map((child) => (
-                      <Link
-                        key={child.id}
-                        to={child.path}
-                        className={`sidebar-menu-item ${isActive(child.path) ? 'active' : ''} flex items-center ${collapsed ? 'justify-center' : ''}`}
-                        onClick={(e) => handleSubMenuClick(child, e)}
-                      >
-                        <i className={`${child.icon} ${collapsed ? 'text-xl' : 'mr-3'}`}></i>
-                        {!collapsed && <span>{child.title}</span>}
-                      </Link>
-                    ))}
+                        <Link
+                          key={child.id}
+                          to={child.path}
+                          className={`sidebar-menu-item ${isActive(child.path) ? 'active' : ''} flex items-center ${collapsed ? 'justify-center' : ''}`}
+                          onClick={(e) => handleSubMenuClick(child, e)}
+                        >
+                          <i className={`${child.icon} ${collapsed ? 'text-xl' : 'mr-3'}`}></i>
+                          {!collapsed && <span>{child.title}</span>}
+                        </Link>
+                      ))}
                   </div>
                 )}
               </>
diff --git a/app/config/chat.ts b/app/config/chat.ts
new file mode 100644
index 0000000..e5643b6
--- /dev/null
+++ b/app/config/chat.ts
@@ -0,0 +1,98 @@
+import type { AppInfo } from '../types/dify_chat';
+
+// 在客户端获取环境变量的辅助函数
+const getEnvVar = (name: string, defaultValue: string = '') => {
+    // 在服务端
+    if (typeof window === 'undefined') {
+        return process.env[name] || defaultValue;
+    }
+    // 在客户端，从window.__ENV获取
+    return (window as any).__ENV?.[name] || defaultValue;
+};
+
+// 从完整的APP URL中提取APP ID
+const extractAppId = (appUrl: string): string => {
+    if (!appUrl) return '';
+
+    // 如果是完整的URL，提取最后的UUID部分
+    const match = appUrl.match(/\/app\/([a-f0-9-]{36})/);
+    if (match) {
+        return match[1];
+    }
+
+    // 如果已经是UUID格式，直接返回
+    if (/^[a-f0-9-]{36}$/.test(appUrl)) {
+        return appUrl;
+    }
+
+    return appUrl;
+};
+
+// 获取配置值并添加调试日志
+const getApiUrl = () => {
+    // 在Remix中，我们使用本地API路由作为代理，而不是直接访问Dify API
+    if (typeof window !== 'undefined') {
+        // 客户端：使用相对路径访问本地API
+        return '/api';
+    } else {
+        // 服务端：也使用相对路径
+        return '/api';
+    }
+};
+
+const getAppId = () => {
+    const rawAppId = getEnvVar('NEXT_PUBLIC_APP_ID', '');
+    const extractedAppId = extractAppId(rawAppId);
+    // console.log('🔧 Chat Config Debug:', {
+    //     rawAppId,
+    //     extractedAppId,
+    //     apiUrl: getApiUrl(),
+    //     hasApiKey: !!getEnvVar('NEXT_PUBLIC_APP_KEY', ''),
+    //     difyApiUrl: getEnvVar('NEXT_PUBLIC_API_URL', ''),
+    // });
+    return extractedAppId;
+};
+
+// 聊天应用配置
+export const CHAT_CONFIG = {
+    // API相关配置 - 使用本地API路由作为代理
+    API_URL: getApiUrl(),
+    APP_ID: getAppId(),
+    API_KEY: getEnvVar('NEXT_PUBLIC_APP_KEY', ''),
+
+    // Dify API 配置（用于服务端）
+    DIFY_API_URL: getEnvVar('NEXT_PUBLIC_API_URL', 'https://api.dify.ai/v1'),
+
+    // 应用信息
+    APP_INFO: {
+        title: '大模型对话',
+        description: '大模型对话',
+        copyright: '大模型对话',
+        privacy_policy: '大模型对话',
+        default_language: 'zh-Hans',
+    },
+
+    // 功能配置
+    isShowPrompt: false,
+    promptTemplate: 'I want you to act as a javascript console.',
+
+    // API相关
+    API_PREFIX: '/api',
+
+    // 本地化
+    LOCALE_COOKIE_NAME: 'locale',
+
+    // 限制
+    DEFAULT_VALUE_MAX_LEN: 48,
+};
+
+// SSE超时设置
+export const SSE_TIMEOUT = 100000;
+
+// 内容类型
+export const ContentType = {
+    json: 'application/json',
+    stream: 'text/event-stream',
+    form: 'application/x-www-form-urlencoded; charset=UTF-8',
+    download: 'application/octet-stream',
+}; 
\ No newline at end of file
diff --git a/app/hooks/use-chat-message.ts b/app/hooks/use-chat-message.ts
new file mode 100644
index 0000000..078fe78
--- /dev/null
+++ b/app/hooks/use-chat-message.ts
@@ -0,0 +1,574 @@
+import { useState, useCallback, useRef } from 'react';
+import { produce } from 'immer';
+import { useBoolean, useGetState } from 'ahooks';
+import { sendChatMessage, updateFeedback, generateConversationName } from '../services/api.client';
+import type { ChatItem, Feedbacktype, ThoughtItem, VisionFile, MessageEnd, MessageReplace } from '../types/dify_chat';
+import { CHAT_CONFIG } from '../config/chat';
+
+/**
+ * 聊天消息处理钩子
+ */
+export default function useChatMessage({
+    onUpdateConversationList,
+    onConversationIdChange,
+}: {
+    onUpdateConversationList?: (conversationId: string, data: { name: string }) => void;
+    onConversationIdChange?: (conversationId: string) => void;
+}) {
+    // 聊天消息列表
+    const [chatList, setChatList, getChatList] = useGetState<ChatItem[]>([]);
+    // 是否正在响应中
+    const [isResponding, { setTrue: setResponding, setFalse: setNotResponding }] = useBoolean(false);
+    // 是否已停止响应
+    const [hasStopResponded, setHasStopResponded, getHasStopResponded] = useGetState(false);
+    // 响应的会话是否为当前会话
+    const [isRespondingConIsCurrCon, setIsRespondingConCurrCon, getIsRespondingConIsCurrCon] = useGetState(true);
+    // 消息任务ID
+    const [messageTaskId, setMessageTaskId] = useState('');
+    // 用户查询
+    const [userQuery, setUserQuery] = useState('');
+    // 中止控制器
+    const abortControllerRef = useRef<AbortController | null>(null);
+
+    // 当前流式响应项的引用
+    const currentResponseRef = useRef<ChatItem | null>(null);
+
+    /**
+     * 记录错误日志
+     */
+    const logError = useCallback((message: string) => {
+        console.error(`[Chat Error]: ${message}`);
+    }, []);
+
+    /**
+     * 检查是否可以发送消息
+     */
+    const checkCanSend = useCallback(() => {
+        if (isResponding) {
+            console.warn('机器人正在回复中，请稍后再试');
+            return false;
+        }
+        return true;
+    }, [isResponding]);
+
+    /**
+     * 立即更新聊天列表 - 移除防抖机制
+     */
+    const updateChatList = useCallback((
+        responseItem: ChatItem,
+        questionId: string,
+        placeholderAnswerId: string,
+        questionItem: ChatItem,
+        originalResponseId?: string
+    ) => {
+        // console.log('🔄 更新聊天列表:', {
+        //     responseItemId: responseItem.id,
+        //     responseContent: responseItem.content,
+        //     originalResponseId,
+        //     questionId,
+        //     placeholderAnswerId
+        // });
+
+        setChatList(produce(getChatList(), (draft) => {
+            // console.log('📝 当前聊天列表:', draft.map(item => ({ id: item.id, content: item.content.substring(0, 20), isAnswer: item.isAnswer })));
+
+            // 移除占位符
+            const placeholderIndex = draft.findIndex(item => item.id === placeholderAnswerId);
+            if (placeholderIndex !== -1) {
+                // console.log('🗑️ 移除占位符:', placeholderAnswerId);
+                draft.splice(placeholderIndex, 1);
+            }
+
+            // 确保问题存在
+            const questionIndex = draft.findIndex(item => item.id === questionId);
+            if (questionIndex === -1) {
+                // console.log('➕ 添加问题:', questionId);
+                draft.push({ ...questionItem });
+            }
+
+            // 更新或添加响应 - 考虑ID可能已经改变的情况
+            let responseIndex = draft.findIndex(item => item.id === responseItem.id);
+            // console.log('🔍 查找响应索引 (当前ID):', { responseItemId: responseItem.id, responseIndex });
+
+            // 如果找不到当前ID的响应，尝试查找原始ID
+            if (responseIndex === -1 && originalResponseId) {
+                responseIndex = draft.findIndex(item => item.id === originalResponseId);
+                // console.log('🔍 查找响应索引 (原始ID):', { originalResponseId, responseIndex });
+            }
+
+            // 如果找不到任何匹配的响应，查找最后一个AI回答
+            if (responseIndex === -1) {
+                responseIndex = draft.findIndex((item, index) =>
+                    item.isAnswer &&
+                    index > draft.findIndex(q => q.id === questionId)
+                );
+                // console.log('🔍 查找响应索引 (最后AI回答):', { responseIndex });
+            }
+
+            if (responseIndex !== -1) {
+                // console.log('✏️ 更新现有响应:', { responseIndex, newContent: responseItem.content.substring(0, 20) });
+                draft[responseIndex] = { ...responseItem };
+            } else {
+                // console.log('➕ 添加新响应:', { responseId: responseItem.id, content: responseItem.content.substring(0, 20) });
+                draft.push({ ...responseItem });
+            }
+
+            // console.log('📝 更新后聊天列表:', draft.map(item => ({ id: item.id, content: item.content.substring(0, 20), isAnswer: item.isAnswer })));
+        }));
+    }, [getChatList, setChatList]);
+
+    /**
+     * 更新当前问答 - 移除防抖，立即更新
+     */
+    const updateCurrentQA = useCallback(({
+        responseItem,
+        questionId,
+        placeholderAnswerId,
+        questionItem,
+        originalResponseId,
+    }: {
+        responseItem: ChatItem;
+        questionId: string;
+        placeholderAnswerId: string;
+        questionItem: ChatItem;
+        originalResponseId?: string;
+    }) => {
+        // 更新当前响应引用
+        currentResponseRef.current = responseItem;
+
+        // 立即更新，不使用防抖
+        updateChatList(responseItem, questionId, placeholderAnswerId, questionItem, originalResponseId);
+    }, [updateChatList]);
+
+    /**
+     * 转换文件格式为服务器格式
+     */
+    const transformToServerFile = useCallback((fileItem: any) => {
+        return {
+            type: 'image',
+            transfer_method: fileItem.transferMethod || fileItem.transfer_method,
+            url: fileItem.url,
+            upload_file_id: fileItem.id || fileItem.upload_file_id,
+        };
+    }, []);
+
+    /**
+     * 发送消息
+     */
+    const handleSend = useCallback(async (
+        message: string,
+        conversationId: string | null,
+        files?: VisionFile[],
+        inputs?: Record<string, any>,
+    ) => {
+        if (!checkCanSend() || !message.trim()) {
+            return;
+        }
+
+        // console.log('📤 发送消息:', { message, conversationId });
+
+        setUserQuery(message);
+        setResponding();
+        setHasStopResponded(false);
+        setIsRespondingConCurrCon(true);
+
+        // 处理输入参数
+        const toServerInputs: Record<string, any> = {};
+        if (inputs) {
+            Object.keys(inputs).forEach((key) => {
+                const value = inputs[key];
+                if (value?.supportFileType) {
+                    toServerInputs[key] = transformToServerFile(value);
+                } else if (Array.isArray(value) && value[0]?.supportFileType) {
+                    toServerInputs[key] = value.map((item: any) => transformToServerFile(item));
+                } else {
+                    toServerInputs[key] = value;
+                }
+            });
+        }
+
+        // 准备请求数据
+        const data: Record<string, any> = {
+            inputs: toServerInputs,
+            query: message,
+            conversation_id: conversationId === '-1' ? null : conversationId,
+        };
+
+        // 添加文件数据
+        if (files && files.length > 0) {
+            data.files = files.map((item) => {
+                if (item.transfer_method === 'local_file') {
+                    return {
+                        ...item,
+                        url: '',
+                    };
+                }
+                return item;
+            });
+        }
+
+        // 生成唯一ID
+        const questionId = `question-${Date.now()}`;
+        const placeholderAnswerId = `answer-placeholder-${Date.now()}`;
+
+        // 创建问题项
+        const questionItem: ChatItem = {
+            id: questionId,
+            content: message,
+            isAnswer: false,
+            message_files: files,
+        };
+
+        // 创建答案占位符
+        const placeholderAnswerItem: ChatItem = {
+            id: placeholderAnswerId,
+            content: '',
+            isAnswer: true,
+        };
+
+        // 更新聊天列表
+        const newList = [...getChatList(), questionItem, placeholderAnswerItem];
+        setChatList(newList);
+
+        let isAgentMode = false;
+        let hasSetResponseId = false;
+        const prevTempNewConversationId = conversationId || '-1';
+        let tempNewConversationId = '';
+
+        // 创建响应项
+        const responseItem: ChatItem = {
+            id: `response-${Date.now()}`,
+            content: '',
+            agent_thoughts: [],
+            message_files: [],
+            isAnswer: true,
+        };
+
+        // 保存原始响应ID
+        const originalResponseId = responseItem.id;
+
+        try {
+            // 发送消息
+            await sendChatMessage(data, {
+                onData: (message: string, isFirstMessage: boolean, { conversationId: newConversationId, messageId, taskId }) => {
+                    // console.log('📨 收到流式数据:', { message, isFirstMessage, messageId, newConversationId });
+
+                    if (!isAgentMode) {
+                        // 累积消息内容
+                        responseItem.content = responseItem.content + message;
+                        // console.log('📝 累积消息内容:', { currentContent: responseItem.content });
+                    } else {
+                        const lastThought = responseItem.agent_thoughts?.[responseItem.agent_thoughts?.length - 1];
+                        if (lastThought) {
+                            lastThought.thought = (lastThought.thought || '') + message;
+                        }
+                    }
+
+                    if (messageId && !hasSetResponseId) {
+                        responseItem.id = messageId;
+                        hasSetResponseId = true;
+                        // console.log('🆔 设置响应ID:', { oldId: originalResponseId, newId: messageId });
+                    }
+
+                    // 重要：确保正确获取新会话ID
+                    if (newConversationId && !tempNewConversationId) {
+                        tempNewConversationId = newConversationId;
+                        // console.log('🆔 获取到新会话ID:', tempNewConversationId);
+                    }
+
+                    setMessageTaskId(taskId || '');
+
+                    // 检查是否切换到其他会话
+                    // console.log('🔍 会话检查:', {
+                    //     prevTempNewConversationId,
+                    //     conversationId,
+                    //     isEqual: prevTempNewConversationId === conversationId
+                    // });
+
+                    // 修复新会话的匹配逻辑
+                    const isNewConversationMatch = (prevTempNewConversationId === '-1' && conversationId === null) ||
+                        (prevTempNewConversationId === conversationId);
+
+                    if (!isNewConversationMatch) {
+                        // console.log('⚠️ 会话不匹配，跳过更新');
+                        setIsRespondingConCurrCon(false);
+                        return;
+                    }
+
+                    // console.log('🔄 准备调用updateCurrentQA:', {
+                    //     responseItemId: responseItem.id,
+                    //     responseContent: responseItem.content,
+                    //     questionId,
+                    //     placeholderAnswerId,
+                    //     originalResponseId
+                    // });
+
+                    // 更新当前问答（使用防抖）
+                    updateCurrentQA({
+                        responseItem: { ...responseItem }, // 创建副本避免引用问题
+                        questionId,
+                        placeholderAnswerId,
+                        questionItem,
+                        originalResponseId,
+                    });
+                },
+
+                onCompleted: async (hasError?: boolean) => {
+                    // console.log('✅ 消息发送完成:', { hasError });
+
+                    // 立即更新最终状态
+                    if (currentResponseRef.current) {
+                        updateCurrentQA({
+                            responseItem: { ...currentResponseRef.current },
+                            questionId,
+                            placeholderAnswerId,
+                            questionItem,
+                            originalResponseId,
+                        });
+                    }
+
+                    if (hasError) {
+                        setNotResponding();
+                        return;
+                    }
+
+                    // 如果是新会话，处理会话ID更新和名称生成
+                    // 检查原始传入的conversationId是否为新会话标识
+                    const isNewConversation = conversationId === '-1' || conversationId === null;
+                    if (tempNewConversationId && isNewConversation) {
+                        try {
+                            // console.log('🆕 处理新会话:', {
+                            //     tempNewConversationId,
+                            //     originalConversationId: conversationId,
+                            //     isNewConversation
+                            // });
+
+                            // 通知会话ID变更（这会触发localStorage更新）
+                            onConversationIdChange?.(tempNewConversationId);
+
+                            // 生成会话名称
+                            const res = await generateConversationName(tempNewConversationId);
+                            const { data } = res as any;
+                            if (data?.name) {
+                                // console.log('📝 生成会话名称:', data.name);
+                                onUpdateConversationList?.(tempNewConversationId, { name: data.name });
+                            }
+                        } catch (err) {
+                            console.error('生成会话名称失败:', err);
+                        }
+                    } else {
+                        // console.log('🔍 不是新会话，跳过处理:', {
+                        //     tempNewConversationId,
+                        //     conversationId,
+                        //     isNewConversation
+                        // });
+                    }
+
+                    setNotResponding();
+                    setUserQuery('');
+                },
+
+                onFile: (file) => {
+                    const lastThought = responseItem.agent_thoughts?.[responseItem.agent_thoughts?.length - 1];
+                    if (lastThought) {
+                        lastThought.message_files = [...(lastThought.message_files || []), { ...file }];
+                    } else {
+                        if (!responseItem.message_files) {
+                            responseItem.message_files = [];
+                        }
+                        responseItem.message_files.push(file);
+                    }
+
+                    updateCurrentQA({
+                        responseItem: { ...responseItem },
+                        questionId,
+                        placeholderAnswerId,
+                        questionItem,
+                        originalResponseId,
+                    });
+                },
+
+                onThought: (thought) => {
+                    isAgentMode = true;
+
+                    if (thought.message_id && !hasSetResponseId) {
+                        responseItem.id = thought.message_id;
+                        hasSetResponseId = true;
+                    }
+
+                    if (!responseItem.agent_thoughts) {
+                        responseItem.agent_thoughts = [];
+                    }
+
+                    if (responseItem.agent_thoughts.length === 0) {
+                        responseItem.agent_thoughts.push(thought);
+                    } else {
+                        const lastThought = responseItem.agent_thoughts[responseItem.agent_thoughts.length - 1];
+                        // 相同思考ID，更新现有思考
+                        if (lastThought.id === thought.id) {
+                            thought.thought = lastThought.thought;
+                            thought.message_files = lastThought.message_files;
+                            responseItem.agent_thoughts[responseItem.agent_thoughts.length - 1] = thought;
+                        } else {
+                            responseItem.agent_thoughts.push(thought);
+                        }
+                    }
+
+                    // 检查是否切换到其他会话
+                    if (prevTempNewConversationId !== conversationId) {
+                        setIsRespondingConCurrCon(false);
+                        return;
+                    }
+
+                    updateCurrentQA({
+                        responseItem: { ...responseItem },
+                        questionId,
+                        placeholderAnswerId,
+                        questionItem,
+                        originalResponseId,
+                    });
+                },
+
+                onMessageEnd: (messageEnd: MessageEnd) => {
+                    // 处理消息结束事件
+                    // console.log('Message ended:', messageEnd);
+                },
+
+                onMessageReplace: (messageReplace: MessageReplace) => {
+                    // 处理消息替换事件
+                    responseItem.content = messageReplace.answer;
+                    updateCurrentQA({
+                        responseItem: { ...responseItem },
+                        questionId,
+                        placeholderAnswerId,
+                        questionItem,
+                        originalResponseId,
+                    });
+                },
+
+                onError: (error) => {
+                    logError(`聊天消息请求错误: ${error}`);
+                    setChatList(produce(getChatList(), (draft) => {
+                        const placeholderIndex = draft.findIndex(item => item.id === placeholderAnswerId);
+                        if (placeholderIndex !== -1) {
+                            draft[placeholderIndex].content = `错误: ${error}`;
+                            draft[placeholderIndex].isError = true;
+                        }
+                    }));
+                    setNotResponding();
+                },
+
+                getAbortController: (controller) => {
+                    abortControllerRef.current = controller;
+                },
+            });
+        } catch (err: any) {
+            logError(`发送消息时出错: ${err.message}`);
+            setNotResponding();
+        }
+    }, [
+        checkCanSend,
+        getChatList,
+        setChatList,
+        logError,
+        onUpdateConversationList,
+        onConversationIdChange,
+        setNotResponding,
+        setResponding,
+        updateCurrentQA,
+        transformToServerFile,
+        setHasStopResponded,
+        setIsRespondingConCurrCon,
+        setMessageTaskId,
+        setUserQuery
+    ]);
+
+    /**
+     * 处理反馈
+     */
+    const handleFeedback = useCallback(async (messageId: string, feedback: Feedbacktype) => {
+        try {
+            await updateFeedback({
+                url: `messages/${messageId}/feedbacks`,
+                body: feedback,
+            });
+
+            // 更新聊天列表中的反馈
+            setChatList(produce(getChatList(), (draft) => {
+                const messageIndex = draft.findIndex(item => item.id === messageId);
+                if (messageIndex !== -1) {
+                    draft[messageIndex].feedback = feedback;
+                }
+            }));
+        } catch (err) {
+            logError(`提交反馈时出错: ${err}`);
+        }
+    }, [logError, getChatList, setChatList]);
+
+    /**
+     * 停止响应
+     */
+    const stopResponding = useCallback(() => {
+        if (abortControllerRef.current) {
+            abortControllerRef.current.abort();
+            abortControllerRef.current = null;
+        }
+
+        setHasStopResponded(true);
+        setNotResponding();
+    }, [setNotResponding, setHasStopResponded]);
+
+    /**
+     * 重新生成回答
+     */
+    const regenerateResponse = useCallback(async (messageId: string) => {
+        // 找到要重新生成的消息
+        const messageIndex = getChatList().findIndex(item => item.id === messageId);
+        if (messageIndex === -1) return;
+
+        const message = getChatList()[messageIndex];
+        if (!message.isAnswer) return;
+
+        // 找到对应的问题
+        const questionIndex = messageIndex - 1;
+        if (questionIndex < 0) return;
+
+        const question = getChatList()[questionIndex];
+        if (question.isAnswer) return;
+
+        // 重新发送问题
+        await handleSend(question.content, null, question.message_files);
+    }, [getChatList, handleSend]);
+
+    /**
+     * 清空聊天记录
+     */
+    const clearChatList = useCallback(() => {
+        setChatList([]);
+        currentResponseRef.current = null;
+    }, [setChatList]);
+
+    return {
+        // 基础状态
+        chatList,
+        setChatList,
+        getChatList,
+        isResponding,
+        hasStopResponded,
+        isRespondingConIsCurrCon,
+        messageTaskId,
+        userQuery,
+
+        // 核心方法
+        handleSend,
+        handleFeedback,
+        stopResponding,
+        regenerateResponse,
+        clearChatList,
+
+        // 辅助方法
+        checkCanSend,
+        logError,
+        updateCurrentQA,
+    };
+} 
\ No newline at end of file
diff --git a/app/hooks/use-conversation.ts b/app/hooks/use-conversation.ts
new file mode 100644
index 0000000..f8751e5
--- /dev/null
+++ b/app/hooks/use-conversation.ts
@@ -0,0 +1,246 @@
+import { useState, useCallback } from 'react';
+import { useParams } from '@remix-run/react';
+import { produce } from 'immer';
+import { useGetState, useLocalStorageState } from 'ahooks';
+import type { ConversationItem } from '../types/dify_chat';
+import { CHAT_CONFIG } from '../config/chat';
+
+// 本地存储键名
+const storageConversationIdKey = 'conversationIdInfo';
+
+// 会话信息类型（排除inputs和id）
+type ConversationInfoType = Omit<ConversationItem, 'inputs' | 'id'>;
+
+/**
+ * 获取完整的应用URL键名（与webapp-conversation保持一致）
+ * @param appId 应用ID
+ * @returns 完整的URL键名
+ */
+function getAppUrlKey(appId: string): string {
+    if (typeof window !== 'undefined') {
+        // 在客户端，构建完整的URL键名
+        const { protocol, host } = window.location;
+        return `${protocol}//${host}/app/${appId}`;
+    }
+    // 在服务端，使用简化的键名
+    return appId;
+}
+
+/**
+ * 会话管理钩子
+ * 用于管理聊天会话、当前会话状态以及会话输入
+ * 采用单页面应用模式，不使用URL路由导航
+ */
+export default function useConversation() {
+    const params = useParams();
+
+    // 会话列表
+    const [conversationList, setConversationList] = useState<ConversationItem[]>([]);
+
+    // 当前会话ID - 使用ahooks的useGetState来获得更好的状态管理
+    // 初始值从URL参数或localStorage获取，如果都没有则为'-1'（新会话）
+    const [currConversationId, doSetCurrConversationId, getCurrConversationId] = useGetState<string>(() => {
+        // 首先尝试从URL参数获取
+        if (params.id) {
+            return params.id;
+        }
+        // 然后尝试从localStorage获取
+        const storedId = getConversationIdFromStorage(CHAT_CONFIG.APP_ID);
+        return storedId || '-1';
+    });
+
+    // 新会话输入状态
+    const [newConversationInputs, setNewConversationInputs] = useState<Record<string, any> | null>(null);
+
+    // 现有会话输入状态
+    const [existConversationInputs, setExistConversationInputs] = useState<Record<string, any> | null>(null);
+
+    // 新会话信息
+    const [newConversationInfo, setNewConversationInfo] = useState<ConversationInfoType | null>(null);
+
+    // 现有会话信息
+    const [existConversationInfo, setExistConversationInfo] = useState<ConversationInfoType | null>(null);
+
+    // 判断是否为新会话
+    const isNewConversation = currConversationId === '-1';
+
+    // 当前输入状态（根据是否为新会话来决定使用哪个状态）
+    const currInputs = isNewConversation ? newConversationInputs : existConversationInputs;
+    const setCurrInputs = isNewConversation ? setNewConversationInputs : setExistConversationInputs;
+
+    // 当前会话信息（根据是否为新会话来决定使用哪个信息）
+    const currConversationInfo = isNewConversation ? newConversationInfo : existConversationInfo;
+
+    /**
+     * 从本地存储获取会话ID
+     * @param appId 应用ID
+     * @returns 会话ID
+     */
+    function getConversationIdFromStorage(appId: string): string {
+        try {
+            const conversationIdInfo = globalThis.localStorage?.getItem(storageConversationIdKey)
+                ? JSON.parse(globalThis.localStorage?.getItem(storageConversationIdKey) || '{}')
+                : {};
+
+            // 使用完整的URL键名获取会话ID
+            const appUrlKey = getAppUrlKey(appId);
+            const conversationId = conversationIdInfo[appUrlKey];
+
+            // console.log('📖 从localStorage获取会话ID:', {
+            //     appUrlKey,
+            //     conversationId,
+            //     allKeys: Object.keys(conversationIdInfo)
+            // });
+
+            return conversationId || '-1';
+        } catch (error) {
+            console.error('获取本地存储会话ID失败:', error);
+            return '-1';
+        }
+    }
+
+    /**
+     * 设置当前会话ID并保存到本地存储
+     * 纯状态管理模式，不进行URL导航
+     * @param id 会话ID
+     * @param appId 应用ID
+     * @param isSetToLocalStorage 是否保存到本地存储
+     * @param newConversationName 新会话名称（暂未使用）
+     */
+    const setCurrConversationId = (
+        id: string,
+        appId: string,
+        isSetToLocalStorage = true,
+        newConversationName = ''
+    ) => {
+        console.log('🔄 设置当前会话ID:', { id, appId, isSetToLocalStorage });
+
+        doSetCurrConversationId(id);
+
+        if (isSetToLocalStorage && id !== '-1') {
+            try {
+                // 获取现有的conversationIdInfo
+                const conversationIdInfo = globalThis.localStorage?.getItem(storageConversationIdKey)
+                    ? JSON.parse(globalThis.localStorage?.getItem(storageConversationIdKey) || '{}')
+                    : {};
+
+                // 使用完整的URL键名保存会话ID（与webapp-conversation保持一致）
+                const appUrlKey = getAppUrlKey(appId);
+                conversationIdInfo[appUrlKey] = id;
+
+                globalThis.localStorage?.setItem(storageConversationIdKey, JSON.stringify(conversationIdInfo));
+
+                console.log('💾 会话ID已保存到localStorage:', {
+                    appUrlKey,
+                    conversationId: id,
+                    fullStorage: conversationIdInfo
+                });
+            } catch (error) {
+                console.error('保存会话ID到本地存储失败:', error);
+            }
+        }
+
+        // 不进行URL导航，保持单页面应用模式
+        console.log('✅ 会话切换完成，当前会话ID:', id);
+    };
+
+    /**
+     * 重置新会话输入
+     * 使用immer来安全地重置状态
+     */
+    const resetNewConversationInputs = () => {
+        if (!newConversationInputs) {
+            return;
+        }
+        setNewConversationInputs(produce(newConversationInputs, (draft) => {
+            Object.keys(draft).forEach((key) => {
+                draft[key] = '';
+            });
+        }));
+    };
+
+    /**
+     * 更新会话列表中的特定会话
+     * @param id 会话ID
+     * @param updates 要更新的字段
+     */
+    const updateConversationInList = (id: string, updates: Partial<ConversationItem>) => {
+        setConversationList(produce(conversationList, (draft) => {
+            const index = draft.findIndex(item => item.id === id);
+            if (index !== -1) {
+                Object.assign(draft[index], updates);
+            }
+        }));
+    };
+
+    /**
+     * 添加新会话到列表
+     * @param conversation 新会话
+     */
+    const addConversationToList = (conversation: ConversationItem) => {
+        setConversationList(produce(conversationList, (draft) => {
+            // 检查是否已存在，避免重复添加
+            const exists = draft.some(item => item.id === conversation.id);
+            if (!exists) {
+                draft.unshift(conversation);
+            }
+        }));
+    };
+
+    /**
+     * 从列表中移除会话
+     * @param id 会话ID
+     */
+    const removeConversationFromList = (id: string) => {
+        setConversationList(produce(conversationList, (draft) => {
+            const index = draft.findIndex(item => item.id === id);
+            if (index !== -1) {
+                draft.splice(index, 1);
+            }
+        }));
+    };
+
+    /**
+     * 创建新会话项
+     * @param name 会话名称
+     * @param introduction 会话介绍
+     * @returns 新会话项
+     */
+    const createNewConversationItem = (name: string = '新对话', introduction: string = ''): ConversationItem => {
+        return {
+            id: '-1',
+            name,
+            inputs: newConversationInputs || {},
+            introduction,
+        };
+    };
+
+    return {
+        // 基础状态
+        conversationList,
+        setConversationList,
+        currConversationId,
+        getCurrConversationId,
+        setCurrConversationId,
+        getConversationIdFromStorage,
+        isNewConversation,
+
+        // 输入状态
+        currInputs,
+        newConversationInputs,
+        existConversationInputs,
+        resetNewConversationInputs,
+        setCurrInputs,
+
+        // 会话信息
+        currConversationInfo,
+        setNewConversationInfo,
+        setExistConversationInfo,
+
+        // 辅助方法
+        updateConversationInList,
+        addConversationToList,
+        removeConversationFromList,
+        createNewConversationItem,
+    };
+} 
\ No newline at end of file
diff --git a/app/root.tsx b/app/root.tsx
index f3b7f80..fb6e777 100644
--- a/app/root.tsx
+++ b/app/root.tsx
@@ -1,20 +1,20 @@
 // import React from 'react';
-import { 
-  Links, 
+import {
+  Links,
   // LiveReload, // 不再需要，使用Vite时会与内置HMR冲突
-  Meta, 
-  Outlet, 
-  Scripts, 
+  Meta,
+  Outlet,
+  Scripts,
   ScrollRestoration,
   isRouteErrorResponse,
   useRouteError,
   type MetaFunction,
   useLoaderData
 } from "@remix-run/react";
-import { 
-  LoaderFunctionArgs, 
-  redirect, 
-  createCookieSessionStorage, 
+import {
+  LoaderFunctionArgs,
+  redirect,
+  createCookieSessionStorage,
   ActionFunctionArgs
 } from "@remix-run/node";
 import { Layout } from "~/components/layout/Layout";
@@ -85,7 +85,7 @@ export async function createUserSession(isAuthenticated: boolean, userRole: User
 // 销毁会话（登出）
 export async function logout(request: Request) {
   const session = await getSession(request);
-  
+
   return redirect("/login", {
     headers: {
       "Set-Cookie": await sessionStorage.destroySession(session),
@@ -97,58 +97,67 @@ export async function logout(request: Request) {
 export async function action({ request }: ActionFunctionArgs) {
   const formData = await request.formData();
   const intent = formData.get("intent");
-  
+
   if (intent === "logout") {
     return logout(request);
   }
-  
+
   return null;
 }
 
-// 添加loader函数进行全局认证检查
+// 添加loader函数进行全局认证检查并传递环境变量给客户端
 export async function loader({ request }: LoaderFunctionArgs) {
   // 获取当前路径
   const url = new URL(request.url);
   const pathname = url.pathname;
-  
+
   // 排除不需要登录验证的路径
   const publicPaths = ['/login', '/favicon.ico'];
   const isPublicPath = publicPaths.some(path => pathname.startsWith(path));
-  
+
   // 获取用户会话
   const { isAuthenticated, userRole } = await getUserSession(request);
   // console.log("Auth status:", { isAuthenticated, userRole, pathname });
-  
+
   // 如果访问需要认证的路径但未登录，重定向到登录页
   if (!isPublicPath && !isAuthenticated) {
     // 保存请求的URL，以便登录后重定向回来
     const session = await getSession(request);
-    
+
     // 如果路径是/home，则将重定向目标设置为/
     const redirectTarget = pathname === "/home" ? "/" : pathname;
     // 保存重定向目标
     session.set("redirectTo", redirectTarget);
-    
+
     return redirect("/login", {
       headers: {
         "Set-Cookie": await sessionStorage.commitSession(session),
       },
     });
   }
-  
+
   // 如果已登录且访问登录页，重定向到首页
   if (pathname === "/login" && isAuthenticated) {
     // console.log("Already authenticated, redirecting from login to /");
     return redirect("/");
   }
-  
+
   // 检查访问权限 - 如果是common用户访问了开发者专属页面，重定向到首页
   if (userRole === 'common' && developerOnlyPaths.some(path => pathname.startsWith(path))) {
     return redirect("/");
   }
-  
-  // 向组件传递认证状态和当前路径
-  return Response.json({ isAuthenticated, userRole, pathname });
+
+  // 向组件传递认证状态、当前路径和环境变量
+  return Response.json({
+    isAuthenticated,
+    userRole,
+    pathname,
+    ENV: {
+      NEXT_PUBLIC_API_URL: process.env.NEXT_PUBLIC_API_URL,
+      NEXT_PUBLIC_APP_ID: process.env.NEXT_PUBLIC_APP_ID,
+      NEXT_PUBLIC_APP_KEY: process.env.NEXT_PUBLIC_APP_KEY,
+    },
+  });
 }
 
 
@@ -168,6 +177,8 @@ export function links() {
     { rel: "stylesheet", href: styles },
     { rel: "stylesheet", href: messageModalStyles },
     { rel: "stylesheet", href: toastStyles },
+    // 添加 Antd 样式
+    { rel: "stylesheet", href: "https://cdn.jsdelivr.net/npm/antd@5/dist/reset.css" },
     { rel: "icon", type: "image/svg+xml", href: "/logo.svg" },
     // { rel: "preconnect", href: "https://fonts.googleapis.com" },
     // { rel: "preconnect", href: "https://fonts.gstatic.com", crossOrigin: "anonymous" },
@@ -176,15 +187,16 @@ export function links() {
 }
 
 export default function App() {
-  const { userRole } = useLoaderData<typeof loader>();
-  
-  
+  const { userRole, ENV } = useLoaderData<typeof loader>();
+
+
   return (
     <html lang="zh-CN">
       <head>
         <meta charSet="utf-8" />
         <meta name="viewport" content="width=device-width,initial-scale=1" />
-        <style dangerouslySetInnerHTML={{ __html: `
+        <style dangerouslySetInnerHTML={{
+          __html: `
           :root {
             --color-primary: #00684a;
             --color-primary-hover: #005a3f;
@@ -199,6 +211,11 @@ export default function App() {
         ` }} />
         <Meta />
         <Links />
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `window.__ENV = ${JSON.stringify(ENV)}`,
+          }}
+        />
       </head>
       <body className="font-sans">
         <MessageModalProvider>
@@ -219,11 +236,11 @@ export default function App() {
 
 export function ErrorBoundary() {
   const error = useRouteError();
-  
+
   // 为错误页面设置标题和描述
   let title = "发生错误";
   let message = "发生了一个未知错误，请稍后重试";
-  
+
   if (isRouteErrorResponse(error)) {
     title = `错误 ${error.status}`;
     message = error.data?.message || "发生了一个错误，请稍后重试";
@@ -231,7 +248,7 @@ export function ErrorBoundary() {
     title = "意外错误";
     message = "服务器发生了意外错误，请稍后重试";
   }
-  
+
   return (
     <html lang="zh-CN">
       <head>
@@ -242,7 +259,7 @@ export function ErrorBoundary() {
         <Links />
       </head>
       <body>
-        <AppErrorBoundary 
+        <AppErrorBoundary
           status={isRouteErrorResponse(error) ? error.status : 500}
           statusText={isRouteErrorResponse(error) ? error.statusText : "服务器错误"}
           message={message}
diff --git a/app/routes/_index.tsx b/app/routes/_index.tsx
index 74a1bed..62a792f 100644
--- a/app/routes/_index.tsx
+++ b/app/routes/_index.tsx
@@ -20,18 +20,18 @@ export const meta: MetaFunction = () => {
 export async function action({ request }: ActionFunctionArgs) {
   const formData = await request.formData();
   const intent = formData.get("intent");
-  
+
   if (intent === "logout") {
     return logout(request);
   }
-  
+
   return null;
 }
 
 // 验证用户登录状态
 export async function loader({ request }: LoaderFunctionArgs) {
   const { isAuthenticated, userRole } = await getUserSession(request);
-  
+
   if (!isAuthenticated) {
     return redirect("/login");
   }
@@ -45,12 +45,12 @@ export default function Index() {
     date: '',
     time: ''
   });
-  
+
   // 打印服务器端传递的用户角色
   useEffect(() => {
     console.log('_index 服务器返回的用户角色:', userRole);
   }, [userRole]);
-  
+
   // 更新日期时间
   useEffect(() => {
     const updateDateTime = () => {
@@ -61,16 +61,16 @@ export default function Index() {
         time: now.format('HH:mm:ss')
       });
     };
-    
+
     // 初始化时间
     updateDateTime();
-    
+
     // 每秒更新一次
     const timerID = setInterval(updateDateTime, 1000);
-    
+
     return () => clearInterval(timerID);
   }, []);
-  
+
   // 处理模块点击
   const handleModuleClick = (path: string, reviewType: string) => {
     // 将reviewType存入sessionStorage
@@ -93,7 +93,7 @@ export default function Index() {
     if (typeof window !== 'undefined') {
       sessionStorage.clear();
     }
-    
+
     // 使用Form组件提交登出请求
     const form = document.getElementById('logout-form') as HTMLFormElement;
     if (form) {
@@ -110,7 +110,7 @@ export default function Index() {
       <Form method="post" id="logout-form" className="hidden">
         <input type="hidden" name="intent" value="logout" />
       </Form>
-      
+
       {/* 头部 */}
       <header className="header">
         <div className="logo-container">
@@ -125,8 +125,8 @@ export default function Index() {
           <div className="user">
             <img src="/avatar.png" alt="用户头像" className="avatar" />
             <span className="username">{userRole === 'developer' ? '系统管理员' : '普通用户'}</span>
-            <button 
-              onClick={handleLogout} 
+            <button
+              onClick={handleLogout}
               className="logout-button"
               aria-label="登出"
             >
@@ -135,15 +135,15 @@ export default function Index() {
           </div>
         </div>
       </header>
-      
+
       {/* 主要内容 */}
       <main className="index-main-content">
         <h1 className="welcome-text">- 欢迎来到智慧法务平台 -</h1>
-        
+
         <div className="modules-container">
           {/* 合同管理模块 */}
-          <div 
-            className="module-card" 
+          <div
+            className="module-card"
             onClick={() => handleModuleClick('/contract-template/search', 'contract')}
             onKeyDown={(e) => handleKeyDown('/contract-template/search', 'contract', e)}
             role="button"
@@ -153,10 +153,10 @@ export default function Index() {
             <i className="ri-file-list-2-fill text-[3rem] text-[#269b6c]"></i>
             <span className="module-name">合同管理</span>
           </div>
-          
+
           {/* 案卷智能评查模块 */}
-          <div 
-            className="module-card" 
+          <div
+            className="module-card"
             onClick={() => handleModuleClick('/home', 'record')}
             onKeyDown={(e) => handleKeyDown('/home', 'record', e)}
             role="button"
@@ -166,12 +166,12 @@ export default function Index() {
             <i className="ri-folder-shared-fill text-[3rem] text-[#269b6c]"></i>
             <span className="module-name">案卷智能评查</span>
           </div>
-          
+
           {/* 智慧法务大模型模块 */}
-          <div 
-            className="module-card" 
-            onClick={() => handleModuleClick('/', 'model')}
-            onKeyDown={(e) => handleKeyDown('/', 'model', e)}
+          <div
+            className="module-card"
+            onClick={() => handleModuleClick('/chat-with-llm', 'model')}
+            onKeyDown={(e) => handleKeyDown('/chat-with-llm', 'model', e)}
             role="button"
             tabIndex={0}
             aria-label="智慧法务大模型"
@@ -185,7 +185,7 @@ export default function Index() {
       <footer className="footer">
         <div className="mountains-bg"></div>
       </footer>
-      
+
     </div>
   );
 }
\ No newline at end of file
diff --git a/app/routes/api.chat-messages.tsx b/app/routes/api.chat-messages.tsx
new file mode 100644
index 0000000..24b6bd5
--- /dev/null
+++ b/app/routes/api.chat-messages.tsx
@@ -0,0 +1,68 @@
+import { type ActionFunctionArgs } from '@remix-run/node';
+import { difyClient } from '../services/dify-client.server';
+import { getSessionInfo } from '../utils/session.server';
+
+export async function action({ request }: ActionFunctionArgs) {
+    if (request.method !== 'POST') {
+        return new Response('Method not allowed', { status: 405 });
+    }
+
+    try {
+        const { user } = await getSessionInfo(request);
+        const body = await request.json();
+
+        const {
+            inputs,
+            query,
+            files,
+            conversation_id: conversationId,
+            response_mode: responseMode,
+        } = body;
+
+        // ('🚀 Chat Messages API - User:', user, 'Query:', query?.substring(0, 100));
+
+        const response = await difyClient.createChatMessage(
+            inputs,
+            query,
+            user,
+            responseMode,
+            conversationId,
+            files
+        );
+
+        // 对于流式响应，直接返回流
+        if (responseMode === 'streaming') {
+            return new Response(response.body, {
+                status: response.status,
+                headers: {
+                    'Content-Type': 'text/event-stream',
+                    'Cache-Control': 'no-cache',
+                    'Connection': 'keep-alive',
+                    'Access-Control-Allow-Origin': '*',
+                    'Access-Control-Allow-Methods': 'POST',
+                    'Access-Control-Allow-Headers': 'Content-Type',
+                },
+            });
+        }
+
+        // 对于非流式响应，返回JSON
+        return new Response(JSON.stringify(response), {
+            status: 200,
+            headers: {
+                'Content-Type': 'application/json',
+            },
+        });
+
+    } catch (error: any) {
+        // console.error('❌ Chat Messages API - Error:', error);
+        return new Response(
+            JSON.stringify({ error: error.message || 'Failed to send message' }),
+            {
+                status: 500,
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+            }
+        );
+    }
+} 
\ No newline at end of file
diff --git a/app/routes/api.conversations.$id.name.tsx b/app/routes/api.conversations.$id.name.tsx
new file mode 100644
index 0000000..ffdd450
--- /dev/null
+++ b/app/routes/api.conversations.$id.name.tsx
@@ -0,0 +1,43 @@
+import { json, type ActionFunctionArgs } from '@remix-run/node';
+import { difyClient } from '../services/dify-client.server';
+import { getSessionInfo, commitSession } from '../utils/session.server';
+
+export async function action({ request, params }: ActionFunctionArgs) {
+    try {
+        const { user, session } = await getSessionInfo(request);
+        const { id } = params;
+
+        if (!id) {
+            return json({ error: '会话ID不能为空' }, { status: 400 });
+        }
+
+        const body = await request.json();
+        const { auto_generate, name } = body;
+
+        // console.log('💬 Rename Conversation API - User:', user, 'ID:', id, 'Auto Generate:', auto_generate, 'Name:', name);
+
+        // 调用服务端API重命名会话
+        const data = await difyClient.renameConversation(id, name, user, auto_generate);
+
+        // console.log('✅ Rename Conversation API - Success:', data);
+
+        return json(data, {
+            headers: {
+                'Set-Cookie': await commitSession(session),
+            },
+        });
+    } catch (error: any) {
+        console.error('❌ Rename Conversation API - Error:', error);
+        return json(
+            {
+                error: error.message || '重命名会话失败'
+            },
+            {
+                status: 500,
+                headers: {
+                    'Set-Cookie': await commitSession((await getSessionInfo(request)).session),
+                },
+            }
+        );
+    }
+} 
\ No newline at end of file
diff --git a/app/routes/api.conversations.$id.tsx b/app/routes/api.conversations.$id.tsx
new file mode 100644
index 0000000..d7a0451
--- /dev/null
+++ b/app/routes/api.conversations.$id.tsx
@@ -0,0 +1,46 @@
+import { json, type ActionFunctionArgs } from '@remix-run/node';
+import { difyClient } from '../services/dify-client.server';
+import { getSessionInfo, commitSession } from '../utils/session.server';
+
+export async function action({ request, params }: ActionFunctionArgs) {
+    try {
+        const { user, session } = await getSessionInfo(request);
+        const { id } = params;
+
+        if (!id) {
+            return json({ error: '会话ID不能为空' }, { status: 400 });
+        }
+
+        const method = request.method;
+
+        if (method === 'DELETE') {
+            // console.log('🗑️ Delete Conversation API - User:', user, 'ID:', id);
+
+            // 调用服务端API删除会话
+            const data = await difyClient.deleteConversation(id, user);
+
+            // console.log('✅ Delete Conversation API - Success:', data);
+
+            return json(data, {
+                headers: {
+                    'Set-Cookie': await commitSession(session),
+                },
+            });
+        }
+
+        return json({ error: '不支持的请求方法' }, { status: 405 });
+    } catch (error: any) {
+        console.error('❌ Delete Conversation API - Error:', error);
+        return json(
+            {
+                error: error.message || '删除会话失败'
+            },
+            {
+                status: 500,
+                headers: {
+                    'Set-Cookie': await commitSession((await getSessionInfo(request)).session),
+                },
+            }
+        );
+    }
+} 
\ No newline at end of file
diff --git a/app/routes/api.conversations.tsx b/app/routes/api.conversations.tsx
new file mode 100644
index 0000000..d0be5f5
--- /dev/null
+++ b/app/routes/api.conversations.tsx
@@ -0,0 +1,35 @@
+import { json, type LoaderFunctionArgs } from '@remix-run/node';
+import { difyClient } from '../services/dify-client.server';
+import { getSessionInfo, commitSession } from '../utils/session.server';
+
+export async function loader({ request }: LoaderFunctionArgs) {
+    try {
+        const { user, session } = await getSessionInfo(request);
+
+        // ('💬 Conversations API - User:', user);
+
+        const data = await difyClient.getConversations(user);
+
+        // ('✅ Conversations API - Success:', data);
+
+        return json(data, {
+            headers: {
+                'Set-Cookie': await commitSession(session),
+            },
+        });
+    } catch (error: any) {
+        console.error('❌ Conversations API - Error:', error);
+        return json(
+            {
+                data: [],
+                error: error.message || 'Failed to fetch conversations'
+            },
+            {
+                status: 500,
+                headers: {
+                    'Set-Cookie': await commitSession((await getSessionInfo(request)).session),
+                },
+            }
+        );
+    }
+} 
\ No newline at end of file
diff --git a/app/routes/api.file-upload.tsx b/app/routes/api.file-upload.tsx
new file mode 100644
index 0000000..d104fbb
--- /dev/null
+++ b/app/routes/api.file-upload.tsx
@@ -0,0 +1,50 @@
+import { json, type ActionFunctionArgs } from '@remix-run/node';
+import { difyClient } from '../services/dify-client.server';
+import { getSessionInfo, commitSession } from '../utils/session.server';
+
+export async function action({ request }: ActionFunctionArgs) {
+    try {
+        const { user, session } = await getSessionInfo(request);
+
+        // console.log('💬 File Upload API - User:', user);
+
+        // 从请求中获取文件
+        const formData = await request.formData();
+        const file = formData.get('file') as File;
+
+        if (!file) {
+            return json({ error: '没有找到文件' }, { status: 400 });
+        }
+
+        // 获取文件内容
+        const fileBuffer = await file.arrayBuffer();
+
+        // 这里需要在dify-client.server.ts中添加上传文件的方法
+        // 目前我们返回一个临时响应
+        // TODO: 实现文件上传功能
+
+        // 构造模拟响应
+        const uploadId = `upload_${Date.now()}`;
+
+        // console.log('✅ File Upload API - Success:', { id: uploadId, fileName: file.name, size: file.size });
+
+        return json({ id: uploadId }, {
+            headers: {
+                'Set-Cookie': await commitSession(session),
+            },
+        });
+    } catch (error: any) {
+        console.error('❌ File Upload API - Error:', error);
+        return json(
+            {
+                error: error.message || '文件上传失败'
+            },
+            {
+                status: 500,
+                headers: {
+                    'Set-Cookie': await commitSession((await getSessionInfo(request)).session),
+                },
+            }
+        );
+    }
+} 
\ No newline at end of file
diff --git a/app/routes/api.messages.tsx b/app/routes/api.messages.tsx
new file mode 100644
index 0000000..c32a624
--- /dev/null
+++ b/app/routes/api.messages.tsx
@@ -0,0 +1,41 @@
+import { json, type LoaderFunctionArgs } from '@remix-run/node';
+import { difyClient } from '../services/dify-client.server';
+import { getSessionInfo, commitSession } from '../utils/session.server';
+
+export async function loader({ request }: LoaderFunctionArgs) {
+    try {
+        const { user, session } = await getSessionInfo(request);
+        const url = new URL(request.url);
+        const conversationId = url.searchParams.get('conversation_id');
+
+        if (!conversationId) {
+            return json(
+                { error: 'conversation_id is required' },
+                { status: 400 }
+            );
+        }
+
+        // ('📨 Messages API - User:', user, 'ConversationId:', conversationId);
+
+        const data = await difyClient.getConversationMessages(user, conversationId);
+
+        // ('✅ Messages API - Success:', data);
+
+        return json(data, {
+            headers: {
+                'Set-Cookie': await commitSession(session),
+            },
+        });
+    } catch (error: any) {
+        console.error('❌ Messages API - Error:', error);
+        return json(
+            { error: error.message || 'Failed to fetch messages' },
+            {
+                status: 500,
+                headers: {
+                    'Set-Cookie': await commitSession((await getSessionInfo(request)).session),
+                },
+            }
+        );
+    }
+} 
\ No newline at end of file
diff --git a/app/routes/api.parameters.tsx b/app/routes/api.parameters.tsx
new file mode 100644
index 0000000..181712b
--- /dev/null
+++ b/app/routes/api.parameters.tsx
@@ -0,0 +1,32 @@
+import { json, type LoaderFunctionArgs } from '@remix-run/node';
+import { difyClient } from '../services/dify-client.server';
+import { getSessionInfo, commitSession } from '../utils/session.server';
+
+export async function loader({ request }: LoaderFunctionArgs) {
+    try {
+        const { user, session } = await getSessionInfo(request);
+
+        // ('📋 Parameters API - User:', user);
+
+        const data = await difyClient.getApplicationParameters(user);
+
+        // ('✅ Parameters API - Success:', data);
+
+        return json(data, {
+            headers: {
+                'Set-Cookie': await commitSession(session),
+            },
+        });
+    } catch (error: any) {
+        console.error('❌ Parameters API - Error:', error);
+        return json(
+            { error: error.message || 'Failed to fetch parameters' },
+            {
+                status: 500,
+                headers: {
+                    'Set-Cookie': await commitSession((await getSessionInfo(request)).session),
+                },
+            }
+        );
+    }
+} 
\ No newline at end of file
diff --git a/app/routes/chat-with-llm._index.tsx b/app/routes/chat-with-llm._index.tsx
new file mode 100644
index 0000000..c2eadb7
--- /dev/null
+++ b/app/routes/chat-with-llm._index.tsx
@@ -0,0 +1,42 @@
+import { json } from "@remix-run/node";
+import { type MetaFunction } from "@remix-run/node";
+import Chat from "~/components/chat";
+import chatIndexStyles from "~/styles/components/chat-with-llm/index.css?url";
+import chatMessageStyles from "~/styles/components/chat-with-llm/chat-message.css?url";
+import chatInputStyles from "~/styles/components/chat-with-llm/chat-input.css?url";
+import chatSidebarStyles from "~/styles/components/chat-with-llm/sidebar.css?url";
+import chatThoughtProcessStyles from "~/styles/components/chat-with-llm/thought-process.css?url";
+import chatMarkdownStyles from "~/styles/components/chat-with-llm/markdown.css?url";
+
+export function links() {
+    return [
+        { rel: "stylesheet", href: chatIndexStyles },
+        { rel: "stylesheet", href: chatMessageStyles },
+        { rel: "stylesheet", href: chatInputStyles },
+        { rel: "stylesheet", href: chatSidebarStyles },
+        { rel: "stylesheet", href: chatThoughtProcessStyles },
+        { rel: "stylesheet", href: chatMarkdownStyles }
+    ];
+}
+
+export const meta: MetaFunction = () => {
+    return [
+        { title: "AI对话 - 中国烟草AI合同及卷宗审核系统" },
+        {
+            name: "description",
+            content: "与AI助手进行智能对话，获取专业的法务建议和文档分析"
+        }
+    ];
+};
+
+/**
+ * 聊天主页面
+ * 实现单页面应用模式，所有会话切换都在同一页面内完成
+ */
+export default function ChatWithLLMIndex() {
+    return (
+        <div className="h-full chat-container">
+            <Chat />
+        </div>
+    );
+} 
\ No newline at end of file
diff --git a/app/routes/chat-with-llm.tsx b/app/routes/chat-with-llm.tsx
new file mode 100644
index 0000000..aa7ed2b
--- /dev/null
+++ b/app/routes/chat-with-llm.tsx
@@ -0,0 +1,23 @@
+import { Outlet } from "@remix-run/react";
+import { type MetaFunction } from "@remix-run/node";
+
+export const meta: MetaFunction = () => {
+    return [
+        { title: "AI对话 - 中国烟草AI合同及卷宗审核系统" },
+        {
+            name: "chat-with-llm",
+            content: "AI对话模块，包括AI对话功能"
+        }
+    ];
+};
+
+export const handle = {
+    breadcrumb: "AI对话"
+};
+
+/**
+ * 配置列表路由布局
+ */
+export default function ContractSearchLayout() {
+    return <Outlet />;
+} 
\ No newline at end of file
diff --git a/app/services/api.client.ts b/app/services/api.client.ts
new file mode 100644
index 0000000..de4c419
--- /dev/null
+++ b/app/services/api.client.ts
@@ -0,0 +1,580 @@
+import { CHAT_CONFIG, ContentType, SSE_TIMEOUT } from '../config/chat';
+import type { Feedbacktype, ThoughtItem, VisionFile, MessageEnd, MessageReplace } from '../types/dify_chat';
+import { unicodeToChar } from '../utils/chat-utils';
+
+// 基础请求选项
+const baseOptions = {
+    method: 'GET',
+    mode: 'cors' as RequestMode,
+    credentials: 'include' as RequestCredentials,
+    headers: new Headers({
+        'Content-Type': ContentType.json,
+    }),
+    redirect: 'follow' as RequestRedirect,
+};
+
+// 回调接口定义
+export type IOnDataMoreInfo = {
+    conversationId?: string;
+    taskId?: string;
+    messageId: string;
+    errorMessage?: string;
+    errorCode?: string;
+}
+
+export type IOnData = (message: string, isFirstMessage: boolean, moreInfo: IOnDataMoreInfo) => void;
+export type IOnThought = (thought: ThoughtItem) => void;
+export type IOnFile = (file: VisionFile) => void;
+export type IOnMessageEnd = (messageEnd: MessageEnd) => void;
+export type IOnMessageReplace = (messageReplace: MessageReplace) => void;
+export type IOnCompleted = (hasError?: boolean) => void;
+export type IOnError = (msg: string, code?: string) => void;
+
+// 工作流相关类型
+export type WorkflowStartedResponse = {
+    task_id: string;
+    workflow_run_id: string;
+    event: string;
+    data: {
+        id: string;
+        workflow_id: string;
+        sequence_number: number;
+        created_at: number;
+    };
+}
+
+export type WorkflowFinishedResponse = {
+    task_id: string;
+    workflow_run_id: string;
+    event: string;
+    data: {
+        id: string;
+        workflow_id: string;
+        status: string;
+        outputs: any;
+        error: string;
+        elapsed_time: number;
+        total_tokens: number;
+        total_steps: number;
+        created_at: number;
+        finished_at: number;
+    };
+}
+
+export type NodeStartedResponse = {
+    task_id: string;
+    workflow_run_id: string;
+    event: string;
+    data: {
+        id: string;
+        node_id: string;
+        node_type: string;
+        index: number;
+        predecessor_node_id?: string;
+        inputs: any;
+        created_at: number;
+        extras?: any;
+    };
+}
+
+export type NodeFinishedResponse = {
+    task_id: string;
+    workflow_run_id: string;
+    event: string;
+    data: {
+        id: string;
+        node_id: string;
+        node_type: string;
+        index: number;
+        predecessor_node_id?: string;
+        inputs: any;
+        process_data: any;
+        outputs: any;
+        status: string;
+        error: string;
+        elapsed_time: number;
+        execution_metadata: {
+            total_tokens: number;
+            total_price: number;
+            currency: string;
+        };
+        created_at: number;
+    };
+}
+
+export type IOnWorkflowStarted = (workflowStarted: WorkflowStartedResponse) => void;
+export type IOnWorkflowFinished = (workflowFinished: WorkflowFinishedResponse) => void;
+export type IOnNodeStarted = (nodeStarted: NodeStartedResponse) => void;
+export type IOnNodeFinished = (nodeFinished: NodeFinishedResponse) => void;
+
+// 处理流式响应
+const handleStream = (
+    response: Response,
+    onData: IOnData,
+    onCompleted?: IOnCompleted,
+    onThought?: IOnThought,
+    onMessageEnd?: IOnMessageEnd,
+    onMessageReplace?: IOnMessageReplace,
+    onFile?: IOnFile,
+    onWorkflowStarted?: IOnWorkflowStarted,
+    onWorkflowFinished?: IOnWorkflowFinished,
+    onNodeStarted?: IOnNodeStarted,
+    onNodeFinished?: IOnNodeFinished,
+    onError?: IOnError,
+) => {
+    if (!response.ok) {
+        onError?.('网络响应错误');
+        throw new Error('网络响应错误');
+    }
+
+    const reader = response.body?.getReader();
+    const decoder = new TextDecoder('utf-8');
+    let buffer = '';
+    let bufferObj: Record<string, any>;
+    let isFirstMessage = true;
+
+    function read() {
+        let hasError = false;
+        reader?.read().then((result: any) => {
+            if (result.done) {
+                onCompleted && onCompleted();
+                return;
+            }
+
+            buffer += decoder.decode(result.value, { stream: true });
+            const lines = buffer.split('\n');
+
+            try {
+                lines.forEach((message) => {
+                    if (message.startsWith('data: ')) {
+                        try {
+                            bufferObj = JSON.parse(message.substring(6)) as Record<string, any>;
+                        }
+                        catch (e) {
+                            // 处理消息截断
+                            onData('', isFirstMessage, {
+                                conversationId: bufferObj?.conversation_id,
+                                messageId: bufferObj?.message_id || bufferObj?.id,
+                            });
+                            return;
+                        }
+
+                        if (bufferObj.status === 400 || !bufferObj.event) {
+                            onData('', false, {
+                                conversationId: undefined,
+                                messageId: '',
+                                errorMessage: bufferObj?.message,
+                                errorCode: bufferObj?.code,
+                            });
+                            hasError = true;
+                            onCompleted?.(true);
+                            return;
+                        }
+
+                        if (bufferObj.event === 'message' || bufferObj.event === 'agent_message') {
+                            onData(unicodeToChar(bufferObj.answer), isFirstMessage, {
+                                conversationId: bufferObj.conversation_id,
+                                messageId: bufferObj.id || bufferObj.message_id,
+                                taskId: bufferObj.task_id,
+                            });
+                            isFirstMessage = false;
+                        } else if (bufferObj.event === 'agent_thought' && onThought) {
+                            onThought(bufferObj as ThoughtItem);
+                        } else if (bufferObj.event === 'message_file' && onFile) {
+                            onFile(bufferObj as VisionFile);
+                        } else if (bufferObj.event === 'message_end' && onMessageEnd) {
+                            onMessageEnd(bufferObj as MessageEnd);
+                        } else if (bufferObj.event === 'message_replace' && onMessageReplace) {
+                            onMessageReplace(bufferObj as MessageReplace);
+                        } else if (bufferObj.event === 'workflow_started' && onWorkflowStarted) {
+                            onWorkflowStarted(bufferObj as WorkflowStartedResponse);
+                        } else if (bufferObj.event === 'workflow_finished' && onWorkflowFinished) {
+                            onWorkflowFinished(bufferObj as WorkflowFinishedResponse);
+                        } else if (bufferObj.event === 'node_started' && onNodeStarted) {
+                            onNodeStarted(bufferObj as NodeStartedResponse);
+                        } else if (bufferObj.event === 'node_finished' && onNodeFinished) {
+                            onNodeFinished(bufferObj as NodeFinishedResponse);
+                        }
+                    }
+                });
+
+                // 保留最后一行（可能是不完整的消息）
+                buffer = lines[lines.length - 1];
+            }
+            catch (err) {
+                console.error('解析响应时出错:', err);
+                onData('', false, {
+                    conversationId: undefined,
+                    messageId: '',
+                    errorMessage: `${err}`,
+                });
+                hasError = true;
+                onCompleted?.(true);
+                return;
+            }
+
+            if (!hasError)
+                read();
+        }).catch(err => {
+            console.error('读取流时出错:', err);
+            onError?.(err.message);
+        });
+    }
+
+    read();
+};
+
+// 基础Fetch函数
+const baseFetch = (url: string, fetchOptions: any, needAllResponseContent: boolean = false) => {
+    const options = Object.assign({}, baseOptions, fetchOptions);
+
+    // 构建完整URL - 修复重复的/v1问题
+    // CHAT_CONFIG.API_URL 已经包含了 /v1，所以不需要再添加 API_PREFIX
+    let urlWithPrefix = `${CHAT_CONFIG.API_URL}/${url.replace(/^\//, '')}`;
+
+
+    const { method, params, body } = options;
+
+    // 处理GET请求的查询参数
+    if (method === 'GET' && params) {
+        const paramsArray: string[] = [];
+        Object.keys(params).forEach(key =>
+            paramsArray.push(`${key}=${encodeURIComponent(params[key])}`),
+        );
+        if (urlWithPrefix.search(/\?/) === -1)
+            urlWithPrefix += `?${paramsArray.join('&')}`;
+        else
+            urlWithPrefix += `&${paramsArray.join('&')}`;
+
+        delete options.params;
+    }
+
+    // 处理请求体
+    if (body && typeof body === 'object')
+        options.body = JSON.stringify(body);
+
+    // 添加认证头
+    if (!options.headers)
+        options.headers = {};
+
+    if (CHAT_CONFIG.API_KEY) {
+        options.headers['Authorization'] = `Bearer ${CHAT_CONFIG.API_KEY}`;
+    }
+
+    return Promise.race([
+        new Promise((resolve, reject) => {
+            setTimeout(() => {
+                reject(new Error('请求超时'));
+            }, SSE_TIMEOUT);
+        }),
+        new Promise((resolve, reject) => {
+            fetch(urlWithPrefix, options)
+                .then((res: Response) => {
+                    const resClone = res.clone();
+
+                    ('📥 API Response:', {
+                        status: res.status,
+                        statusText: res.statusText,
+                        url: urlWithPrefix
+                    });
+
+                    // 错误处理
+                    if (!/^(2|3)\d{2}$/.test(res.status.toString())) {
+                        try {
+                            const bodyJson = res.json();
+                            switch (res.status) {
+                                case 401:
+                                    console.error('❌ Invalid token');
+                                    break;
+                                default:
+                                    bodyJson.then((data: any) => {
+                                        console.error('❌ API Error:', data.message);
+                                    });
+                            }
+                        }
+                        catch (e) {
+                            console.error('❌ Response Error:', e);
+                        }
+                        return Promise.reject(resClone);
+                    }
+
+                    // 处理删除API（204状态码）
+                    if (res.status === 204) {
+                        resolve({ result: 'success' });
+                        return;
+                    }
+
+                    // 返回数据
+                    const contentType = res.headers.get('Content-Type') || '';
+                    const data = contentType.includes('application/octet-stream') ? res.blob() : res.json();
+
+                    resolve(needAllResponseContent ? resClone : data);
+                })
+                .catch((err) => {
+                    console.error('❌ Fetch Error:', err);
+                    reject(err);
+                });
+        }),
+    ]);
+};
+
+// SSE POST 请求
+export const ssePost = (
+    url: string,
+    fetchOptions: any,
+    {
+        onData,
+        onCompleted,
+        onThought,
+        onFile,
+        onMessageEnd,
+        onMessageReplace,
+        onWorkflowStarted,
+        onWorkflowFinished,
+        onNodeStarted,
+        onNodeFinished,
+        onError,
+        getAbortController,
+    }: {
+        onData: IOnData;
+        onCompleted?: IOnCompleted;
+        onThought?: IOnThought;
+        onFile?: IOnFile;
+        onMessageEnd?: IOnMessageEnd;
+        onMessageReplace?: IOnMessageReplace;
+        onError?: IOnError;
+        getAbortController?: (abortController: AbortController) => void;
+        onWorkflowStarted?: IOnWorkflowStarted;
+        onWorkflowFinished?: IOnWorkflowFinished;
+        onNodeStarted?: IOnNodeStarted;
+        onNodeFinished?: IOnNodeFinished;
+    },
+) => {
+    const options = Object.assign({}, baseOptions, {
+        method: 'POST',
+    }, fetchOptions);
+
+    // 修复URL构建逻辑，与baseFetch保持一致
+    const urlWithPrefix = `${CHAT_CONFIG.API_URL}/${url.replace(/^\//, '')}`;
+
+
+    const controller = new AbortController();
+    if (getAbortController)
+        getAbortController(controller);
+
+    options.headers = {
+        ...options.headers,
+        'Content-Type': 'application/json',
+        'Accept': ContentType.stream,
+    };
+
+    if (CHAT_CONFIG.API_KEY) {
+        options.headers['Authorization'] = `Bearer ${CHAT_CONFIG.API_KEY}`;
+    }
+
+    options.signal = controller.signal;
+
+    const { body } = options;
+    if (body && typeof body === 'object')
+        options.body = JSON.stringify(body);
+
+    return fetch(urlWithPrefix, options)
+        .then((res: Response) => {
+            ('📡 SSE Response:', {
+                status: res.status,
+                statusText: res.statusText,
+                url: urlWithPrefix
+            });
+
+            if (!/^(2|3)\d{2}$/.test(res.status.toString())) {
+                res.json().then((data: any) => {
+                    console.error('❌ SSE Error:', data.message || 'Server Error');
+                    onError?.(data.message || 'Server Error');
+                });
+                return;
+            }
+
+            handleStream(
+                res,
+                onData,
+                onCompleted,
+                onThought,
+                onMessageEnd,
+                onMessageReplace,
+                onFile,
+                onWorkflowStarted,
+                onWorkflowFinished,
+                onNodeStarted,
+                onNodeFinished,
+                onError
+            );
+        })
+        .catch((err) => {
+            console.error('❌ SSE Request Error:', err);
+            onError?.(err.message);
+        });
+};
+
+// 公共请求函数
+export const request = (url: string, options = {}, needAllResponseContent = false) => {
+    return baseFetch(url, { ...baseOptions, ...options }, needAllResponseContent);
+};
+
+// GET 请求
+export const get = (url: string, options = {}) => {
+    return request(url, { ...options, method: 'GET' });
+};
+
+// POST 请求
+export const post = (url: string, options = {}) => {
+    return request(url, { ...options, method: 'POST' });
+};
+
+// PUT 请求
+export const put = (url: string, options = {}) => {
+    return request(url, { ...options, method: 'PUT' });
+};
+
+// DELETE 请求
+export const del = (url: string, options = {}) => {
+    return request(url, { ...options, method: 'DELETE' });
+};
+
+// 发送聊天消息
+export const sendChatMessage = async (
+    body: Record<string, any>,
+    {
+        onData,
+        onCompleted,
+        onThought,
+        onFile,
+        onError,
+        getAbortController,
+        onMessageEnd,
+        onMessageReplace,
+        onWorkflowStarted,
+        onNodeStarted,
+        onNodeFinished,
+        onWorkflowFinished,
+    }: {
+        onData: IOnData;
+        onCompleted: IOnCompleted;
+        onFile?: IOnFile;
+        onThought?: IOnThought;
+        onMessageEnd?: IOnMessageEnd;
+        onMessageReplace?: IOnMessageReplace;
+        onError?: IOnError;
+        getAbortController?: (abortController: AbortController) => void;
+        onWorkflowStarted?: IOnWorkflowStarted;
+        onNodeStarted?: IOnNodeStarted;
+        onNodeFinished?: IOnNodeFinished;
+        onWorkflowFinished?: IOnWorkflowFinished;
+    },
+) => {
+    return ssePost('chat-messages', {
+        body: {
+            ...body,
+            response_mode: 'streaming',
+        },
+    }, {
+        onData,
+        onCompleted,
+        onThought,
+        onFile,
+        onError,
+        getAbortController,
+        onMessageEnd,
+        onMessageReplace,
+        onNodeStarted,
+        onWorkflowStarted,
+        onWorkflowFinished,
+        onNodeFinished
+    });
+};
+
+// 获取会话列表
+export const fetchConversations = async () => {
+    return get('conversations', {
+        params: { limit: 100, first_id: '' },
+    });
+};
+
+// 获取聊天消息列表
+export const fetchChatList = async (conversationId: string) => {
+    return get('messages', {
+        params: { conversation_id: conversationId, limit: 20, last_id: '' },
+    });
+};
+
+// 获取应用参数
+export const fetchAppParams = async () => {
+    return get('parameters');
+};
+
+// 更新反馈
+export const updateFeedback = async ({ url, body }: { url: string; body: Feedbacktype }) => {
+    return post(url, { body });
+};
+
+// 生成会话名称
+export const generateConversationName = async (id: string) => {
+    return post(`conversations/${id}/name`, {
+        body: { auto_generate: true },
+    });
+};
+
+// 重命名会话
+export const renameConversation = async (id: string, name: string, autoGenerate: boolean = false) => {
+    return post(`conversations/${id}/name`, {
+        body: {
+            name: autoGenerate ? undefined : name,
+            auto_generate: autoGenerate
+        },
+    });
+};
+
+// 删除会话
+export const deleteConversation = async (id: string) => {
+    return del(`conversations/${id}`);
+};
+
+// 文件上传
+export const upload = (fetchOptions: any): Promise<any> => {
+    const urlPrefix = CHAT_CONFIG.API_PREFIX;
+    const urlWithPrefix = `${CHAT_CONFIG.API_URL}${urlPrefix}/file-upload`;
+
+    const defaultOptions = {
+        method: 'POST',
+        url: urlWithPrefix,
+        data: {},
+    };
+
+    const options = {
+        ...defaultOptions,
+        ...fetchOptions,
+    };
+
+    return new Promise((resolve, reject) => {
+        const xhr = options.xhr;
+        xhr.open(options.method, options.url);
+
+        for (const key in options.headers)
+            xhr.setRequestHeader(key, options.headers[key]);
+
+        if (CHAT_CONFIG.API_KEY) {
+            xhr.setRequestHeader('Authorization', `Bearer ${CHAT_CONFIG.API_KEY}`);
+        }
+
+        xhr.withCredentials = true;
+        xhr.onreadystatechange = function () {
+            if (xhr.readyState === 4) {
+                if (xhr.status === 200)
+                    resolve({ id: xhr.response });
+                else
+                    reject(xhr);
+            }
+        };
+        xhr.upload.onprogress = options.onprogress;
+        xhr.send(options.data);
+    });
+}; 
\ No newline at end of file
diff --git a/app/services/dify-client.server.ts b/app/services/dify-client.server.ts
new file mode 100644
index 0000000..aaada05
--- /dev/null
+++ b/app/services/dify-client.server.ts
@@ -0,0 +1,185 @@
+import { CHAT_CONFIG } from '../config/chat';
+
+// 获取环境变量的服务端函数
+const getServerEnvVar = (name: string, defaultValue: string = '') => {
+    return process.env[name] || defaultValue;
+};
+
+// Dify API 客户端配置
+const DIFY_CONFIG = {
+    API_URL: getServerEnvVar('NEXT_PUBLIC_API_URL', 'https://api.dify.ai/v1'),
+    API_KEY: getServerEnvVar('NEXT_PUBLIC_APP_KEY', ''),
+    APP_ID: (() => {
+        const rawAppId = getServerEnvVar('NEXT_PUBLIC_APP_ID', '');
+        // 从完整URL中提取APP ID
+        const match = rawAppId.match(/\/app\/([a-f0-9-]{36})/);
+        return match ? match[1] : rawAppId;
+    })(),
+};
+
+// console.log('🔧 Dify Client Config:', {
+//     apiUrl: DIFY_CONFIG.API_URL,
+//     appId: DIFY_CONFIG.APP_ID,
+//     hasApiKey: !!DIFY_CONFIG.API_KEY
+// });
+
+// 基础请求函数
+const difyFetch = async (endpoint: string, options: RequestInit = {}) => {
+    const url = `${DIFY_CONFIG.API_URL}/${endpoint.replace(/^\//, '')}`;
+
+    const headers = {
+        'Content-Type': 'application/json',
+        'Authorization': `Bearer ${DIFY_CONFIG.API_KEY}`,
+        ...options.headers,
+    };
+
+    // console.log('🌐 Dify API Request:', {
+    //     url,
+    //     method: options.method || 'GET',
+    //     hasAuth: !!DIFY_CONFIG.API_KEY
+    // });
+
+    const response = await fetch(url, {
+        ...options,
+        headers,
+    });
+
+    if (!response.ok) {
+        const errorText = await response.text();
+        console.error('❌ Dify API Error:', {
+            status: response.status,
+            statusText: response.statusText,
+            error: errorText
+        });
+        throw new Error(`Dify API Error: ${response.status} ${response.statusText}`);
+    }
+
+    return response;
+};
+
+// 生成用户ID
+const generateUserId = (sessionId: string) => {
+    return `user_${DIFY_CONFIG.APP_ID}:${sessionId}`;
+};
+
+// Dify API 客户端
+export const difyClient = {
+    // 获取应用参数
+    async getApplicationParameters(user: string) {
+        const response = await difyFetch('parameters', {
+            method: 'GET',
+            headers: {
+                'Authorization': `Bearer ${DIFY_CONFIG.API_KEY}`,
+            },
+        });
+        return response.json();
+    },
+
+    // 获取会话列表
+    async getConversations(user: string) {
+        const params = new URLSearchParams({
+            user,
+            limit: '100',
+            first_id: '',
+        });
+
+        const response = await difyFetch(`conversations?${params}`, {
+            method: 'GET',
+        });
+        return response.json();
+    },
+
+    // 获取会话消息
+    async getConversationMessages(user: string, conversationId: string) {
+        const params = new URLSearchParams({
+            user,
+            conversation_id: conversationId,
+            limit: '20',
+            last_id: '',
+        });
+
+        const response = await difyFetch(`messages?${params}`, {
+            method: 'GET',
+        });
+        return response.json();
+    },
+
+    // 发送聊天消息
+    async createChatMessage(
+        inputs: Record<string, any>,
+        query: string,
+        user: string,
+        responseMode: string = 'streaming',
+        conversationId?: string,
+        files?: any[]
+    ) {
+        const body = {
+            inputs,
+            query,
+            user,
+            response_mode: responseMode,
+            conversation_id: conversationId,
+            files: files || [],
+        };
+
+        const response = await difyFetch('chat-messages', {
+            method: 'POST',
+            body: JSON.stringify(body),
+        });
+
+        // 对于流式响应，直接返回Response对象
+        if (responseMode === 'streaming') {
+            return response;
+        }
+
+        return response.json();
+    },
+
+    // 重命名会话
+    async renameConversation(conversationId: string, name: string, user: string, autoGenerate: boolean = false) {
+        const body = {
+            name,
+            auto_generate: autoGenerate,
+            user,
+        };
+
+        const response = await difyFetch(`conversations/${conversationId}/name`, {
+            method: 'POST',
+            body: JSON.stringify(body),
+        });
+        return response.json();
+    },
+
+    // 删除会话
+    async deleteConversation(conversationId: string, user: string) {
+        const body = {
+            user,
+        };
+
+        const response = await difyFetch(`conversations/${conversationId}`, {
+            method: 'DELETE',
+            body: JSON.stringify(body),
+        });
+        return response.json();
+    },
+
+    // 更新消息反馈
+    async updateMessageFeedback(messageId: string, rating: 'like' | 'dislike' | null, user: string) {
+        const body = {
+            rating,
+            user,
+        };
+
+        const response = await difyFetch(`messages/${messageId}/feedbacks`, {
+            method: 'POST',
+            body: JSON.stringify(body),
+        });
+        return response.json();
+    },
+};
+
+// 工具函数
+export const difyUtils = {
+    generateUserId,
+    getConfig: () => DIFY_CONFIG,
+}; 
\ No newline at end of file
diff --git a/app/styles/components/chat-with-llm/chat-input.css b/app/styles/components/chat-with-llm/chat-input.css
new file mode 100644
index 0000000..07c7eaf
--- /dev/null
+++ b/app/styles/components/chat-with-llm/chat-input.css
@@ -0,0 +1,27 @@
+/* 聊天输入区域 */
+.chat-input-container {
+    flex-shrink: 0;
+    background: #fff;
+    border-top: 1px solid #e5e7eb;
+    padding: 16px 20px;
+    z-index: 10;
+}
+
+.chat-input-wrapper {
+    max-width: 100%;
+    margin: 0 auto;
+    position: relative;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+    .chat-input-container {
+        padding: 12px 16px;
+    }
+}
+
+@media (max-width: 480px) {
+    .chat-input-container {
+        padding: 8px 12px;
+    }
+}
\ No newline at end of file
diff --git a/app/styles/components/chat-with-llm/chat-message.css b/app/styles/components/chat-with-llm/chat-message.css
new file mode 100644
index 0000000..ae04956
--- /dev/null
+++ b/app/styles/components/chat-with-llm/chat-message.css
@@ -0,0 +1,132 @@
+/* 消息项样式 */
+.chat-message {
+    margin-bottom: 20px;
+    animation: fadeInUp 0.3s ease-out;
+    max-width: 100%;
+}
+
+/* 消息卡片 */
+.message-card {
+    max-width: 85%;
+    word-wrap: break-word;
+    word-break: break-word;
+}
+
+.message-card.user {
+    margin-left: auto;
+}
+
+.message-card.assistant {
+    margin-right: auto;
+}
+
+/* 流式文本效果 */
+.streaming-text {
+    position: relative;
+}
+
+.streaming-text::after {
+    content: '';
+    /* 移除光标 */
+    animation: blink 1s infinite;
+    color: #1890ff;
+    margin-left: 2px;
+}
+
+@keyframes blink {
+
+    0%,
+    50% {
+        opacity: 1;
+    }
+
+    51%,
+    100% {
+        opacity: 0;
+    }
+}
+
+/* 消息动画 */
+@keyframes fadeInUp {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/* 响应指示器 */
+.responding-indicator {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    color: #6b7280;
+    font-size: 14px;
+}
+
+/* 反馈按钮容器 */
+.feedback-buttons {
+    margin-top: 12px;
+    display: flex;
+    gap: 8px;
+}
+
+/* 建议问题 */
+.suggested-questions {
+    margin-top: 16px;
+}
+
+.question-button {
+    margin-bottom: 8px;
+    margin-right: 8px;
+    white-space: normal;
+    height: auto;
+    padding: 8px 12px;
+    text-align: left;
+    border: 1px solid #d1d5db;
+    background: #f9fafb;
+    color: #374151;
+    transition: all 0.2s ease;
+}
+
+.question-button:hover {
+    border-color: #1890ff;
+    background: #f0f9ff;
+    color: #1890ff;
+}
+
+/* 消息时间戳 */
+.message-timestamp {
+    font-size: 12px;
+    color: #9ca3af;
+    margin-top: 8px;
+    display: flex;
+    gap: 12px;
+}
+
+/* 消息图片 */
+.message-images {
+    margin-top: 12px;
+}
+
+.message-images .ant-image {
+    border-radius: 8px;
+    overflow: hidden;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+    .message-card {
+        max-width: 95%;
+    }
+}
+
+@media (max-width: 480px) {
+    .message-card {
+        max-width: 100%;
+    }
+}
\ No newline at end of file
diff --git a/app/styles/components/chat-with-llm/index.css b/app/styles/components/chat-with-llm/index.css
new file mode 100644
index 0000000..9535a76
--- /dev/null
+++ b/app/styles/components/chat-with-llm/index.css
@@ -0,0 +1,246 @@
+/* 聊天布局样式 */
+
+/* 聊天容器 - 自适应布局 */
+.chat-container {
+    height: 400px;
+    width: 100%;
+    flex-direction: column;
+    background: #fff;
+    overflow: hidden;
+    position: relative;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    margin: 20px auto;
+}
+
+/* 聊天头部 */
+.chat-header {
+    flex-shrink: 0;
+    height: 60px;
+    background: #fff;
+    border-bottom: 1px solid #e5e7eb;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 20px;
+    z-index: 10;
+}
+
+.chat-header h1 {
+    font-size: 18px;
+    font-weight: 600;
+    color: #1f2937;
+    margin: 0;
+}
+
+/* 聊天消息列表容器 */
+.chat-messages {
+    flex: 1;
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding: 20px;
+    scroll-behavior: smooth;
+    background: #f9fafb;
+    position: relative;
+}
+
+/* 自定义滚动条 */
+.chat-messages::-webkit-scrollbar {
+    width: 6px;
+}
+
+.chat-messages::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+.chat-messages::-webkit-scrollbar-thumb {
+    background: #d1d5db;
+    border-radius: 3px;
+}
+
+.chat-messages::-webkit-scrollbar-thumb:hover {
+    background: #9ca3af;
+}
+
+/* 新对话欢迎界面 */
+.chat-welcome {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    text-align: center;
+    padding: 40px 20px;
+}
+
+.chat-welcome h3 {
+    font-size: 24px;
+    font-weight: 600;
+    color: #1f2937;
+    margin-bottom: 12px;
+}
+
+.chat-welcome p {
+    font-size: 16px;
+    color: #6b7280;
+    margin-bottom: 0;
+}
+
+/* 加载状态 */
+.chat-loading {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    gap: 16px;
+}
+
+.chat-loading .ant-spin {
+    font-size: 24px;
+}
+
+/* 错误状态 */
+.chat-error {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    text-align: center;
+    padding: 40px 20px;
+}
+
+.chat-error h2 {
+    font-size: 20px;
+    font-weight: 600;
+    color: #dc2626;
+    margin-bottom: 12px;
+}
+
+.chat-error p {
+    font-size: 14px;
+    color: #6b7280;
+    margin-bottom: 0;
+}
+
+/* 确保聊天容器在主内容区域中占满全部空间 */
+.main-content .chat-container {
+    height: calc(89vh - 0px);
+    /* 减去任何顶部导航栏的高度 */
+}
+
+/* 如果有面包屑导航，需要调整高度 */
+.main-content .breadcrumb+.chat-container {
+    height: calc(100vh - 60px);
+    /* 减去面包屑的高度 */
+}
+
+/* 侧边栏滚动区域样式 */
+.h-full.overflow-y-auto::-webkit-scrollbar {
+    width: 6px;
+}
+
+.h-full.overflow-y-auto::-webkit-scrollbar-track {
+    background: #f8f9fa;
+    border-radius: 3px;
+}
+
+.h-full.overflow-y-auto::-webkit-scrollbar-thumb {
+    background: #d1d5db;
+    border-radius: 3px;
+    transition: background-color 0.2s ease;
+}
+
+.h-full.overflow-y-auto::-webkit-scrollbar-thumb:hover {
+    background: #9ca3af;
+}
+
+/* Firefox 滚动条样式 */
+.h-full.overflow-y-auto {
+    scrollbar-width: thin;
+    scrollbar-color: #d1d5db #f8f9fa;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+    .chat-container {
+        height: 100vh;
+    }
+
+    .chat-messages {
+        padding: 16px;
+    }
+
+    .chat-header {
+        padding: 0 16px;
+        height: 56px;
+    }
+
+    .chat-header h1 {
+        font-size: 16px;
+    }
+}
+
+@media (max-width: 480px) {
+    .chat-messages {
+        padding: 12px;
+    }
+
+    .chat-welcome {
+        padding: 20px 16px;
+    }
+
+    .chat-welcome h3 {
+        font-size: 20px;
+    }
+
+    .chat-welcome p {
+        font-size: 14px;
+    }
+}
+
+/* 全局按钮主题色统一 */
+.ant-btn-primary {
+    background-color: rgb(0, 104, 74) !important;
+    border-color: rgb(0, 104, 74) !important;
+}
+
+.ant-btn-primary:hover {
+    background-color: rgba(0, 104, 74, 0.8) !important;
+    border-color: rgba(0, 104, 74, 0.8) !important;
+}
+
+.ant-btn-primary:focus {
+    background-color: rgb(0, 104, 74) !important;
+    border-color: rgb(0, 104, 74) !important;
+}
+
+.ant-btn-primary:active {
+    background-color: rgba(0, 104, 74, 0.9) !important;
+    border-color: rgba(0, 104, 74, 0.9) !important;
+}
+
+/* 禁用状态保持原样 */
+.ant-btn-primary:disabled {
+    background-color: rgba(0, 0, 0, 0.04) !important;
+    border-color: #d9d9d9 !important;
+    color: rgba(0, 0, 0, 0.25) !important;
+}
+
+/* 链接按钮主题色 */
+.ant-btn-link {
+    color: rgb(0, 104, 74) !important;
+}
+
+.ant-btn-link:hover {
+    color: rgba(0, 104, 74, 0.8) !important;
+}
+
+.ant-btn-link:focus {
+    color: rgb(0, 104, 74) !important;
+}
+
+.ant-btn-link:active {
+    color: rgba(0, 104, 74, 0.9) !important;
+}
\ No newline at end of file
diff --git a/app/styles/components/chat-with-llm/markdown.css b/app/styles/components/chat-with-llm/markdown.css
new file mode 100644
index 0000000..6101619
--- /dev/null
+++ b/app/styles/components/chat-with-llm/markdown.css
@@ -0,0 +1,136 @@
+/* Markdown 样式 */
+.markdown-content {
+    font-size: 14px;
+    line-height: 1.6;
+    color: #374151;
+    overflow-wrap: break-word;
+}
+
+/* 标题样式 */
+.markdown-content h1,
+.markdown-content h2,
+.markdown-content h3,
+.markdown-content h4,
+.markdown-content h5,
+.markdown-content h6 {
+    margin-top: 1.5em;
+    margin-bottom: 0.5em;
+    font-weight: 600;
+    line-height: 1.25;
+}
+
+.markdown-content h1 {
+    font-size: 2em;
+    border-bottom: 1px solid #eaecef;
+    padding-bottom: 0.3em;
+}
+
+.markdown-content h2 {
+    font-size: 1.5em;
+    border-bottom: 1px solid #eaecef;
+    padding-bottom: 0.3em;
+}
+
+.markdown-content h3 {
+    font-size: 1.25em;
+}
+
+.markdown-content h4 {
+    font-size: 1em;
+}
+
+/* 段落样式 */
+.markdown-content p {
+    margin: 0.75em 0;
+}
+
+/* 列表样式 */
+.markdown-content ul,
+.markdown-content ol {
+    margin-top: 0.5em;
+    margin-bottom: 0.5em;
+    padding-left: 1.5em;
+}
+
+.markdown-content li {
+    margin: 0.3em 0;
+}
+
+/* 代码样式 */
+.markdown-content code {
+    padding: 0.2em 0.4em;
+    margin: 0;
+    font-size: 85%;
+    background-color: rgba(175, 184, 193, 0.2);
+    border-radius: 3px;
+    font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
+}
+
+.markdown-content pre {
+    padding: 16px;
+    overflow: auto;
+    font-size: 85%;
+    line-height: 1.45;
+    background-color: #f6f8fa;
+    border-radius: 6px;
+    margin: 1em 0;
+}
+
+.markdown-content pre code {
+    padding: 0;
+    margin: 0;
+    background-color: transparent;
+    border: 0;
+    word-break: normal;
+    white-space: pre;
+}
+
+/* 表格样式 */
+.markdown-content table {
+    border-collapse: collapse;
+    width: 100%;
+    margin: 1em 0;
+    overflow: auto;
+}
+
+.markdown-content table th,
+.markdown-content table td {
+    padding: 8px 16px;
+    border: 1px solid #dfe2e5;
+}
+
+.markdown-content table th {
+    font-weight: 600;
+    background-color: #f6f8fa;
+}
+
+.markdown-content table tr:nth-child(2n) {
+    background-color: #f6f8fa;
+}
+
+/* 链接样式 */
+.markdown-content a {
+    color: #0969da;
+    text-decoration: none;
+}
+
+.markdown-content a:hover {
+    text-decoration: underline;
+}
+
+/* 引用样式 */
+.markdown-content blockquote {
+    margin: 1em 0;
+    padding: 0 1em;
+    color: #6a737d;
+    border-left: 0.25em solid #dfe2e5;
+}
+
+/* 水平线样式 */
+.markdown-content hr {
+    height: 0.25em;
+    padding: 0;
+    margin: 24px 0;
+    background-color: #e1e4e8;
+    border: 0;
+}
\ No newline at end of file
diff --git a/app/styles/components/chat-with-llm/sidebar.css b/app/styles/components/chat-with-llm/sidebar.css
new file mode 100644
index 0000000..48b7dd0
--- /dev/null
+++ b/app/styles/components/chat-with-llm/sidebar.css
@@ -0,0 +1,74 @@
+/* 聊天侧边栏样式 */
+.chat-sidebar-menu .ant-menu-item {
+    margin: 4px 0;
+    border-radius: 6px;
+    height: auto;
+    line-height: 1.4;
+    padding: 8px 12px;
+}
+
+.chat-sidebar-menu .ant-menu-item:hover {
+    background-color: #f5f5f5;
+}
+
+.chat-sidebar-menu .ant-menu-item-selected {
+    background-color: rgba(0, 104, 74, 0.1);
+    border-color: rgb(0, 104, 74);
+}
+
+.chat-sidebar-menu .ant-menu-item-selected::after {
+    border-right: 3px solid rgb(0, 104, 74);
+}
+
+/* 会话项样式 */
+.chat-sidebar-menu .ant-menu-item .ant-menu-title-content {
+    width: 100%;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+    .ant-layout-sider {
+        position: fixed !important;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        z-index: 1000;
+    }
+
+    .ant-layout-sider.ant-layout-sider-collapsed {
+        left: -200px;
+    }
+}
+
+/* 滚动条样式 */
+.chat-sidebar-menu::-webkit-scrollbar {
+    width: 4px;
+}
+
+.chat-sidebar-menu::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    border-radius: 2px;
+}
+
+.chat-sidebar-menu::-webkit-scrollbar-thumb {
+    background: #c1c1c1;
+    border-radius: 2px;
+}
+
+.chat-sidebar-menu::-webkit-scrollbar-thumb:hover {
+    background: #a8a8a8;
+}
+
+/* 确保侧边栏布局正确 */
+.ant-layout-sider {
+    display: flex !important;
+    flex-direction: column !important;
+}
+
+/* 侧边栏内容区域样式 */
+.ant-layout-sider .ant-layout-sider-children {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: hidden;
+}
\ No newline at end of file
diff --git a/app/styles/components/chat-with-llm/thought-process.css b/app/styles/components/chat-with-llm/thought-process.css
new file mode 100644
index 0000000..c373c84
--- /dev/null
+++ b/app/styles/components/chat-with-llm/thought-process.css
@@ -0,0 +1,57 @@
+/* 思考过程样式 */
+.thought-process-card {
+    margin-bottom: 12px;
+    border-left: 4px solid #1890ff;
+    background-color: #f0f8ff;
+}
+
+.thought-process-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 8px 12px;
+}
+
+.thought-process-tool-icon {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-weight: 500;
+    color: #1890ff;
+}
+
+.thought-process-content {
+    padding: 0 12px 12px;
+}
+
+.thought-process-collapsed {
+    max-height: 150px;
+    overflow: hidden;
+    position: relative;
+}
+
+.thought-process-collapsed::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 40px;
+    background: linear-gradient(to bottom, rgba(240, 248, 255, 0), rgba(240, 248, 255, 1));
+}
+
+.thought-process-observation {
+    margin-top: 8px;
+    padding: 8px 12px;
+    background-color: #f0fff0;
+    border: 1px solid #b7eb8f;
+    border-radius: 4px;
+}
+
+.thought-process-loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 12px;
+    color: #1890ff;
+}
\ No newline at end of file
diff --git a/app/types/dify_chat.ts b/app/types/dify_chat.ts
new file mode 100644
index 0000000..c533487
--- /dev/null
+++ b/app/types/dify_chat.ts
@@ -0,0 +1,264 @@
+// 应用信息类型
+export interface AppInfo {
+    title: string;
+    description: string;
+    copyright: string;
+    privacy_policy: string;
+    default_language: string;
+}
+
+// 会话项类型
+export interface ConversationItem {
+    id: string;
+    name: string;
+    inputs?: Record<string, any>;
+    introduction?: string;
+}
+
+// 聊天消息类型
+export interface ChatItem {
+    id: string;
+    content: string;
+    isAnswer: boolean;
+    feedback?: Feedbacktype;
+    agent_thoughts?: ThoughtItem[];
+    message_files?: VisionFile[];
+    isError?: boolean;
+    workflow_run_id?: string;
+    workflowProcess?: WorkflowProcess;
+    more?: MessageMore;
+    useCurrentUserAvatar?: boolean;
+    isOpeningStatement?: boolean;
+    suggestedQuestions?: string[];
+}
+
+// 消息更多信息类型
+export interface MessageMore {
+    time: string;
+    tokens: number;
+    latency: number | string;
+}
+
+// 反馈类型
+export type Feedbacktype = {
+    rating: 'like' | 'dislike' | null;
+    content?: string;
+}
+
+// 思考过程类型
+export interface ThoughtItem {
+    id?: string;
+    chain_id?: string;
+    thought?: string;
+    observation?: string;
+    message_files?: VisionFile[];
+    tool_name?: string;
+    tool_input?: string;
+    tool_output?: string;
+    tool_finished?: boolean;
+    parent_id?: string;
+    children_ids?: string[];
+    sort?: number;
+    message_id?: string;
+    tool?: string;
+    position?: number;
+    files?: string[];
+}
+
+// 文本类型表单项
+export interface TextTypeFormItem {
+    label: string;
+    variable: string;
+    required: boolean;
+    max_length: number;
+}
+
+// 选择类型表单项
+export interface SelectTypeFormItem {
+    label: string;
+    variable: string;
+    required: boolean;
+    options: string[];
+}
+
+// 用户输入表单项
+export type UserInputFormItem = {
+    'text-input': TextTypeFormItem;
+} | {
+    'select': SelectTypeFormItem;
+} | {
+    'paragraph': TextTypeFormItem;
+}
+
+// 提示配置类型
+export interface PromptConfig {
+    prompt_template: string;
+    prompt_variables: PromptVariable[];
+}
+
+// 提示变量类型
+export interface PromptVariable {
+    key: string;
+    name: string;
+    type: string;
+    required: boolean;
+    options?: string[];
+    max_length?: number;
+    allowed_file_extensions?: string[];
+    allowed_file_types?: string[];
+    allowed_file_upload_methods?: TransferMethod[];
+}
+
+// 视觉文件类型
+export interface VisionFile {
+    id?: string;
+    type: string;
+    transfer_method: TransferMethod;
+    url?: string;
+    upload_file_id?: string;
+    belongs_to?: string;
+    usage?: string;
+    result?: any;
+    detail?: Resolution;
+}
+
+// 图片文件类型
+export interface ImageFile {
+    type: TransferMethod;
+    _id: string;
+    fileId: string;
+    file?: File;
+    progress: number;
+    url: string;
+    base64Url?: string;
+    deleted?: boolean;
+}
+
+// 视觉设置类型
+export interface VisionSettings {
+    enabled: boolean;
+    detail?: Resolution;
+    number_limits?: number;
+    transfer_methods?: TransferMethod[];
+    image_file_size_limit?: number | string;
+}
+
+// 分辨率枚举
+export enum Resolution {
+    low = 'low',
+    high = 'high',
+}
+
+// 传输方法枚举
+export enum TransferMethod {
+    local_file = 'local_file',
+    remote_url = 'remote_url',
+    all = 'all',
+}
+
+// 工作流运行状态枚举
+export enum WorkflowRunningStatus {
+    init = 'init',
+    running = 'running',
+    completed = 'completed',
+    error = 'error',
+    waiting = 'waiting',
+    succeeded = 'succeeded',
+    failed = 'failed',
+    stopped = 'stopped',
+}
+
+// 节点运行状态枚举
+export enum NodeRunningStatus {
+    NotStart = 'not-start',
+    Waiting = 'waiting',
+    Running = 'running',
+    Succeeded = 'succeeded',
+    Failed = 'failed',
+}
+
+// 块类型枚举
+export enum BlockEnum {
+    Start = 'start',
+    End = 'end',
+    Answer = 'answer',
+    LLM = 'llm',
+    KnowledgeRetrieval = 'knowledge-retrieval',
+    QuestionClassifier = 'question-classifier',
+    IfElse = 'if-else',
+    Code = 'code',
+    TemplateTransform = 'template-transform',
+    HttpRequest = 'http-request',
+    VariableAssigner = 'variable-assigner',
+    Tool = 'tool',
+}
+
+// 节点追踪类型
+export interface NodeTracing {
+    id: string;
+    index: number;
+    predecessor_node_id: string;
+    node_id: string;
+    node_type: BlockEnum;
+    title: string;
+    inputs: any;
+    process_data: any;
+    outputs?: any;
+    status: string;
+    error?: string;
+    elapsed_time: number;
+    execution_metadata: {
+        total_tokens: number;
+        total_price: number;
+        currency: string;
+    };
+    created_at: number;
+    created_by: {
+        id: string;
+        name: string;
+        email: string;
+    };
+    finished_at: number;
+    extras?: any;
+    expand?: boolean; // for UI
+}
+
+// 工作流进程类型
+export interface WorkflowProcess {
+    status: WorkflowRunningStatus;
+    tracing: NodeTracing[];
+    expand?: boolean; // for UI
+}
+
+// 代码语言枚举
+export enum CodeLanguage {
+    python3 = 'python3',
+    javascript = 'javascript',
+    json = 'json',
+}
+
+// 消息事件类型
+export interface MessageEvent {
+    event: string;
+    task_id: string;
+    conversation_id: string;
+    message_id: string;
+    answer: string;
+}
+
+// 消息替换类型
+export interface MessageReplace {
+    event: string;
+    task_id: string;
+    conversation_id: string;
+    message_id: string;
+    answer: string;
+}
+
+// 消息结束类型
+export interface MessageEnd {
+    event: string;
+    task_id: string;
+    conversation_id: string;
+    message_id: string;
+} 
\ No newline at end of file
diff --git a/app/utils/chat-utils.ts b/app/utils/chat-utils.ts
new file mode 100644
index 0000000..73c1091
--- /dev/null
+++ b/app/utils/chat-utils.ts
@@ -0,0 +1,123 @@
+import type { PromptVariable, ThoughtItem, UserInputFormItem, VisionFile } from '../types/dify_chat';
+
+/**
+ * 替换提示模板中的变量
+ * @param str 提示模板字符串
+ * @param promptVariables 提示变量列表
+ * @param inputs 输入值
+ * @returns 替换后的字符串
+ */
+export function replaceVarWithValues(str: string, promptVariables: PromptVariable[], inputs: Record<string, any>) {
+    return str.replace(/\{\{([^}]+)\}\}/g, (match, key) => {
+        const name = inputs[key];
+        if (name)
+            return name;
+
+        const valueObj: PromptVariable | undefined = promptVariables.find(v => v.key === key);
+        return valueObj ? `{{${valueObj.key}}}` : match;
+    });
+}
+
+/**
+ * 将用户输入表单转换为提示变量
+ * @param useInputs 用户输入表单项列表
+ * @returns 提示变量列表
+ */
+export const userInputsFormToPromptVariables = (useInputs: UserInputFormItem[] | null) => {
+    if (!useInputs)
+        return [];
+    const promptVariables: PromptVariable[] = [];
+    useInputs.forEach((item: any) => {
+        const [type, content] = (() => {
+            const type = Object.keys(item)[0];
+            return [type === 'text-input' ? 'string' : type, item[type]];
+        })();
+
+        if (type === 'string' || type === 'paragraph') {
+            promptVariables.push({
+                key: content.variable,
+                name: content.label,
+                required: content.required,
+                type,
+                max_length: content.max_length,
+                options: [],
+            });
+        }
+        else if (type === 'number') {
+            promptVariables.push({
+                key: content.variable,
+                name: content.label,
+                required: content.required,
+                type,
+                options: [],
+            });
+        }
+        else if (type === 'file' || type === 'file-list') {
+            promptVariables.push({
+                ...content,
+                key: content.variable,
+                name: content.label,
+                required: content.required,
+                type,
+                max_length: content.max_length,
+                options: [],
+            });
+        }
+        else {
+            promptVariables.push({
+                key: content.variable,
+                name: content.label,
+                required: content.required,
+                type: 'select',
+                options: content.options,
+            });
+        }
+    });
+    return promptVariables;
+};
+
+/**
+ * 排序代理思考列表
+ * @param list 思考列表
+ * @returns 排序后的列表
+ */
+export const sortAgentSorts = (list: ThoughtItem[]) => {
+    if (!list)
+        return list;
+    if (list.some(item => (item as any).position === undefined))
+        return list;
+    const temp = [...list];
+    temp.sort((a, b) => (a as any).position - (b as any).position);
+    return temp;
+};
+
+/**
+ * 为思考列表添加文件信息
+ * @param list 思考列表
+ * @param messageFiles 消息文件列表
+ * @returns 添加文件信息后的列表
+ */
+export const addFileInfos = (list: ThoughtItem[], messageFiles: VisionFile[]) => {
+    if (!list || !messageFiles)
+        return list;
+    return list.map((item) => {
+        if ((item as any).files && (item as any).files?.length > 0) {
+            return {
+                ...item,
+                message_files: (item as any).files.map((fileId: string) => messageFiles.find(file => file.id === fileId)) as VisionFile[],
+            };
+        }
+        return item;
+    });
+};
+
+/**
+ * 将Unicode编码转换为字符
+ * @param text 包含Unicode编码的文本
+ * @returns 转换后的文本
+ */
+export function unicodeToChar(text: string) {
+    return text.replace(/\\u[0-9a-f]{4}/g, (match) => {
+        return String.fromCharCode(parseInt(match.substring(2), 16));
+    });
+} 
\ No newline at end of file
diff --git a/app/utils/session.server.ts b/app/utils/session.server.ts
new file mode 100644
index 0000000..e19537f
--- /dev/null
+++ b/app/utils/session.server.ts
@@ -0,0 +1,53 @@
+import { createCookieSessionStorage } from '@remix-run/node';
+import { v4 as uuidv4 } from 'uuid';
+import { difyUtils } from '../services/dify-client.server';
+
+// 创建会话存储
+const sessionStorage = createCookieSessionStorage({
+    cookie: {
+        name: '__dify_session',
+        httpOnly: true,
+        path: '/',
+        sameSite: 'lax',
+        secrets: ['dify-chat-secret'], // 在生产环境中应该使用环境变量
+        secure: process.env.NODE_ENV === 'production',
+        maxAge: 60 * 60 * 24 * 30, // 30天
+    },
+});
+
+// 获取会话
+export async function getSession(request: Request) {
+    const cookie = request.headers.get('Cookie');
+    return sessionStorage.getSession(cookie);
+}
+
+// 提交会话
+export async function commitSession(session: any) {
+    return sessionStorage.commitSession(session);
+}
+
+// 获取或创建会话信息
+export async function getSessionInfo(request: Request) {
+    const session = await getSession(request);
+
+    let sessionId = session.get('sessionId');
+    if (!sessionId) {
+        sessionId = uuidv4();
+        session.set('sessionId', sessionId);
+    }
+
+    const user = difyUtils.generateUserId(sessionId);
+
+    return {
+        sessionId,
+        user,
+        session,
+    };
+}
+
+// 设置会话头部
+export function setSessionHeaders(sessionId: string) {
+    return {
+        'Set-Cookie': `session_id=${sessionId}; Path=/; HttpOnly; SameSite=Lax; Max-Age=${60 * 60 * 24 * 30}`,
+    };
+} 
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 94c47b7..c3018ea 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,11 +15,14 @@
         "@remix-run/react": "^2.16.2",
         "@remix-run/serve": "^2.16.2",
         "@uiw/react-codemirror": "^4.23.10",
+        "ahooks": "^3.8.5",
+        "antd": "^5.25.4",
         "axios": "^1.9.0",
         "dayjs": "^1.11.13",
         "diff": "^7.0.0",
         "docx-preview": "^0.3.5",
         "html-docx-js": "^0.3.1",
+        "immer": "^10.1.1",
         "isbot": "^4.1.0",
         "jszip": "^3.10.1",
         "mammoth": "^1.9.0",
@@ -30,7 +33,8 @@
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-pdf": "^5.7.2",
-        "remixicon": "^4.6.0"
+        "remixicon": "^4.6.0",
+        "uuid": "^11.1.0"
       },
       "devDependencies": {
         "@remix-run/dev": "^2.16.2",
@@ -82,6 +86,109 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@ant-design/colors": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmmirror.com/@ant-design/colors/-/colors-7.2.1.tgz",
+      "integrity": "sha512-lCHDcEzieu4GA3n8ELeZ5VQ8pKQAWcGGLRTQ50aQM2iqPpq2evTxER84jfdPvsPAtEcZ7m44NI45edFMo8oOYQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@ant-design/fast-color": "^2.0.6"
+      }
+    },
+    "node_modules/@ant-design/cssinjs": {
+      "version": "1.23.0",
+      "resolved": "https://registry.npmmirror.com/@ant-design/cssinjs/-/cssinjs-1.23.0.tgz",
+      "integrity": "sha512-7GAg9bD/iC9ikWatU9ym+P9ugJhi/WbsTWzcKN6T4gU0aehsprtke1UAaaSxxkjjmkJb3llet/rbUSLPgwlY4w==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.11.1",
+        "@emotion/hash": "^0.8.0",
+        "@emotion/unitless": "^0.7.5",
+        "classnames": "^2.3.1",
+        "csstype": "^3.1.3",
+        "rc-util": "^5.35.0",
+        "stylis": "^4.3.4"
+      },
+      "peerDependencies": {
+        "react": ">=16.0.0",
+        "react-dom": ">=16.0.0"
+      }
+    },
+    "node_modules/@ant-design/cssinjs-utils": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmmirror.com/@ant-design/cssinjs-utils/-/cssinjs-utils-1.1.3.tgz",
+      "integrity": "sha512-nOoQMLW1l+xR1Co8NFVYiP8pZp3VjIIzqV6D6ShYF2ljtdwWJn5WSsH+7kvCktXL/yhEtWURKOfH5Xz/gzlwsg==",
+      "license": "MIT",
+      "dependencies": {
+        "@ant-design/cssinjs": "^1.21.0",
+        "@babel/runtime": "^7.23.2",
+        "rc-util": "^5.38.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/@ant-design/cssinjs/node_modules/@emotion/hash": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmmirror.com/@emotion/hash/-/hash-0.8.0.tgz",
+      "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==",
+      "license": "MIT"
+    },
+    "node_modules/@ant-design/fast-color": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmmirror.com/@ant-design/fast-color/-/fast-color-2.0.6.tgz",
+      "integrity": "sha512-y2217gk4NqL35giHl72o6Zzqji9O7vHh9YmhUVkPtAOpoTCH4uWxo/pr4VE8t0+ChEPs0qo4eJRC5Q1eXWo3vA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.24.7"
+      },
+      "engines": {
+        "node": ">=8.x"
+      }
+    },
+    "node_modules/@ant-design/icons": {
+      "version": "5.6.1",
+      "resolved": "https://registry.npmmirror.com/@ant-design/icons/-/icons-5.6.1.tgz",
+      "integrity": "sha512-0/xS39c91WjPAZOWsvi1//zjx6kAp4kxWwctR6kuU6p133w8RU0D2dSCvZC19uQyharg/sAvYxGYWl01BbZZfg==",
+      "license": "MIT",
+      "dependencies": {
+        "@ant-design/colors": "^7.0.0",
+        "@ant-design/icons-svg": "^4.4.0",
+        "@babel/runtime": "^7.24.8",
+        "classnames": "^2.2.6",
+        "rc-util": "^5.31.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "peerDependencies": {
+        "react": ">=16.0.0",
+        "react-dom": ">=16.0.0"
+      }
+    },
+    "node_modules/@ant-design/icons-svg": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmmirror.com/@ant-design/icons-svg/-/icons-svg-4.4.2.tgz",
+      "integrity": "sha512-vHbT+zJEVzllwP+CM+ul7reTEfBR0vgxFe7+lREAsAA7YGsYpboiq2sQNeQeRvh09GfQgs/GyFEvZpJ9cLXpXA==",
+      "license": "MIT"
+    },
+    "node_modules/@ant-design/react-slick": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmmirror.com/@ant-design/react-slick/-/react-slick-1.1.2.tgz",
+      "integrity": "sha512-EzlvzE6xQUBrZuuhSAFTdsr4P2bBBHGZwKFemEfq8gIGyIQCxalYfZW/T2ORbtQx5rU69o+WycP3exY/7T1hGA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.10.4",
+        "classnames": "^2.2.5",
+        "json2mq": "^0.2.0",
+        "resize-observer-polyfill": "^1.5.1",
+        "throttle-debounce": "^5.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0"
+      }
+    },
     "node_modules/@babel/code-frame": {
       "version": "7.26.2",
       "resolved": "https://registry.npmmirror.com/@babel/code-frame/-/code-frame-7.26.2.tgz",
@@ -666,6 +773,12 @@
       "integrity": "sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g==",
       "dev": true
     },
+    "node_modules/@emotion/unitless": {
+      "version": "0.7.5",
+      "resolved": "https://registry.npmmirror.com/@emotion/unitless/-/unitless-0.7.5.tgz",
+      "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==",
+      "license": "MIT"
+    },
     "node_modules/@esbuild/aix-ppc64": {
       "version": "0.25.1",
       "resolved": "https://registry.npmmirror.com/@esbuild/aix-ppc64/-/aix-ppc64-0.25.1.tgz",
@@ -1569,6 +1682,155 @@
         "node": ">=14"
       }
     },
+    "node_modules/@rc-component/async-validator": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmmirror.com/@rc-component/async-validator/-/async-validator-5.0.4.tgz",
+      "integrity": "sha512-qgGdcVIF604M9EqjNF0hbUTz42bz/RDtxWdWuU5EQe3hi7M8ob54B6B35rOsvX5eSvIHIzT9iH1R3n+hk3CGfg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.24.4"
+      },
+      "engines": {
+        "node": ">=14.x"
+      }
+    },
+    "node_modules/@rc-component/color-picker": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/@rc-component/color-picker/-/color-picker-2.0.1.tgz",
+      "integrity": "sha512-WcZYwAThV/b2GISQ8F+7650r5ZZJ043E57aVBFkQ+kSY4C6wdofXgB0hBx+GPGpIU0Z81eETNoDUJMr7oy/P8Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@ant-design/fast-color": "^2.0.6",
+        "@babel/runtime": "^7.23.6",
+        "classnames": "^2.2.6",
+        "rc-util": "^5.38.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/@rc-component/context": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmmirror.com/@rc-component/context/-/context-1.4.0.tgz",
+      "integrity": "sha512-kFcNxg9oLRMoL3qki0OMxK+7g5mypjgaaJp/pkOis/6rVxma9nJBF/8kCIuTYHUQNr0ii7MxqE33wirPZLJQ2w==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.10.1",
+        "rc-util": "^5.27.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/@rc-component/mini-decimal": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/@rc-component/mini-decimal/-/mini-decimal-1.1.0.tgz",
+      "integrity": "sha512-jS4E7T9Li2GuYwI6PyiVXmxTiM6b07rlD9Ge8uGZSCz3WlzcG5ZK7g5bbuKNeZ9pgUuPK/5guV781ujdVpm4HQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.18.0"
+      },
+      "engines": {
+        "node": ">=8.x"
+      }
+    },
+    "node_modules/@rc-component/mutate-observer": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/@rc-component/mutate-observer/-/mutate-observer-1.1.0.tgz",
+      "integrity": "sha512-QjrOsDXQusNwGZPf4/qRQasg7UFEj06XiCJ8iuiq/Io7CrHrgVi6Uuetw60WAMG1799v+aM8kyc+1L/GBbHSlw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.18.0",
+        "classnames": "^2.3.2",
+        "rc-util": "^5.24.4"
+      },
+      "engines": {
+        "node": ">=8.x"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/@rc-component/portal": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmmirror.com/@rc-component/portal/-/portal-1.1.2.tgz",
+      "integrity": "sha512-6f813C0IsasTZms08kfA8kPAGxbbkYToa8ALaiDIGGECU4i9hj8Plgbx0sNJDrey3EtHO30hmdaxtT0138xZcg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.18.0",
+        "classnames": "^2.3.2",
+        "rc-util": "^5.24.4"
+      },
+      "engines": {
+        "node": ">=8.x"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/@rc-component/qrcode": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/@rc-component/qrcode/-/qrcode-1.0.0.tgz",
+      "integrity": "sha512-L+rZ4HXP2sJ1gHMGHjsg9jlYBX/SLN2D6OxP9Zn3qgtpMWtO2vUfxVFwiogHpAIqs54FnALxraUy/BCO1yRIgg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.24.7",
+        "classnames": "^2.3.2",
+        "rc-util": "^5.38.0"
+      },
+      "engines": {
+        "node": ">=8.x"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/@rc-component/tour": {
+      "version": "1.15.1",
+      "resolved": "https://registry.npmmirror.com/@rc-component/tour/-/tour-1.15.1.tgz",
+      "integrity": "sha512-Tr2t7J1DKZUpfJuDZWHxyxWpfmj8EZrqSgyMZ+BCdvKZ6r1UDsfU46M/iWAAFBy961Ssfom2kv5f3UcjIL2CmQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.18.0",
+        "@rc-component/portal": "^1.0.0-9",
+        "@rc-component/trigger": "^2.0.0",
+        "classnames": "^2.3.2",
+        "rc-util": "^5.24.4"
+      },
+      "engines": {
+        "node": ">=8.x"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/@rc-component/trigger": {
+      "version": "2.2.6",
+      "resolved": "https://registry.npmmirror.com/@rc-component/trigger/-/trigger-2.2.6.tgz",
+      "integrity": "sha512-/9zuTnWwhQ3S3WT1T8BubuFTT46kvnXgaERR9f4BTKyn61/wpf/BvbImzYBubzJibU707FxwbKszLlHjcLiv1Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.23.2",
+        "@rc-component/portal": "^1.1.0",
+        "classnames": "^2.3.2",
+        "rc-motion": "^2.0.0",
+        "rc-resize-observer": "^1.3.1",
+        "rc-util": "^5.44.0"
+      },
+      "engines": {
+        "node": ">=8.x"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
     "node_modules/@react-pdf-viewer/core": {
       "version": "3.12.0",
       "resolved": "https://registry.npmmirror.com/@react-pdf-viewer/core/-/core-3.12.0.tgz",
@@ -4309,6 +4571,29 @@
         "node": ">=8"
       }
     },
+    "node_modules/ahooks": {
+      "version": "3.8.5",
+      "resolved": "https://registry.npmmirror.com/ahooks/-/ahooks-3.8.5.tgz",
+      "integrity": "sha512-Y+MLoJpBXVdjsnnBjE5rOSPkQ4DK+8i5aPDzLJdIOsCpo/fiAeXcBY1Y7oWgtOK0TpOz0gFa/XcyO1UGdoqLcw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.21.0",
+        "dayjs": "^1.9.1",
+        "intersection-observer": "^0.12.0",
+        "js-cookie": "^3.0.5",
+        "lodash": "^4.17.21",
+        "react-fast-compare": "^3.2.2",
+        "resize-observer-polyfill": "^1.5.1",
+        "screenfull": "^5.0.0",
+        "tslib": "^2.4.1"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/ajv": {
       "version": "6.12.6",
       "resolved": "https://registry.npmmirror.com/ajv/-/ajv-6.12.6.tgz",
@@ -4395,6 +4680,71 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
+    "node_modules/antd": {
+      "version": "5.25.4",
+      "resolved": "https://registry.npmmirror.com/antd/-/antd-5.25.4.tgz",
+      "integrity": "sha512-yXdWqq1NJSZnD1HoPZWnWuQJGVYYnB3h0Ufsz4sbt3T0N9SdJ4G9GPpLMk8Gn9zWtwBekfR4THPVZ9uzAyhBHQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@ant-design/colors": "^7.2.1",
+        "@ant-design/cssinjs": "^1.23.0",
+        "@ant-design/cssinjs-utils": "^1.1.3",
+        "@ant-design/fast-color": "^2.0.6",
+        "@ant-design/icons": "^5.6.1",
+        "@ant-design/react-slick": "~1.1.2",
+        "@babel/runtime": "^7.26.0",
+        "@rc-component/color-picker": "~2.0.1",
+        "@rc-component/mutate-observer": "^1.1.0",
+        "@rc-component/qrcode": "~1.0.0",
+        "@rc-component/tour": "~1.15.1",
+        "@rc-component/trigger": "^2.2.6",
+        "classnames": "^2.5.1",
+        "copy-to-clipboard": "^3.3.3",
+        "dayjs": "^1.11.11",
+        "rc-cascader": "~3.34.0",
+        "rc-checkbox": "~3.5.0",
+        "rc-collapse": "~3.9.0",
+        "rc-dialog": "~9.6.0",
+        "rc-drawer": "~7.3.0",
+        "rc-dropdown": "~4.2.1",
+        "rc-field-form": "~2.7.0",
+        "rc-image": "~7.12.0",
+        "rc-input": "~1.8.0",
+        "rc-input-number": "~9.5.0",
+        "rc-mentions": "~2.20.0",
+        "rc-menu": "~9.16.1",
+        "rc-motion": "^2.9.5",
+        "rc-notification": "~5.6.4",
+        "rc-pagination": "~5.1.0",
+        "rc-picker": "~4.11.3",
+        "rc-progress": "~4.0.0",
+        "rc-rate": "~2.13.1",
+        "rc-resize-observer": "^1.4.3",
+        "rc-segmented": "~2.7.0",
+        "rc-select": "~14.16.8",
+        "rc-slider": "~11.1.8",
+        "rc-steps": "~6.0.1",
+        "rc-switch": "~4.1.0",
+        "rc-table": "~7.50.5",
+        "rc-tabs": "~15.6.1",
+        "rc-textarea": "~1.10.0",
+        "rc-tooltip": "~6.4.0",
+        "rc-tree": "~5.13.1",
+        "rc-tree-select": "~5.27.0",
+        "rc-upload": "~4.9.2",
+        "rc-util": "^5.44.4",
+        "scroll-into-view-if-needed": "^3.1.0",
+        "throttle-debounce": "^5.0.2"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/ant-design"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
     "node_modules/any-promise": {
       "version": "1.3.0",
       "resolved": "https://registry.npmmirror.com/any-promise/-/any-promise-1.3.0.tgz",
@@ -5191,6 +5541,12 @@
         "node": ">=6.0"
       }
     },
+    "node_modules/classnames": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmmirror.com/classnames/-/classnames-2.5.1.tgz",
+      "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==",
+      "license": "MIT"
+    },
     "node_modules/clean-stack": {
       "version": "2.2.0",
       "resolved": "https://registry.npmmirror.com/clean-stack/-/clean-stack-2.2.0.tgz",
@@ -5346,6 +5702,12 @@
       "resolved": "https://registry.npmmirror.com/ms/-/ms-2.0.0.tgz",
       "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
     },
+    "node_modules/compute-scroll-into-view": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmmirror.com/compute-scroll-into-view/-/compute-scroll-into-view-3.1.1.tgz",
+      "integrity": "sha512-VRhuHOLoKYOy4UbilLbUzbYg93XLjv2PncJC50EuTWPA3gaja1UjBsUP/D/9/juV3vQFr6XBEzn9KCAHdUvOHw==",
+      "license": "MIT"
+    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmmirror.com/concat-map/-/concat-map-0.0.1.tgz",
@@ -5405,6 +5767,15 @@
         "node": ">=6.6.0"
       }
     },
+    "node_modules/copy-to-clipboard": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmmirror.com/copy-to-clipboard/-/copy-to-clipboard-3.3.3.tgz",
+      "integrity": "sha512-2KV8NhB5JqC3ky0r9PMCAZKbUHSwtEo4CwCs0KXgruG43gX5PMqDEBbVU4OUzw2MuAWUfsuFmWvEKG5QRfSnJA==",
+      "license": "MIT",
+      "dependencies": {
+        "toggle-selection": "^1.0.6"
+      }
+    },
     "node_modules/core-util-is": {
       "version": "1.0.3",
       "resolved": "https://registry.npmmirror.com/core-util-is/-/core-util-is-1.0.3.tgz",
@@ -5471,8 +5842,7 @@
     "node_modules/csstype": {
       "version": "3.1.3",
       "resolved": "https://registry.npmmirror.com/csstype/-/csstype-3.1.3.tgz",
-      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "devOptional": true
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
     },
     "node_modules/damerau-levenshtein": {
       "version": "1.0.8",
@@ -7896,6 +8266,16 @@
       "resolved": "https://registry.npmmirror.com/immediate/-/immediate-3.0.6.tgz",
       "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ=="
     },
+    "node_modules/immer": {
+      "version": "10.1.1",
+      "resolved": "https://registry.npmmirror.com/immer/-/immer-10.1.1.tgz",
+      "integrity": "sha512-s2MPrmjovJcoMaHtx6K11Ra7oD05NT97w1IC5zpMkT6Atjr7H8LjaDd81iIxUYpMKSRRNMJE703M1Fhr/TctHw==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/immer"
+      }
+    },
     "node_modules/import-fresh": {
       "version": "3.3.1",
       "resolved": "https://registry.npmmirror.com/import-fresh/-/import-fresh-3.3.1.tgz",
@@ -7966,6 +8346,12 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/intersection-observer": {
+      "version": "0.12.2",
+      "resolved": "https://registry.npmmirror.com/intersection-observer/-/intersection-observer-0.12.2.tgz",
+      "integrity": "sha512-7m1vEcPCxXYI8HqnL8CKI6siDyD+eIWSwgB3DZA+ZTogxk9I4CDnj4wilt9x/+/QbHI4YG5YZNmC6458/e9Ktg==",
+      "license": "Apache-2.0"
+    },
     "node_modules/ipaddr.js": {
       "version": "1.9.1",
       "resolved": "https://registry.npmmirror.com/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
@@ -8606,6 +8992,15 @@
         "jiti": "bin/jiti.js"
       }
     },
+    "node_modules/js-cookie": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmmirror.com/js-cookie/-/js-cookie-3.0.5.tgz",
+      "integrity": "sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmmirror.com/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -8661,6 +9056,15 @@
       "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
       "dev": true
     },
+    "node_modules/json2mq": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmmirror.com/json2mq/-/json2mq-0.2.0.tgz",
+      "integrity": "sha512-SzoRg7ux5DWTII9J2qkrZrqV1gt+rTaoufMxEzXbS26Uid0NwaJd123HcoB80TgubEppxxIGdNxCx50fEoEWQA==",
+      "license": "MIT",
+      "dependencies": {
+        "string-convert": "^0.2.0"
+      }
+    },
     "node_modules/json5": {
       "version": "2.2.3",
       "resolved": "https://registry.npmmirror.com/json5/-/json5-2.2.3.tgz",
@@ -8876,8 +9280,7 @@
     "node_modules/lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
-      "dev": true
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
     "node_modules/lodash._arraycopy": {
       "version": "3.0.0",
@@ -11722,6 +12125,618 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/rc-cascader": {
+      "version": "3.34.0",
+      "resolved": "https://registry.npmmirror.com/rc-cascader/-/rc-cascader-3.34.0.tgz",
+      "integrity": "sha512-KpXypcvju9ptjW9FaN2NFcA2QH9E9LHKq169Y0eWtH4e/wHQ5Wh5qZakAgvb8EKZ736WZ3B0zLLOBsrsja5Dag==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.25.7",
+        "classnames": "^2.3.1",
+        "rc-select": "~14.16.2",
+        "rc-tree": "~5.13.0",
+        "rc-util": "^5.43.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-checkbox": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmmirror.com/rc-checkbox/-/rc-checkbox-3.5.0.tgz",
+      "integrity": "sha512-aOAQc3E98HteIIsSqm6Xk2FPKIER6+5vyEFMZfo73TqM+VVAIqOkHoPjgKLqSNtVLWScoaM7vY2ZrGEheI79yg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.10.1",
+        "classnames": "^2.3.2",
+        "rc-util": "^5.25.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-collapse": {
+      "version": "3.9.0",
+      "resolved": "https://registry.npmmirror.com/rc-collapse/-/rc-collapse-3.9.0.tgz",
+      "integrity": "sha512-swDdz4QZ4dFTo4RAUMLL50qP0EY62N2kvmk2We5xYdRwcRn8WcYtuetCJpwpaCbUfUt5+huLpVxhvmnK+PHrkA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.10.1",
+        "classnames": "2.x",
+        "rc-motion": "^2.3.4",
+        "rc-util": "^5.27.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-dialog": {
+      "version": "9.6.0",
+      "resolved": "https://registry.npmmirror.com/rc-dialog/-/rc-dialog-9.6.0.tgz",
+      "integrity": "sha512-ApoVi9Z8PaCQg6FsUzS8yvBEQy0ZL2PkuvAgrmohPkN3okps5WZ5WQWPc1RNuiOKaAYv8B97ACdsFU5LizzCqg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.10.1",
+        "@rc-component/portal": "^1.0.0-8",
+        "classnames": "^2.2.6",
+        "rc-motion": "^2.3.0",
+        "rc-util": "^5.21.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-drawer": {
+      "version": "7.3.0",
+      "resolved": "https://registry.npmmirror.com/rc-drawer/-/rc-drawer-7.3.0.tgz",
+      "integrity": "sha512-DX6CIgiBWNpJIMGFO8BAISFkxiuKitoizooj4BDyee8/SnBn0zwO2FHrNDpqqepj0E/TFTDpmEBCyFuTgC7MOg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9",
+        "@rc-component/portal": "^1.1.1",
+        "classnames": "^2.2.6",
+        "rc-motion": "^2.6.1",
+        "rc-util": "^5.38.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-dropdown": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmmirror.com/rc-dropdown/-/rc-dropdown-4.2.1.tgz",
+      "integrity": "sha512-YDAlXsPv3I1n42dv1JpdM7wJ+gSUBfeyPK59ZpBD9jQhK9jVuxpjj3NmWQHOBceA1zEPVX84T2wbdb2SD0UjmA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.18.3",
+        "@rc-component/trigger": "^2.0.0",
+        "classnames": "^2.2.6",
+        "rc-util": "^5.44.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.11.0",
+        "react-dom": ">=16.11.0"
+      }
+    },
+    "node_modules/rc-field-form": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmmirror.com/rc-field-form/-/rc-field-form-2.7.0.tgz",
+      "integrity": "sha512-hgKsCay2taxzVnBPZl+1n4ZondsV78G++XVsMIJCAoioMjlMQR9YwAp7JZDIECzIu2Z66R+f4SFIRrO2DjDNAA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.18.0",
+        "@rc-component/async-validator": "^5.0.3",
+        "rc-util": "^5.32.2"
+      },
+      "engines": {
+        "node": ">=8.x"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-image": {
+      "version": "7.12.0",
+      "resolved": "https://registry.npmmirror.com/rc-image/-/rc-image-7.12.0.tgz",
+      "integrity": "sha512-cZ3HTyyckPnNnUb9/DRqduqzLfrQRyi+CdHjdqgsyDpI3Ln5UX1kXnAhPBSJj9pVRzwRFgqkN7p9b6HBDjmu/Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.11.2",
+        "@rc-component/portal": "^1.0.2",
+        "classnames": "^2.2.6",
+        "rc-dialog": "~9.6.0",
+        "rc-motion": "^2.6.2",
+        "rc-util": "^5.34.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-input": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmmirror.com/rc-input/-/rc-input-1.8.0.tgz",
+      "integrity": "sha512-KXvaTbX+7ha8a/k+eg6SYRVERK0NddX8QX7a7AnRvUa/rEH0CNMlpcBzBkhI0wp2C8C4HlMoYl8TImSN+fuHKA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.11.1",
+        "classnames": "^2.2.1",
+        "rc-util": "^5.18.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.0.0",
+        "react-dom": ">=16.0.0"
+      }
+    },
+    "node_modules/rc-input-number": {
+      "version": "9.5.0",
+      "resolved": "https://registry.npmmirror.com/rc-input-number/-/rc-input-number-9.5.0.tgz",
+      "integrity": "sha512-bKaEvB5tHebUURAEXw35LDcnRZLq3x1k7GxfAqBMzmpHkDGzjAtnUL8y4y5N15rIFIg5IJgwr211jInl3cipag==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.10.1",
+        "@rc-component/mini-decimal": "^1.0.1",
+        "classnames": "^2.2.5",
+        "rc-input": "~1.8.0",
+        "rc-util": "^5.40.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-mentions": {
+      "version": "2.20.0",
+      "resolved": "https://registry.npmmirror.com/rc-mentions/-/rc-mentions-2.20.0.tgz",
+      "integrity": "sha512-w8HCMZEh3f0nR8ZEd466ATqmXFCMGMN5UFCzEUL0bM/nGw/wOS2GgRzKBcm19K++jDyuWCOJOdgcKGXU3fXfbQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.22.5",
+        "@rc-component/trigger": "^2.0.0",
+        "classnames": "^2.2.6",
+        "rc-input": "~1.8.0",
+        "rc-menu": "~9.16.0",
+        "rc-textarea": "~1.10.0",
+        "rc-util": "^5.34.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-menu": {
+      "version": "9.16.1",
+      "resolved": "https://registry.npmmirror.com/rc-menu/-/rc-menu-9.16.1.tgz",
+      "integrity": "sha512-ghHx6/6Dvp+fw8CJhDUHFHDJ84hJE3BXNCzSgLdmNiFErWSOaZNsihDAsKq9ByTALo/xkNIwtDFGIl6r+RPXBg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.10.1",
+        "@rc-component/trigger": "^2.0.0",
+        "classnames": "2.x",
+        "rc-motion": "^2.4.3",
+        "rc-overflow": "^1.3.1",
+        "rc-util": "^5.27.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-motion": {
+      "version": "2.9.5",
+      "resolved": "https://registry.npmmirror.com/rc-motion/-/rc-motion-2.9.5.tgz",
+      "integrity": "sha512-w+XTUrfh7ArbYEd2582uDrEhmBHwK1ZENJiSJVb7uRxdE7qJSYjbO2eksRXmndqyKqKoYPc9ClpPh5242mV1vA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.11.1",
+        "classnames": "^2.2.1",
+        "rc-util": "^5.44.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-notification": {
+      "version": "5.6.4",
+      "resolved": "https://registry.npmmirror.com/rc-notification/-/rc-notification-5.6.4.tgz",
+      "integrity": "sha512-KcS4O6B4qzM3KH7lkwOB7ooLPZ4b6J+VMmQgT51VZCeEcmghdeR4IrMcFq0LG+RPdnbe/ArT086tGM8Snimgiw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.10.1",
+        "classnames": "2.x",
+        "rc-motion": "^2.9.0",
+        "rc-util": "^5.20.1"
+      },
+      "engines": {
+        "node": ">=8.x"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-overflow": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmmirror.com/rc-overflow/-/rc-overflow-1.4.1.tgz",
+      "integrity": "sha512-3MoPQQPV1uKyOMVNd6SZfONi+f3st0r8PksexIdBTeIYbMX0Jr+k7pHEDvsXtR4BpCv90/Pv2MovVNhktKrwvw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.11.1",
+        "classnames": "^2.2.1",
+        "rc-resize-observer": "^1.0.0",
+        "rc-util": "^5.37.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-pagination": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmmirror.com/rc-pagination/-/rc-pagination-5.1.0.tgz",
+      "integrity": "sha512-8416Yip/+eclTFdHXLKTxZvn70duYVGTvUUWbckCCZoIl3jagqke3GLsFrMs0bsQBikiYpZLD9206Ej4SOdOXQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.10.1",
+        "classnames": "^2.3.2",
+        "rc-util": "^5.38.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-picker": {
+      "version": "4.11.3",
+      "resolved": "https://registry.npmmirror.com/rc-picker/-/rc-picker-4.11.3.tgz",
+      "integrity": "sha512-MJ5teb7FlNE0NFHTncxXQ62Y5lytq6sh5nUw0iH8OkHL/TjARSEvSHpr940pWgjGANpjCwyMdvsEV55l5tYNSg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.24.7",
+        "@rc-component/trigger": "^2.0.0",
+        "classnames": "^2.2.1",
+        "rc-overflow": "^1.3.2",
+        "rc-resize-observer": "^1.4.0",
+        "rc-util": "^5.43.0"
+      },
+      "engines": {
+        "node": ">=8.x"
+      },
+      "peerDependencies": {
+        "date-fns": ">= 2.x",
+        "dayjs": ">= 1.x",
+        "luxon": ">= 3.x",
+        "moment": ">= 2.x",
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      },
+      "peerDependenciesMeta": {
+        "date-fns": {
+          "optional": true
+        },
+        "dayjs": {
+          "optional": true
+        },
+        "luxon": {
+          "optional": true
+        },
+        "moment": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/rc-progress": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/rc-progress/-/rc-progress-4.0.0.tgz",
+      "integrity": "sha512-oofVMMafOCokIUIBnZLNcOZFsABaUw8PPrf1/y0ZBvKZNpOiu5h4AO9vv11Sw0p4Hb3D0yGWuEattcQGtNJ/aw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.10.1",
+        "classnames": "^2.2.6",
+        "rc-util": "^5.16.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-rate": {
+      "version": "2.13.1",
+      "resolved": "https://registry.npmmirror.com/rc-rate/-/rc-rate-2.13.1.tgz",
+      "integrity": "sha512-QUhQ9ivQ8Gy7mtMZPAjLbxBt5y9GRp65VcUyGUMF3N3fhiftivPHdpuDIaWIMOTEprAjZPC08bls1dQB+I1F2Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.10.1",
+        "classnames": "^2.2.5",
+        "rc-util": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8.x"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-resize-observer": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmmirror.com/rc-resize-observer/-/rc-resize-observer-1.4.3.tgz",
+      "integrity": "sha512-YZLjUbyIWox8E9i9C3Tm7ia+W7euPItNWSPX5sCcQTYbnwDb5uNpnLHQCG1f22oZWUhLw4Mv2tFmeWe68CDQRQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.20.7",
+        "classnames": "^2.2.1",
+        "rc-util": "^5.44.1",
+        "resize-observer-polyfill": "^1.5.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-segmented": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmmirror.com/rc-segmented/-/rc-segmented-2.7.0.tgz",
+      "integrity": "sha512-liijAjXz+KnTRVnxxXG2sYDGd6iLL7VpGGdR8gwoxAXy2KglviKCxLWZdjKYJzYzGSUwKDSTdYk8brj54Bn5BA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.11.1",
+        "classnames": "^2.2.1",
+        "rc-motion": "^2.4.4",
+        "rc-util": "^5.17.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.0.0",
+        "react-dom": ">=16.0.0"
+      }
+    },
+    "node_modules/rc-select": {
+      "version": "14.16.8",
+      "resolved": "https://registry.npmmirror.com/rc-select/-/rc-select-14.16.8.tgz",
+      "integrity": "sha512-NOV5BZa1wZrsdkKaiK7LHRuo5ZjZYMDxPP6/1+09+FB4KoNi8jcG1ZqLE3AVCxEsYMBe65OBx71wFoHRTP3LRg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.10.1",
+        "@rc-component/trigger": "^2.1.1",
+        "classnames": "2.x",
+        "rc-motion": "^2.0.1",
+        "rc-overflow": "^1.3.1",
+        "rc-util": "^5.16.1",
+        "rc-virtual-list": "^3.5.2"
+      },
+      "engines": {
+        "node": ">=8.x"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-dom": "*"
+      }
+    },
+    "node_modules/rc-slider": {
+      "version": "11.1.8",
+      "resolved": "https://registry.npmmirror.com/rc-slider/-/rc-slider-11.1.8.tgz",
+      "integrity": "sha512-2gg/72YFSpKP+Ja5AjC5DPL1YnV8DEITDQrcc1eASrUYjl0esptaBVJBh5nLTXCCp15eD8EuGjwezVGSHhs9tQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.10.1",
+        "classnames": "^2.2.5",
+        "rc-util": "^5.36.0"
+      },
+      "engines": {
+        "node": ">=8.x"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-steps": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmmirror.com/rc-steps/-/rc-steps-6.0.1.tgz",
+      "integrity": "sha512-lKHL+Sny0SeHkQKKDJlAjV5oZ8DwCdS2hFhAkIjuQt1/pB81M0cA0ErVFdHq9+jmPmFw1vJB2F5NBzFXLJxV+g==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.16.7",
+        "classnames": "^2.2.3",
+        "rc-util": "^5.16.1"
+      },
+      "engines": {
+        "node": ">=8.x"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-switch": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmmirror.com/rc-switch/-/rc-switch-4.1.0.tgz",
+      "integrity": "sha512-TI8ufP2Az9oEbvyCeVE4+90PDSljGyuwix3fV58p7HV2o4wBnVToEyomJRVyTaZeqNPAp+vqeo4Wnj5u0ZZQBg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.21.0",
+        "classnames": "^2.2.1",
+        "rc-util": "^5.30.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-table": {
+      "version": "7.50.5",
+      "resolved": "https://registry.npmmirror.com/rc-table/-/rc-table-7.50.5.tgz",
+      "integrity": "sha512-FDZu8aolhSYd3v9KOc3lZOVAU77wmRRu44R0Wfb8Oj1dXRUsloFaXMSl6f7yuWZUxArJTli7k8TEOX2mvhDl4A==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.10.1",
+        "@rc-component/context": "^1.4.0",
+        "classnames": "^2.2.5",
+        "rc-resize-observer": "^1.1.0",
+        "rc-util": "^5.44.3",
+        "rc-virtual-list": "^3.14.2"
+      },
+      "engines": {
+        "node": ">=8.x"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-tabs": {
+      "version": "15.6.1",
+      "resolved": "https://registry.npmmirror.com/rc-tabs/-/rc-tabs-15.6.1.tgz",
+      "integrity": "sha512-/HzDV1VqOsUWyuC0c6AkxVYFjvx9+rFPKZ32ejxX0Uc7QCzcEjTA9/xMgv4HemPKwzBNX8KhGVbbumDjnj92aA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.11.2",
+        "classnames": "2.x",
+        "rc-dropdown": "~4.2.0",
+        "rc-menu": "~9.16.0",
+        "rc-motion": "^2.6.2",
+        "rc-resize-observer": "^1.0.0",
+        "rc-util": "^5.34.1"
+      },
+      "engines": {
+        "node": ">=8.x"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-textarea": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmmirror.com/rc-textarea/-/rc-textarea-1.10.0.tgz",
+      "integrity": "sha512-ai9IkanNuyBS4x6sOL8qu/Ld40e6cEs6pgk93R+XLYg0mDSjNBGey6/ZpDs5+gNLD7urQ14po3V6Ck2dJLt9SA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.10.1",
+        "classnames": "^2.2.1",
+        "rc-input": "~1.8.0",
+        "rc-resize-observer": "^1.0.0",
+        "rc-util": "^5.27.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-tooltip": {
+      "version": "6.4.0",
+      "resolved": "https://registry.npmmirror.com/rc-tooltip/-/rc-tooltip-6.4.0.tgz",
+      "integrity": "sha512-kqyivim5cp8I5RkHmpsp1Nn/Wk+1oeloMv9c7LXNgDxUpGm+RbXJGL+OPvDlcRnx9DBeOe4wyOIl4OKUERyH1g==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.11.2",
+        "@rc-component/trigger": "^2.0.0",
+        "classnames": "^2.3.1",
+        "rc-util": "^5.44.3"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-tree": {
+      "version": "5.13.1",
+      "resolved": "https://registry.npmmirror.com/rc-tree/-/rc-tree-5.13.1.tgz",
+      "integrity": "sha512-FNhIefhftobCdUJshO7M8uZTA9F4OPGVXqGfZkkD/5soDeOhwO06T/aKTrg0WD8gRg/pyfq+ql3aMymLHCTC4A==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.10.1",
+        "classnames": "2.x",
+        "rc-motion": "^2.0.1",
+        "rc-util": "^5.16.1",
+        "rc-virtual-list": "^3.5.1"
+      },
+      "engines": {
+        "node": ">=10.x"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-dom": "*"
+      }
+    },
+    "node_modules/rc-tree-select": {
+      "version": "5.27.0",
+      "resolved": "https://registry.npmmirror.com/rc-tree-select/-/rc-tree-select-5.27.0.tgz",
+      "integrity": "sha512-2qTBTzwIT7LRI1o7zLyrCzmo5tQanmyGbSaGTIf7sYimCklAToVVfpMC6OAldSKolcnjorBYPNSKQqJmN3TCww==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.25.7",
+        "classnames": "2.x",
+        "rc-select": "~14.16.2",
+        "rc-tree": "~5.13.0",
+        "rc-util": "^5.43.0"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-dom": "*"
+      }
+    },
+    "node_modules/rc-upload": {
+      "version": "4.9.2",
+      "resolved": "https://registry.npmmirror.com/rc-upload/-/rc-upload-4.9.2.tgz",
+      "integrity": "sha512-nHx+9rbd1FKMiMRYsqQ3NkXUv7COHPBo3X1Obwq9SWS6/diF/A0aJ5OHubvwUAIDs+4RMleljV0pcrNUc823GQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.18.3",
+        "classnames": "^2.2.5",
+        "rc-util": "^5.2.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-util": {
+      "version": "5.44.4",
+      "resolved": "https://registry.npmmirror.com/rc-util/-/rc-util-5.44.4.tgz",
+      "integrity": "sha512-resueRJzmHG9Q6rI/DfK6Kdv9/Lfls05vzMs1Sk3M2P+3cJa+MakaZyWY8IPfehVuhPJFKrIY1IK4GqbiaiY5w==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.18.3",
+        "react-is": "^18.2.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-util/node_modules/react-is": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmmirror.com/react-is/-/react-is-18.3.1.tgz",
+      "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
+      "license": "MIT"
+    },
+    "node_modules/rc-virtual-list": {
+      "version": "3.18.6",
+      "resolved": "https://registry.npmmirror.com/rc-virtual-list/-/rc-virtual-list-3.18.6.tgz",
+      "integrity": "sha512-TQ5SsutL3McvWmmxqQtMIbfeoE3dGjJrRSfKekgby7WQMpPIFvv4ghytp5Z0s3D8Nik9i9YNOCqHBfk86AwgAA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.20.0",
+        "classnames": "^2.2.6",
+        "rc-resize-observer": "^1.0.0",
+        "rc-util": "^5.36.0"
+      },
+      "engines": {
+        "node": ">=8.x"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
     "node_modules/react": {
       "version": "18.3.1",
       "resolved": "https://registry.npmmirror.com/react/-/react-18.3.1.tgz",
@@ -11745,6 +12760,12 @@
         "react": "^18.3.1"
       }
     },
+    "node_modules/react-fast-compare": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmmirror.com/react-fast-compare/-/react-fast-compare-3.2.2.tgz",
+      "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==",
+      "license": "MIT"
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmmirror.com/react-is/-/react-is-16.13.1.tgz",
@@ -12016,6 +13037,12 @@
         "node": "*"
       }
     },
+    "node_modules/resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmmirror.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==",
+      "license": "MIT"
+    },
     "node_modules/resolve": {
       "version": "1.22.10",
       "resolved": "https://registry.npmmirror.com/resolve/-/resolve-1.22.10.tgz",
@@ -12350,6 +13377,27 @@
         "url": "https://opencollective.com/webpack"
       }
     },
+    "node_modules/screenfull": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmmirror.com/screenfull/-/screenfull-5.2.0.tgz",
+      "integrity": "sha512-9BakfsO2aUQN2K9Fdbj87RJIEZ82Q9IGim7FqM5OsebfoFC6ZHXgDq/KvniuLTPdeM8wY2o6Dj3WQ7KeQCj3cA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/scroll-into-view-if-needed": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmmirror.com/scroll-into-view-if-needed/-/scroll-into-view-if-needed-3.1.0.tgz",
+      "integrity": "sha512-49oNpRjWRvnU8NyGVmUaYG4jtTkNonFZI86MmGRDqBphEK2EXT9gdEUoQPZhuBM8yWHxCWbobltqYO5M4XrUvQ==",
+      "license": "MIT",
+      "dependencies": {
+        "compute-scroll-into-view": "^3.0.2"
+      }
+    },
     "node_modules/semver": {
       "version": "7.7.1",
       "resolved": "https://registry.npmmirror.com/semver/-/semver-7.7.1.tgz",
@@ -12765,6 +13813,12 @@
         "safe-buffer": "~5.2.0"
       }
     },
+    "node_modules/string-convert": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmmirror.com/string-convert/-/string-convert-0.2.1.tgz",
+      "integrity": "sha512-u/1tdPl4yQnPBjnVrmdLo9gtuLvELKsAoRapekWggdiQNvvvum+jYF329d84NAa660KQw7pB2n36KrIKVoXa3A==",
+      "license": "MIT"
+    },
     "node_modules/string-hash": {
       "version": "1.1.3",
       "resolved": "https://registry.npmmirror.com/string-hash/-/string-hash-1.1.3.tgz",
@@ -13026,6 +14080,12 @@
         "inline-style-parser": "0.1.1"
       }
     },
+    "node_modules/stylis": {
+      "version": "4.3.6",
+      "resolved": "https://registry.npmmirror.com/stylis/-/stylis-4.3.6.tgz",
+      "integrity": "sha512-yQ3rwFWRfwNUY7H5vpU0wfdkNSnvnJinhF9830Swlaxl03zsOjCfmX0ugac+3LtK0lYSgwL/KXc8oYL3mG4YFQ==",
+      "license": "MIT"
+    },
     "node_modules/sucrase": {
       "version": "3.35.0",
       "resolved": "https://registry.npmmirror.com/sucrase/-/sucrase-3.35.0.tgz",
@@ -13381,6 +14441,15 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/throttle-debounce": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmmirror.com/throttle-debounce/-/throttle-debounce-5.0.2.tgz",
+      "integrity": "sha512-B71/4oyj61iNH0KeCamLuE2rmKuTO5byTOSVwECM5FA7TiAiAW+UqTKZ9ERueC4qvgSttUhdmq1mXC3kJqGX7A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.22"
+      }
+    },
     "node_modules/through2": {
       "version": "2.0.5",
       "resolved": "https://registry.npmmirror.com/through2/-/through2-2.0.5.tgz",
@@ -13490,6 +14559,12 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/toggle-selection": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmmirror.com/toggle-selection/-/toggle-selection-1.0.6.tgz",
+      "integrity": "sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ==",
+      "license": "MIT"
+    },
     "node_modules/toidentifier": {
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/toidentifier/-/toidentifier-1.0.1.tgz",
@@ -13585,9 +14660,7 @@
     "node_modules/tslib": {
       "version": "2.8.1",
       "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.8.1.tgz",
-      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
-      "dev": true,
-      "optional": true
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="
     },
     "node_modules/turbo-stream": {
       "version": "2.4.0",
@@ -13998,6 +15071,19 @@
         "node": ">= 0.4.0"
       }
     },
+    "node_modules/uuid": {
+      "version": "11.1.0",
+      "resolved": "https://registry.npmmirror.com/uuid/-/uuid-11.1.0.tgz",
+      "integrity": "sha512-0/A9rDy9P7cJ+8w1c9WD9V//9Wj15Ce2MPz8Ri6032usz+NfePxx5AcN3bN+r6ZL6jEo066/yNYB3tn4pQEx+A==",
+      "funding": [
+        "https://github.com/sponsors/broofa",
+        "https://github.com/sponsors/ctavan"
+      ],
+      "license": "MIT",
+      "bin": {
+        "uuid": "dist/esm/bin/uuid"
+      }
+    },
     "node_modules/uvu": {
       "version": "0.5.6",
       "resolved": "https://registry.npmmirror.com/uvu/-/uvu-0.5.6.tgz",
diff --git a/package.json b/package.json
index d78d032..f2c30ef 100644
--- a/package.json
+++ b/package.json
@@ -20,11 +20,14 @@
     "@remix-run/react": "^2.16.2",
     "@remix-run/serve": "^2.16.2",
     "@uiw/react-codemirror": "^4.23.10",
+    "ahooks": "^3.8.5",
+    "antd": "^5.25.4",
     "axios": "^1.9.0",
     "dayjs": "^1.11.13",
     "diff": "^7.0.0",
     "docx-preview": "^0.3.5",
     "html-docx-js": "^0.3.1",
+    "immer": "^10.1.1",
     "isbot": "^4.1.0",
     "jszip": "^3.10.1",
     "mammoth": "^1.9.0",
@@ -35,7 +38,8 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-pdf": "^5.7.2",
-    "remixicon": "^4.6.0"
+    "remixicon": "^4.6.0",
+    "uuid": "^11.1.0"
   },
   "devDependencies": {
     "@remix-run/dev": "^2.16.2",
diff --git a/vite.config.ts b/vite.config.ts
index b7cd2cd..0cd0d49 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -42,6 +42,6 @@ export default defineConfig({
     // 防止依赖预构建时触发页面刷新导致路由中断
     force: false,
     // 预构建这些依赖，避免首次加载时出现重新构建
-    include: ['react-pdf', 'pdfjs-dist','dayjs','@remix-run/node','react-dom','axios','dayjs/plugin/utc','react-router-dom','jszip'],
+    include: ['react-pdf', 'pdfjs-dist', 'dayjs', '@remix-run/node', 'react-dom', 'axios', 'dayjs/plugin/utc', 'react-router-dom', 'jszip', 'ahooks', 'antd', 'immer', '@ant-design/icons'],
   },
 });