Merge pull request #16 from ut-code/markdown

AI解答のmarkdown形式化

Author: Tatsu723

app/[docs_id]/chatForm.tsx

@@ -2,6 +2,7 @@
 
 import { useState, FormEvent } from "react";
 import { askAI } from "@/app/actions/chatActions";
+import { StyledMarkdown } from "./markdown";
 
 export function ChatForm({ documentContent }: { documentContent: string }) {
   const [inputValue, setInputValue] = useState("");
@@ -30,7 +31,7 @@ export function ChatForm({ documentContent }: { documentContent: string }) {
   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}>
+      <form className="border border-2 border-secondary 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>
@@ -58,7 +59,7 @@ export function ChatForm({ documentContent }: { documentContent: string }) {
             <div className="right-controls">
               <button
                 type="submit"
-                className="btn btn-soft btn-circle btn-primary rounded-full"
+                className="btn btn-soft btn-circle btn-accent border-2 border-accent rounded-full"
                 title="送信"
               style={{marginTop:"10px"}}
                 disabled={isLoading}
@@ -82,8 +83,8 @@ export function ChatForm({ documentContent }: { documentContent: string }) {
         <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="chat-bubble bg-secondary-content text-black" style={{maxWidth: "100%", wordBreak: "break-word"}}>
+              <div className="response-container"><StyledMarkdown content={response}/></div>
             </div>
           </div>
         </article>

app/[docs_id]/markdown.tsx

@@ -118,7 +118,7 @@ const components: Components = {
       // inline
       return (
         <code
-          className="bg-base-200 border border-base-300 px-1 py-0.5 rounded text-sm "
+          className="bg-base-200/60 border border-base-300 px-1 py-0.5 rounded text-sm "
           {...props}
         />
       );