从零搭建基于 AI GitHub 分析平台 (16) 调用AI显示答案

效果

实现步骤如下：

安装依赖

bun install @uiw/react-md-editor
bun install react-syntax-highlighter
bun install @types/react-syntax-highlighter

添加 AskQuestionCard 模块

修改 src/app/(protected)/dashboard/AskQuestionCard.tsx:

import { askQuestion } from './actions';
import CodeReference from './CodeReference';

const AskQuestionCard = () => {
  const {project} = useProject();
  const [ question, setQuestion ] = useState('');
  const [ loading , setLoading ] = useState(false);
  const [ fileReference, setFileReference ] = useState<{ fileName :string, sourceCode: string, summary:string }[]>([])
  const [answer, setAnswer] = useState('');

  const onSubmit = async ( e: React.FormEvent<HTMLFormElement>) => {
    setAnswer("");
    setFileReference([]);
    e.preventDefault();
    if(!project?.id) return;
    setLoading(true);
    
    const {output , fileReference} = await askQuestion(question,project.id);
    setFileReference(fileReference);
    setAnswer(output);
  }

  return (
...
    </DialogTrigger>
    <DialogContent className='sm:max-w-[80vw]'>
      <DialogHeader>
        <DialogTitle>
          <Image src='/logo.png' alt='aigithub' width={40} height={40} />
        </DialogTitle>
      </DialogHeader>

      <MDEditor.Markdown source={answer} className='max-w-[75vw] !h-full max-h-[40vh] overflow-scroll' /> 
      <CodeReference fileReferences={fileReference} />
    </DialogContent>
...

添加 askQuestion 函数

添加 src/app/(protected)/dashboard/actions.ts:

'use server'

import { generateEmbedding } from '@/lib/embedding';
import { db } from '@/server/db';
import OpenAI from 'openai';

export async function askQuestion(question: string, projectId: string) {
  const openai = new OpenAI({
    baseURL: 'https://api.deepseek.com',
    apiKey: process.env.OPENAI_API_KEY,
  });

  const queryVector = await generateEmbedding(question);
    const vectorQuery = Array.from(queryVector);
  
    const result = await db.$queryRaw`
      SELECT "fileName", "sourceCode", "summary",
      1 - ("summaryEmbedding" <=> ${vectorQuery}::vector) AS similarity
      from "SourceCodeEmbedding"
      WHERE 1 - ("summaryEmbedding" <=> ${vectorQuery}::vector) > .5
      AND "projectId" = ${projectId}
      ORDER BY similarity DESC
      LIMIT 5
    ` as { fileName :string, sourceCode: string, summary:string }[];
  
    let context = "";
    for( const doc of result) {
      context += `source: ${doc.fileName}\ncode content:${doc.sourceCode}\n summary of file: ${doc.summary}`
    }


    let user_prompt = `
    You are a ai code assistant who answers question about the codebase. You target audience is technical inter who want to lear this codebase.
      AI assistant is a brand new, powerful, human-like artifical intelligence.
    The traits of AI include expert knowledge, helfulness, cleverness and articulateness.
    AI is a well-behaved and well-mannered individual.
    AI is always friendly, kind, and inspiring, and he is eager to provide vivid and thoughtful responses to the user.
    AI has the sum of all knowledge in their brain, and is able to accurately answer nearly and question about any topic in technical area.
    If the question is asking about code or special file, AI will provide the detailed answer, giving step by step instruction.
    START CONTENT BLOCK
    ${context}
    END OF CONTEXT BLOCK
    
    START QUESTION
    ${question}
    END QUESTON
    AI assistant will take into account any CONTEXT BLOCK that is provided in a conversation.
    If the context does not provide the answer to question, the AI assistant will say, "I'm sorry, but I don't know the answer."
    AI assistant will not apologize for previous response, but instead will indicated new information was gainded.
    AI assistant will not invent anything that is not drawn directly from the context.
    Answer will markdown syntax, with code snippets if need. Be as detailed as possible when answering. make sure there is not ambiguous content.
    `;

  const response  = await openai.chat.completions.create({
    temperature: 0.5,
    model: "deepseek-chat",
    messages: [
      { role: "user", content: user_prompt },
    ],
  });

  // let res: string = response.choices[0].message?.content?.replace(/'/g, '"') ?? "";
  let res: string;
  if (response && response.choices && response.choices[0] && response.choices[0].message) {
    res= response.choices[0].message.content?.replace(/'/g, '"') ?? "";
  } else {
    res = "";
    console.error("Response is undefined or does not contain choices");
  }   
  return {
    output: res,
    fileReference: result
  }
}

实现 CodeReference 模块

添加 src/app/(protected)/dashboard/CodeReference.tsx

'use client'

import React, { useState } from 'react';
import SyntaxHighlighter from 'react-syntax-highlighter';
import { lucario } from 'react-syntax-highlighter/dist/esm/styles/prism';
import { Tabs } from '@/components/ui/tabs'
import { cn } from '@/lib/utils'
import { TabsContent } from '@radix-ui/react-tabs'

type Props = {
  fileReferences: 
  {
    fileName :string, 
    sourceCode: string, 
    summary:string
  }[]
}
const CodeReference = ( { fileReferences} : Props ) => {
  const [tab, setTab] = useState(fileReferences[0]?.fileName);
  if (fileReferences.length === 0) return null;

  return (
    <div className='max-w-[75vw]'>
      <Tabs value={tab} onValueChange={setTab}>
        <div className='overflow-scroll flex gap-2 bg-gray-200 p-1 rounded-md'>
        { fileReferences.map( file =>(
          <button onClick={()=>setTab(file.fileName)} key= {file.fileName } className={cn(
            'px-3 py-1.5 text-sm font-medium rounded-md transition-colors whitespace-nowrap text-muted-foreground hover:bg-muted',
            { 'bg-primary text-primary-foreground' : tab === file.fileName }
          )}>
           { file.fileName} 
          </button>
        ))}
        </div>
        {fileReferences.map(file =>(
          <TabsContent key={file.fileName} value={ file.fileName} className='max-h-[40vh] overflow-scroll max-w-7xl rounded'>
            <SyntaxHighlighter language='typescript' style={lucario}>
              {file.sourceCode}
            </SyntaxHighlighter>
          </TabsContent>
        ))}
      </Tabs>
    </div>
  )
}

export default CodeReference

---

作者：Bearalise
出处：从零搭建基于 AI GitHub 分析平台 (16) 调用AI显示答案
版权：本文版权归作者所有
转载：欢迎转载，但未经作者同意，必须保留此段声明，必须在文章中给出原文链接。