Update headings and styles, and fix image layout in chatbox and editMessageDetail components

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"

src/chatbox.tsx

@@ -830,18 +830,15 @@ export default function ChatBOX(props: {
         </span>
       )}
       <div className="flex justify-between">
-        {(chatStore.model.match("vision") ||
+        <button
-          (chatStore.image_gen_api && chatStore.image_gen_key)) && (
+          className="disabled:line-through disabled:bg-slate-500 rounded m-1 p-1 border-2 bg-cyan-400 hover:bg-cyan-600"
-          <button
+          disabled={showGenerating || !chatStore.apiKey}
-            className="disabled:line-through disabled:bg-slate-500 rounded m-1 p-1 border-2 bg-cyan-400 hover:bg-cyan-600"
+          onClick={() => {
-            disabled={showGenerating || !chatStore.apiKey}
+            setShowAddImage(!showAddImage);
-            onClick={() => {
+          }}
-              setShowAddImage(!showAddImage);
+        >
-            }}
+          Img
-          >
+        </button>
-            Img
-          </button>
-        )}
         {showAddImage && (
           <AddImage
             chatStore={chatStore}

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