import { json } from "@remix-run/node";
import { type MetaFunction } from "@remix-run/node";
import Chat from "~/components/dify-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";
// 导入测试文件用于调试
import "~/utils/dify-test.client";

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助手进行智能对话，获取专业的法务建议和文档分析"
        }
    ];
};

// 配置路由 handle，隐藏主布局的 sidebar（因为聊天页面有自己的 ChatSidebar）
export const handle = {
    hideSidebar: true
};

/**
 * 聊天主页面
 * 实现单页面应用模式，所有会话切换都在同一页面内完成
 * 
 * 调试说明：
 * - 打开浏览器开发者工具的控制台
 * - 输入 window.testDify() 可以测试Dify API连接
 * - 查看网络选项卡可以监控API请求
 */
export default function ChatWithLLMIndex() {
    return (
        <div className="chat-container" style={{
            height: '90vh', // 使用视口高度的90%
            borderRadius: '0.5rem',
            marginBottom: '-20px',
            marginTop: '2vh',
        }}>
            <Chat />
        </div>
    );
}