export const documentsTable = pgTable('documents', {
  // 知识片段唯一 ID
  id: integer().primaryKey().generatedAlwaysAsIdentity(),
 
  // 知识来源类型
  // 用于区分作者资料、文章、日记、项目等内容
  sourceType: varchar({ length: 50 }).notNull(),
 
  // 来源数据 ID
  // 对应业务系统中的文章、日记等数据 ID
  sourceId: varchar({ length: 200 }),
 
  // 知识标题
  // 例如：文章标题、日记标题、"关于我"等
  title: varchar({ length: 500 }),
 
  // AI 实际用于理解和回答的文本内容
  content: text().notNull(),
 
  // 当前内容属于第几个 chunk
  // 未进行切分的短内容可以使用 0
  chunkIndex: integer().notNull().default(0),
 
  // 文本的 embedding 向量
  // 维度必须与你使用的 Embedding 模型保持一致
  embedding: vector({ dimensions: 1024 }),
 
  // 创建时间
  createdTime: timestamp().notNull().defaultNow(),
 
  // 最后更新时间
  updatedTime: timestamp().notNull().defaultNow(),
});

CREATE EXTENSION IF NOT EXISTS vector;

npm i @langchain/textsplitters

import { RecursiveCharacterTextSplitter } from '@langchain/textsplitters';
 
const splitter = new RecursiveCharacterTextSplitter({
  chunkSize: 800,  // 每一块的字符数量
  chunkOverlap: 200,  // 每一块与上一块、下一块可能重叠的字符数量
  separators: ['\n\n', '\n', '。', '！', '？', '；', '，'],   // 参考这些符号进行分块
});
 
export const createDocuments = async (content: string) => {
  const documents = await splitter.createDocuments([content]);
  return documents;
};

import OpenAI from 'openai';
 
// 注意: 不同地域的base_url不通用（下方示例使用北京地域的base_url）
// - 华北2（北京）: https://{WorkspaceId}.cn-beijing.maas.aliyuncs.com/compatible-mode/v1，请将{WorkspaceId}替换为业务空间ID
// - 美国（弗吉尼亚）: https://dashscope-us.aliyuncs.com/compatible-mode/v1
// - 新加坡: https://{WorkspaceId}.ap-southeast-1.maas.aliyuncs.com/compatible-mode/v1，请将{WorkspaceId}替换为业务空间ID
// - 德国（法兰克福）: https://{WorkspaceId}.eu-central-1.maas.aliyuncs.com/compatible-mode/v1，请将{WorkspaceId}替换为业务空间ID
// - 日本（东京）: https://{WorkspaceId}.ap-northeast-1.maas.aliyuncs.com/compatible-mode/v1，请将{WorkspaceId}替换为业务空间ID
 
const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY,
  baseURL: 'https://llm-jlpw7z9g5oi082gg.cn-beijing.maas.aliyuncs.com/compatible-mode/v1',
});
 
export const generateEmbeddings = async (inputTexts: string[]) => {
  try {
    const completion = await openai.embeddings.create({
      model: 'text-embedding-v4',
      input: inputTexts,
    });
 
    return completion;
  } catch (error) {
    console.error('Error:', error);
  }
};

import { deepSeek } from '@ai-sdk/deepseek';
import {
  UIMessage,
  convertToModelMessages,
  createUIMessageStreamResponse,
  stepCountIs,
  streamText,
  toUIMessageStream,
  tool,
} from 'ai';
import { z } from 'zod';
 
import { searchDocuments } from '@/app/actions/documents';
 
export async function POST(req: Request) {
  const { messages }: { messages: UIMessage[] } = await req.json();
 
  const result = streamText({
    model: deepSeek('deepseek-v4-flash'),
    system: `
      你是这个个人博客的 AI 助手。
      请根据知识库回答用户的问题。
 
      规则：
      - 全程使用简体中文思考（reasoning / 思考过程也必须用简体中文，不要用英文）。
      - 优先使用知识库中的信息。
      - 知识库没有的信息不要编造。
      - 如果无法确定，明确告诉用户不知道。
      - 回答应该自然、简洁。
 
      特别处理：如果知识库中的'sourceType'为'article'或者'post'的话，需要针对标题和内容进行卡片式显示，卡片具有路由跳转功能，跳转链接通过'sourceId'跳转，即：<a href={sourceId}>{title}</a>。
    `,
    messages: await convertToModelMessages(messages),
    stopWhen: stepCountIs(3),   // 这里至少给3，以便agent能多次思考，将知识库的资料进行整理回答
    tools: {
      searchDocuments: tool({
        description: '搜索个人博客知识库，获取与用户问题相关的信息',
        inputSchema: z.object({
          query: z.string().describe('需要搜索的用户问题'),
        }),
        execute: async ({ query }) => {
          const documents = await searchDocuments(query);
          return (
            documents?.map((item) => ({
              title: item.title,
              sourceType: item.sourceType,
              content: item.content,
              sourceId: item.sourceId,
            })) ?? ''
          );
        },
      }),
    },
  });
 
  return createUIMessageStreamResponse({
    stream: toUIMessageStream({ stream: result.stream }),
  });
}

import { sql } from 'drizzle-orm';
 
import { db } from '@/db';
import { generateEmbeddings } from '@/lib/embedding';
 
export async function searchDocuments(query: string) {
  const embeddings = await generateEmbeddings([query]);
  if (!embeddings?.data) {
    return null;
  }
  const { embedding } = embeddings.data[0];
 
  const result = await db.execute(sql`
    SELECT
      *,
      1 - (embedding <=> ${JSON.stringify(embedding)}::vector) AS similarity
    FROM documents
    WHERE 1 - (embedding <=> ${JSON.stringify(embedding)}::vector) >= 0.35
    ORDER BY embedding <=> ${JSON.stringify(embedding)}::vector
    LIMIT 5
  `);
 
  return result.rows;
}

/** 聊天面板：useChat 管理消息流，v5 手动管理 input + sendMessage */
const ChatPanel = ({ show, onClose }: { show: boolean; onClose: () => void }) => {
  // throttle：流式渲染时限制消息更新频率（50ms），减少 markdown 重解析导致的抖动/闪烁
  const { messages, sendMessage, status } = useChat({ throttle: 50 });
  const [input, setInput] = useState('');
  const scrollRef = useRef<HTMLDivElement>(null);
 
  const isStreaming = status === 'submitted' || status === 'streaming';
 
  /** 新消息或流式更新时滚到底部 */
  useEffect(() => {
    const el = scrollRef.current;
    if (el) el.scrollTop = el.scrollHeight;
  }, [messages, status]);
 
  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    const text = input.trim();
    if (!text || isStreaming) return;
    sendMessage({ text });
    setInput('');
  };
 
  return (
    <motion.div
      data-lenis-prevent
      className="fixed right-4 bottom-28 z-95 flex h-112 max-h-[70vh] w-80 max-w-[calc(100vw-2rem)] flex-col overflow-hidden rounded-xl border border-gray-200 bg-white shadow-xl md:right-6 md:bottom-32"
      initial={false}
      animate={{
        opacity: show ? 1 : 0,
        y: show ? 0 : 20,
        scale: show ? 1 : 0.95,
        pointerEvents: show ? 'auto' : 'none',
      }}
      transition={{ duration: 0.25, ease: 'easeInOut' }}
    >
      {/* 头部 */}
      <div className="flex shrink-0 items-center justify-between border-b border-gray-200 px-4 py-3">
        <div className="flex items-center gap-2 text-gray-700">
          <MessageCircle size={18} className="text-purple-500" />
          <span className="text-sm font-semibold">聊天</span>
        </div>
        <div
          className="cursor-pointer rounded-md p-1 text-gray-500 hover:bg-gray-100 hover:text-gray-700"
          onClick={onClose}
        >
          <X size={18} />
        </div>
      </div>
 
      {/* 消息列表 */}
      <div ref={scrollRef} className="flex flex-1 flex-col gap-3 overflow-y-auto px-4 py-3">
        {messages.length === 0 && (
          <div className="flex h-full items-center justify-center text-center text-sm text-gray-400">
            有什么可以帮你的吗？
          </div>
        )}
        {messages.map((message, index) => {
          const text = message.parts
            .filter((part) => part.type === 'text')
            .map((part) => part.text)
            .join('');
          const reasoning = message.parts
            .filter((part) => part.type === 'reasoning')
            .map((part) => part.text)
            .join('');
          // 最后一条助手消息且仍在流式、正文还没来时，显示“思考中”
          const pending =
            message.role === 'assistant' && index === messages.length - 1 && isStreaming && !text;
          return (
            <MessageBubble
              key={message.id}
              role={message.role}
              text={text}
              reasoning={reasoning}
              pending={pending}
            />
          );
        })}
      </div>
 
      {/* 输入框 */}
      <form
        onSubmit={handleSubmit}
        className="flex shrink-0 items-center gap-2 border-t border-gray-200 px-3 py-2"
      >
        <input
          value={input}
          onChange={(e) => setInput(e.target.value)}
          placeholder="输入消息..."
          className="flex-1 rounded-full border border-gray-200 bg-gray-50 px-3 py-2 text-sm text-gray-700 outline-none focus:border-purple-400 focus:bg-white"
        />
        <button
          type="submit"
          disabled={!input.trim() || isStreaming}
          className={cn(
            'flex shrink-0 items-center justify-center rounded-full p-2 text-white transition-colors',
            !input.trim() || isStreaming
              ? 'cursor-not-allowed bg-gray-300'
              : 'cursor-pointer bg-purple-500 hover:bg-purple-600'
          )}
        >
          <Send size={16} />
        </button>
      </form>
    </motion.div>
  );
};