从零搭建基于 AI GitHub 分析平台 (18) 显示已保存答案

效果

实现步骤如下：

修改数据库结构

修改 prisma/schema.prisma

model Question {
  id        String   @id @default(cuid())
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt

  question  String
  answer    String

  fileReferences Json?
  
  projectId String
  project   Project @relation(fields:[projectId], references: [id])

  userId    String
  user      User    @relation(fields:[userId], references: [id])
}

添加 getAnswer API 函数

修改 src/server/api/routers/project.ts:

getAnswer: authenticatedProcedure.input( z.object({
    projectId : z.string()
  })).query( async ( { ctx, input }) => {
    return await ctx.db.question.findMany({ 
      where: { 
        projectId : input.projectId 
      },
      include: {
        user:true
      },
      orderBy: {
        createdAt: "desc"
      }})
  })

添加 QA 页面

添加 src/app/(protected)/qa/page.tsx

"use client"
import React, { useState } from 'react';

import useProject from '@/hooks/use-project';
import { api } from '@/trpc/react';
import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet';
import AskQuestionCard from '../dashboard/AskQuestionCard';
import MDEditor from '@uiw/react-md-editor';
import CodeReference from '../dashboard/CodeReference';

const QAPage = () => {
  const { projectId } = useProject();
  const { data: answers } = api.project.getAnswer.useQuery({ projectId });
  
  const [answerId, setAnswerId] = useState(0);
  const currentAnswer = answers?.[answerId];

  return (
    <Sheet>
      <AskQuestionCard />
      <div className='h-4'></div>
      <h1 className='text-xl font-semibold'>已保存答案</h1>
      <div className='h-2'></div>
      <div className='flex flex-col gap-2'>
        {answers?.map((answer,index) => {
          return <React.Fragment key={answer.id}>
            <SheetTrigger onClick={() => setAnswerId(index)}>
              <div className='flex items-center gap-4 bg-white rounded-lg p-4 shadow border'>
                <img className='round-full' height={30} width={30} src={answer.user.imageUrl ?? ""} />

                <div className='text-left flex flex-col'>
                  <div className='flex items-center gap-2'>
                    <p className='text-gray-700 line-clamp-1 text-lg font-medium' >
                      {answer.question}
                    </p>
                    <span className='text-xs text-gray-400 whitespace-nowrap'>
                      {answer.createdAt.toLocaleDateString()}
                    </span>
                  </div>
                  <p className='text-gray-500 line-clamp-2 text-sm'>
                    {answer.answer}
                  </p>
                </div>
              </div>
            </SheetTrigger>
          </React.Fragment>
        })}
      </div>

      { currentAnswer && (
        <SheetContent className='sm:max-w-[80vw]'>
          <SheetHeader>
            <SheetTitle className='text-3xl'>
              Question: {currentAnswer.question}
            </SheetTitle>
            <div className="mt-4 overflow-y-auto max-h-[calc(100vh-100px)]">
              <MDEditor.Markdown source={currentAnswer.answer} />
              <CodeReference fileReferences={(currentAnswer.fileReferences ?? []) as any} />
            </div>
          </SheetHeader>
        </SheetContent>
      )}
    </Sheet>
  )
}

export default QAPage

---

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