diff --git a/app/[docs_id]/chatForm.tsx b/app/[docs_id]/chatForm.tsx index 24cac31..a92afb0 100644 --- a/app/[docs_id]/chatForm.tsx +++ b/app/[docs_id]/chatForm.tsx @@ -3,20 +3,55 @@ import { useState, FormEvent } from "react"; import { askAI } from "@/app/actions/chatActions"; import { StyledMarkdown } from "./markdown"; +import useSWR from "swr"; +import { getQuestionExample } from "../actions/questionExample"; +import { getLanguageName } from "../pagesList"; -export function ChatForm({ documentContent }: { documentContent: string }) { +export function ChatForm({ + docs_id, + documentContent, +}: { + docs_id: string; + documentContent: string; +}) { const [inputValue, setInputValue] = useState(""); const [response, setResponse] = useState(""); const [isLoading, setIsLoading] = useState(false); const [isFormVisible, setIsFormVisible] = useState(false); + const lang = getLanguageName(docs_id); + const { data: exampleData, error: exampleError } = useSWR( + // 質問フォームを開いたときだけで良い + isFormVisible ? { lang, documentContent } : null, + getQuestionExample, + { + // リクエストは古くても構わないので1回でいい + revalidateIfStale: false, + revalidateOnFocus: false, + revalidateOnReconnect: false, + } + ); + if (exampleError) { + console.error("Error getting question example:", exampleError); + } + // 質問フォームを開くたびにランダムに選び直し、 + // exampleData[Math.floor(exampleChoice * exampleData.length)] を採用する + const [exampleChoice, setExampleChoice] = useState(0); // 0〜1 + const handleSubmit = async (e: FormEvent) => { e.preventDefault(); setIsLoading(true); setResponse(""); + let userQuestion = inputValue; + if(!userQuestion && exampleData){ + // 質問が空欄なら、質問例を使用 + userQuestion = exampleData[Math.floor(exampleChoice * exampleData.length)]; + setInputValue(userQuestion); + } + const result = await askAI({ - userQuestion: inputValue, + userQuestion, documentContent: documentContent, }); @@ -35,8 +70,18 @@ export function ChatForm({ documentContent }: { documentContent: string }) {