AIにセクションごとに分けたドキュメントを与えるようにした

Author: hiromeee

app/[docs_id]/chatForm.tsx

@@ -3,7 +3,7 @@
 import { useState, FormEvent } from "react";
 import { askAI } from "@/app/actions/chatActions";
 
-export function ChatForm() {
+export function ChatForm({ documentContent }: { documentContent: string }) {
   const [inputValue, setInputValue] = useState("");
   const [response, setResponse] = useState("");
   const [isLoading, setIsLoading] = useState(false);
@@ -16,83 +16,84 @@ export function ChatForm() {
 
     const formData = new FormData();
     formData.append("message", inputValue);
+    formData.append("documentContent", documentContent);
 
     const result = await askAI({ response: "", error: null }, formData);
 
     if (result.error) {
       setResponse(`エラー: ${result.error}`);
-      } else {
+    } else {
       setResponse(result.response);
     }
-    
+
     setIsLoading(false);
   };
   return (
     <>
       {isFormVisible && (
       <form className="border border-2 border-primary shadow-xl p-6 rounded-lg bg-base-100" style={{width:"100%", textAlign:"center", boxShadow:"-moz-initial"}} onSubmit={handleSubmit}>
-        <h2 className="text-xl font-bold mb-4 text-left relative -top-2 font-mono h-2">
-          AIへ質問
-        </h2>
+          <h2 className="text-xl font-bold mb-4 text-left relative -top-2 font-mono h-2">
+            AIへ質問
+          </h2>
         <div className="input-area" style={{height:"80px"}}>
-          <textarea
-            className="textarea textarea-white textarea-md"
-            placeholder="質問を入力してください"
+            <textarea
+              className="textarea textarea-white textarea-md"
+              placeholder="質問を入力してください"
             style={{width: "100%", height: "110px", resize: "none"}}
-            value={inputValue}
-            onChange={(e) => setInputValue(e.target.value)}
-            disabled={isLoading}
-          ></textarea>
-        </div>
-        <br />
+              value={inputValue}
+              onChange={(e) => setInputValue(e.target.value)}
+              disabled={isLoading}
+            ></textarea>
+          </div>
+          <br />
         <div className="controls" style={{position:"relative", top:"22px", display:"flex", alignItems:"center", justifyContent:"space-between"}}>
-          <div className="left-icons">
-            <button 
-              className="btn btn-soft btn-secondary rounded-full"
-              onClick={() => setIsFormVisible(false)}
-            >
+            <div className="left-icons">
+              <button
+                className="btn btn-soft btn-secondary rounded-full"
+                onClick={() => setIsFormVisible(false)}
+              >
 
-              閉じる
-            </button>
-          </div>
-          <div className="right-controls">
-            <button
-              type="submit"
-              className="btn btn-soft btn-circle btn-primary rounded-full"
-              title="送信"
+                閉じる
+              </button>
+            </div>
+            <div className="right-controls">
+              <button
+                type="submit"
+                className="btn btn-soft btn-circle btn-primary rounded-full"
+                title="送信"
               style={{marginTop:"10px"}}
-              disabled={isLoading}
-            >
-              <span className="icon">➤</span>
-            </button>
+                disabled={isLoading}
+              >
+                <span className="icon">➤</span>
+              </button>
+            </div>
           </div>
-        </div>
-      </form>
+        </form>
       )}
       {!isFormVisible && (
-      <button 
-        className="btn btn-soft btn-secondary rounded-full"
-        onClick={() => setIsFormVisible(true)}
-      >
-        チャットを開く
-      </button>
+        <button
+          className="btn btn-soft btn-secondary rounded-full"
+          onClick={() => setIsFormVisible(true)}
+        >
+          チャットを開く
+        </button>
       )}
 
       {response && (
         <article>
           <h3 className="text-lg font-semibold mb-2">AIの回答</h3>
           <div className="chat chat-start">
             <div className="chat-bubble chat-bubble-primary">
-               <div className="response-container">{response}</div>
+              <div className="response-container">{response}</div>
             </div>
           </div>
         </article>
       )}
 
       {isLoading && (
-      <div className="mt-2 text-l text-gray-500 animate-pulse">
-        AIが考え中です…
-      </div>
+        <div className="mt-2 text-l text-gray-500 animate-pulse">
+          AIが考え中です…
+        </div>
       )}
 
     </>

app/[docs_id]/section.tsx

@@ -11,7 +11,7 @@ export function Section({ section }: { section: MarkdownSection }) {
     <div>
       <Heading level={section.level}>{section.title}</Heading>
       <StyledMarkdown content={section.content} />
-      <ChatForm />
+      <ChatForm documentContent={section.content} />
     </div>
   );
 }

app/actions/chatActions.ts

@@ -14,14 +14,20 @@ export async function askAI(
   formData: FormData
 ): Promise<FormState> {
   const message = formData.get('message');
+  const documentContent = formData.get('documentContent');
 
   if (!message || typeof message !== 'string' || message.trim() === '') {
     return { response: '', error: 'メッセージを入力してください。' };
   }
 
+  if (!documentContent || typeof documentContent !== 'string') {
+    return { response: '', error: 'コンテキストとなるドキュメントがありません。' };
+  }
+  
   try {
     const model = genAI.getGenerativeModel({ model: "gemini-1.5-flash" });
-    const result = await model.generateContent(message);
+    const fullMessage = documentContent + "\n\n" + message;
+    const result = await model.generateContent(fullMessage);
     const response = result.response;
     const text = response.text();
     return { response: text, error: null };