From d4da4c3e32aca7b9db57936e30681c2929bf253f Mon Sep 17 00:00:00 2001
From: heimoshuiyu <heimoshuiyu@gmail.com>
Date: Tue, 14 May 2024 09:34:12 +0800
Subject: [PATCH] Update headings and styles, and fix image layout in chatbox
 and editMessageDetail components

---
 src/addImage.tsx          |  3 ++-
 src/chatbox.tsx           | 21 +++++++++------------
 src/editMessageDetail.tsx | 16 ++++++++--------
 3 files changed, 19 insertions(+), 21 deletions(-)

diff --git a/src/addImage.tsx b/src/addImage.tsx
index a5fb670..48fb1b0 100644
--- a/src/addImage.tsx
+++ b/src/addImage.tsx
@@ -46,7 +46,8 @@ export function AddImage({
           event.stopPropagation();
         }}
       >
-        <h2>Add Images</h2>
+        <h2 className="strong">Add Images</h2>
+        <hr />
         <span>
           <button
             className="disabled:line-through disabled:bg-slate-500 rounded m-1 p-1 border-2 bg-cyan-400 hover:bg-cyan-600"
diff --git a/src/chatbox.tsx b/src/chatbox.tsx
index 1fc30ef..bba3547 100644
--- a/src/chatbox.tsx
+++ b/src/chatbox.tsx
@@ -830,18 +830,15 @@ export default function ChatBOX(props: {
         </span>
       )}
       <div className="flex justify-between">
-        {(chatStore.model.match("vision") ||
-          (chatStore.image_gen_api && chatStore.image_gen_key)) && (
-          <button
-            className="disabled:line-through disabled:bg-slate-500 rounded m-1 p-1 border-2 bg-cyan-400 hover:bg-cyan-600"
-            disabled={showGenerating || !chatStore.apiKey}
-            onClick={() => {
-              setShowAddImage(!showAddImage);
-            }}
-          >
-            Img
-          </button>
-        )}
+        <button
+          className="disabled:line-through disabled:bg-slate-500 rounded m-1 p-1 border-2 bg-cyan-400 hover:bg-cyan-600"
+          disabled={showGenerating || !chatStore.apiKey}
+          onClick={() => {
+            setShowAddImage(!showAddImage);
+          }}
+        >
+          Img
+        </button>
         {showAddImage && (
           <AddImage
             chatStore={chatStore}
diff --git a/src/editMessageDetail.tsx b/src/editMessageDetail.tsx
index ef03e14..777ae89 100644
--- a/src/editMessageDetail.tsx
+++ b/src/editMessageDetail.tsx
@@ -22,10 +22,10 @@ export function EditMessageDetail({
     >
       {chat.content.map((mdt, index) => (
         <div className={"w-full p-2 px-4"}>
-          <div className="flex justify-between">
+          <div className="flex justify-center">
             {mdt.type === "text" ? (
               <textarea
-                className={"w-full"}
+                className={"w-full border p-1 rounded"}
                 value={mdt.text}
                 onChange={(event: any) => {
                   if (typeof chat.content === "string") return;
@@ -41,16 +41,16 @@ export function EditMessageDetail({
                 }}
               ></textarea>
             ) : (
-              <>
+              <div className="border p-1 rounded">
                 <img
-                  className="max-h-32 max-w-xs cursor-pointer"
+                  className="max-h-32 max-w-xs cursor-pointer m-2"
                   src={mdt.image_url?.url}
                   onClick={() => {
                     window.open(mdt.image_url?.url, "_blank");
                   }}
                 />
                 <button
-                  className="bg-blue-300 p-1 rounded"
+                  className="bg-blue-300 p-1 rounded m-1"
                   onClick={() => {
                     const image_url = prompt("image url", mdt.image_url?.url);
                     if (image_url) {
@@ -65,7 +65,7 @@ export function EditMessageDetail({
                   {Tr("Edit URL")}
                 </button>
                 <button
-                  className="bg-blue-300 p-1 rounded"
+                  className="bg-blue-300 p-1 rounded m-1"
                   onClick={() => {
                     // select file and load it to base64 image URL format
                     const input = document.createElement("input");
@@ -95,7 +95,7 @@ export function EditMessageDetail({
                   {Tr("Upload")}
                 </button>
                 <span
-                  className="bg-blue-300 p-1 rounded"
+                  className="bg-blue-300 p-1 rounded m-1"
                   onClick={() => {
                     if (typeof chat.content === "string") return;
                     const obj = chat.content[index].image_url;
@@ -111,7 +111,7 @@ export function EditMessageDetail({
                     checked={mdt.image_url?.detail === "high"}
                   />
                 </span>
-              </>
+              </div>
             )}
 
             <button