Merge branch 'main' into changetheme

Author: Tatsu723

README.md

@@ -83,10 +83,13 @@ npm run lint
 
 - [Next.js](https://nextjs.org/docs)
     - 検索する際は「App Router」を含めることで古い記事に惑わされることが少なくなります。
+- [OpenNext](https://opennext.js.org/cloudflare)
 - [DaisyUI](https://daisyui.com/docs/use/) / [Tailwind CSS](https://tailwindcss.com/docs)
     - buttonやinputやメニューなどの基本的なコンポーネントのデザインはDaisyUIにあるものを使うと楽です
     - 細かくスタイルを調整したい場合はTailwind CSSを使います (CSS直接指定(`style={{...}}`)よりもちょっと楽に書ける)
     - よくわからなかったらstyle直接指定でも良い
+- [SWR](https://swr.vercel.app/ja)
 - [react-markdown](https://www.npmjs.com/package/react-markdown)
-    - オプションがいろいろあり、今はほぼデフォルト設定で突っ込んでいるがあとでなんとかする
-- [OpenNext](https://opennext.js.org/cloudflare)
+- REPL・実行結果表示: [xterm.js](https://xtermjs.org/)
+- コードエディター: [react-ace](https://github.com/securingsincity/react-ace)
+- それ以外のコードブロック: [react-syntax-highlighter](https://github.com/react-syntax-highlighter/react-syntax-highlighter)

app/[docs_id]/chatForm.tsx

@@ -1,42 +1,98 @@
 "use client";
 
 import { useState, FormEvent } from "react";
+import clsx from "clsx";
 import { askAI } from "@/app/actions/chatActions";
 import { StyledMarkdown } from "./markdown";
+import { useChatHistory, type Message } from "../hooks/useChathistory";
+import useSWR from "swr";
+import { getQuestionExample } from "../actions/questionExample";
+import { getLanguageName } from "../pagesList";
 
-export function ChatForm({ documentContent }: { documentContent: string }) {
+interface ChatFormProps {
+  documentContent: string;
+  sectionId: string;
+}
+
+export function ChatForm({ documentContent, sectionId }: ChatFormProps) {
+  const [messages, updateChatHistory] = useChatHistory(sectionId);
   const [inputValue, setInputValue] = useState("");
-  const [response, setResponse] = useState("");
   const [isLoading, setIsLoading] = useState(false);
   const [isFormVisible, setIsFormVisible] = useState(false);
 
+  const lang = getLanguageName(sectionId);
+  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<number>(0); // 0〜1
+
   const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     setIsLoading(true);
-    setResponse("");
+
+    const userMessage: Message = { sender: "user", text: inputValue };
+    updateChatHistory([userMessage]);
+
+    let userQuestion = inputValue;
+    if(!userQuestion && exampleData){
+      // 質問が空欄なら、質問例を使用
+      userQuestion = exampleData[Math.floor(exampleChoice * exampleData.length)];
+      setInputValue(userQuestion);
+    }
 
     const result = await askAI({
-      userQuestion: inputValue,
+      userQuestion,
       documentContent: documentContent,
     });
 
     if (result.error) {
-      setResponse(`エラー: ${result.error}`);
+      const errorMessage: Message = { sender: "ai", text: `エラー: ${result.error}`, isError: true };
+      updateChatHistory([userMessage, errorMessage]);
     } else {
-      setResponse(result.response);
+      const aiMessage: Message = { sender: "ai", text: result.response };
+      updateChatHistory([userMessage, aiMessage]);
+      setInputValue("");
     }
 
     setIsLoading(false);
   };
+
+  const handleClearHistory = () => {
+    updateChatHistory([]);
+  };
+  
   return (
     <>
       {isFormVisible && (
       <form className="border border-2 border-secondary shadow-md rounded-lg bg-base-100" style={{width:"100%", textAlign:"center", boxShadow:"-moz-initial"}} onSubmit={handleSubmit}>
         <div className="input-area">
             <textarea
               className="textarea textarea-ghost textarea-md rounded-lg"
-              placeholder="質問を入力してください"
-            style={{width: "100%", height: "110px", resize: "none", outlineStyle: "none"}}
+              placeholder={
+                "質問を入力してください" +
+                (exampleData
+                  ? ` (例:「${exampleData[Math.floor(exampleChoice * exampleData.length)]}」)`
+                  : "")
+              }
+              style={{
+                width: "100%",
+                height: "110px",
+                resize: "none",
+                outlineStyle: "none",
+              }}
               value={inputValue}
               onChange={(e) => setInputValue(e.target.value)}
               disabled={isLoading}
@@ -47,8 +103,8 @@ export function ChatForm({ documentContent }: { documentContent: string }) {
               <button
                 className="btn btn-soft btn-secondary rounded-full"
                 onClick={() => setIsFormVisible(false)}
+                type="button"
               >
-
                 閉じる
               </button>
             </div>
@@ -68,20 +124,42 @@ export function ChatForm({ documentContent }: { documentContent: string }) {
       {!isFormVisible && (
         <button
           className="btn btn-soft btn-secondary rounded-full"
-          onClick={() => setIsFormVisible(true)}
+          onClick={() => {
+            setIsFormVisible(true);
+            setExampleChoice(Math.random());
+          }}
         >
           チャットを開く
         </button>
       )}
 
-      {response && (
-        <article>
-          <h3 className="text-lg font-semibold mb-2">AIの回答</h3>
-          <div className="chat chat-start">
-            <div className="chat-bubble bg-secondary-content text-black" style={{maxWidth: "100%", wordBreak: "break-word"}}>
-              <div className="response-container"><StyledMarkdown content={response}/></div>
-            </div>
+      {messages.length > 0 && (
+        <article className="mt-4">
+          <div className="flex justify-between items-center mb-2">
+            <h3 className="text-lg font-semibold">AIとのチャット</h3>
+            <button
+              onClick={handleClearHistory}
+              className="btn btn-ghost btn-sm text-xs"
+              aria-label="チャット履歴を削除"
+            >
+              履歴を削除
+            </button>
           </div>
+          {messages.map((msg, index) => (
+            <div key={index} className={`chat ${msg.sender === 'user' ? 'chat-end' : 'chat-start'}`}>
+              <div 
+                className={clsx(
+                  "chat-bubble",
+                  { "bg-primary text-primary-content": msg.sender === 'user' },
+                  { "bg-secondary-content text-black": msg.sender === 'ai' && !msg.isError },
+                  { "chat-bubble-error": msg.isError }
+                )} 
+                style={{maxWidth: "100%", wordBreak: "break-word"}}
+              >
+                <StyledMarkdown content={msg.text} />
+              </div>
+            </div>
+          ))}
         </article>
       )}
 
@@ -93,4 +171,4 @@ export function ChatForm({ documentContent }: { documentContent: string }) {
 
     </>
   );
-}
+}