From 0da2a2db7e13eb28094a37cf771e792a43686043 Mon Sep 17 00:00:00 2001
From: Tatsu723 <hiro723moto@gmail.com>
Date: Sat, 9 Aug 2025 13:51:06 +0900
Subject: [PATCH 1/2] =?UTF-8?q?chatform=E3=81=AE=E3=83=87=E3=82=B6?=
 =?UTF-8?q?=E3=82=A4=E3=83=B3=E8=AA=BF=E6=95=B4+style=E3=81=AE=E6=9B=B8?=
 =?UTF-8?q?=E6=8F=9B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/[docs_id]/chatForm.tsx | 101 +++----------------------------------
 1 file changed, 8 insertions(+), 93 deletions(-)

diff --git a/app/[docs_id]/chatForm.tsx b/app/[docs_id]/chatForm.tsx
index 0b86077..ee63e0a 100644
--- a/app/[docs_id]/chatForm.tsx
+++ b/app/[docs_id]/chatForm.tsx
@@ -42,111 +42,26 @@ export function ChatForm() {
   };
   return (
     <>
-      <style jsx>{`
-        /* 簡単なCSSで見た目を整える（オプション） */
-        .form-container {
-          background-color: white;
-          border-radius: 10px;
-          box-shadow: 0 4px 8px rgba(67, 204, 216, 0.86);
-          padding: 20px;
-          width: 90%;
-          max-width: 1000px;
-          display: flex;
-          flex-direction: column;
-        }
-        .input-area {
-          border: 1px solid #ccc;
-          border-radius: 8px;
-          padding: 5px 15 px;
-          margin-bottom: 15px;
-          min-height: 150px; /* 入力欄の高さ */
-          display: flex;
-        }
-        .text-input {
-          border: none;
-          outline: none;
-          flex-grow: 1;
-          font-size: 16px;
-          resize: none; /* テキストエリアのリサイズを無効化 */
-          overflow: auto;
-          padding: 10px;
-        }
-        .controls {
-          display: flex;
-          align-items: center;
-          justify-content: space-between;
-        }
-        .left-icons button {
-          background: none;
-          border: none;
-          font-size: 24px;
-          cursor: pointer;
-          color: #555;
-          margin-right: 15px;
-          padding: 5px;
-        }
-        .left-icons button:hover {
-          color: #000;
-        }
-        .left-icons span {
-          font-size: 14px;
-          vertical-align: middle;
-          margin-left: 5px;
-          color: #555;
-        }
-        .right-controls {
-          display: flex;
-          align-items: center;
-        }
-        .voice-icon button {
-          background: none;
-          border: none;
-          font-size: 24px;
-          cursor: pointer;
-          color: #555;
-          margin-right: 15px;
-          padding: 5px;
-        }
-        .voice-icon button:hover {
-          color: #000;
-        }
-        .send-button {
-          background-color: #007bff; /* 青色の送信ボタン */
-          color: white;
-          border: none;
-          border-radius: 50%; /* 丸いボタン */
-          width: 40px;
-          height: 40px;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          font-size: 20px;
-          cursor: pointer;
-          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-          transition: background-color 0.3s ease;
-        }
-        .send-button:hover {
-          background-color: #0056b3;
-        }
-      `}</style>
-
-      <form className="form-container" onSubmit={handleSubmit}>
-        <div className="input-area">
+      <form className="border border-2 border-primary shadow-xl p-6 rounded-lg bg-base-100" style={{width:"70%", textAlign:"center", boxShadow:"-moz-initial", position:"fixed", bottom:"10px", marginLeft:"20px"}} onSubmit={handleSubmit}>
+        <h2 className="text-xl font-bold mb-4"　style={{textAlign:"left", position:"relative", bottom:"10px", fontFamily:"monospace", height:"10px"}}>AIへ質問</h2>
+        <div className="input-area" style={{height:"80px"}}>
           <textarea
-            className="text-input"
+            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>
-        <div className="controls">
+        <div className="controls" style={{position:"relative", top:"22px", display:"flex", alignItems:"center", justifyContent:"space-between"}}>
           <div className="left-icons"></div>
           <div className="right-controls">
             <button
               type="submit"
-              className="send-button"
+              className="btn btn-soft btn-primary rounded-full"
               title="送信"
+              style={{marginTop:"10px"}}
               disabled={isLoading}
             >
               <span className="icon">➤</span>

From c07defef80fc2059655518121b62486aadccb246 Mon Sep 17 00:00:00 2001
From: Tatsu723 <hiro723moto@gmail.com>
Date: Mon, 11 Aug 2025 20:25:10 +0900
Subject: [PATCH 2/2] =?UTF-8?q?chatbox=E3=81=AE=E8=A1=A8=E7=A4=BA=E9=9D=9E?=
 =?UTF-8?q?=E8=A1=A8=E7=A4=BA=E3=81=AE=E5=88=87=E3=82=8A=E6=9B=BF=E3=81=88?=
 =?UTF-8?q?=E5=AE=9F=E8=A3=85=EF=BC=8B=E5=87=BA=E5=8A=9B=E7=94=A8chatbubbl?=
 =?UTF-8?q?e=E4=BD=9C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/[docs_id]/chatForm.tsx | 49 ++++++++++++++++++++++++++++++++++----
 1 file changed, 44 insertions(+), 5 deletions(-)

diff --git a/app/[docs_id]/chatForm.tsx b/app/[docs_id]/chatForm.tsx
index ee63e0a..acaaa7a 100644
--- a/app/[docs_id]/chatForm.tsx
+++ b/app/[docs_id]/chatForm.tsx
@@ -10,6 +10,7 @@ export function ChatForm() {
   const [inputValue, setInputValue] = useState("");
   const [response, setResponse] = useState("");
   const [isLoading, setIsLoading] = useState(false);
+  const [isFormVisible, setIsFormVisible] = useState(false);
 
   const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
@@ -42,8 +43,11 @@ export function ChatForm() {
   };
   return (
     <>
-      <form className="border border-2 border-primary shadow-xl p-6 rounded-lg bg-base-100" style={{width:"70%", textAlign:"center", boxShadow:"-moz-initial", position:"fixed", bottom:"10px", marginLeft:"20px"}} onSubmit={handleSubmit}>
-        <h2 className="text-xl font-bold mb-4"　style={{textAlign:"left", position:"relative", bottom:"10px", fontFamily:"monospace", height:"10px"}}>AIへ質問</h2>
+      {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>
         <div className="input-area" style={{height:"80px"}}>
           <textarea
             className="textarea textarea-white textarea-md"
@@ -54,12 +58,21 @@ export function ChatForm() {
             disabled={isLoading}
           ></textarea>
         </div>
+        <br />
         <div className="controls" style={{position:"relative", top:"22px", display:"flex", alignItems:"center", justifyContent:"space-between"}}>
-          <div className="left-icons"></div>
+          <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-primary rounded-full"
+              className="btn btn-soft btn-circle btn-primary rounded-full"
               title="送信"
               style={{marginTop:"10px"}}
               disabled={isLoading}
@@ -69,7 +82,33 @@ export function ChatForm() {
           </div>
         </div>
       </form>
-      {response && <div className="response-container">{response}</div>}
+      )}
+      {!isFormVisible && (
+      <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>
+          </div>
+        </article>
+      )}
+
+      {isLoading && (
+      <div className="mt-2 text-l text-gray-500 animate-pulse">
+        AIが考え中です…
+      </div>
+      )}
+
     </>
   );
 }