fix: improve chat window buttons

hsluoyz · hsluoyz · commit 9b7b987d5102 · 2026-05-10T02:12:46.000+08:00
diff --git a/object/text_to_speech.go b/object/text_to_speech.go
@@ -69,7 +69,6 @@ func createProviderChat(chatId string, provider *Provider) (*Chat, error) {
 	}
 	chat := &Chat{
 		Name:        chatName,
-		Type:        "Provider",
 		Owner:       provider.Owner,
 		CreatedTime: util.GetCurrentTime(),
 		UpdatedTime: util.GetCurrentTime(),
diff --git a/web/src/chat/MessageActions.js b/web/src/chat/MessageActions.js
@@ -52,6 +52,7 @@ const MessageActions = ({
   account,
   setIsRegenerating,
   isRegenerating,
+  hideInput,
 }) => {
   const isCurrentMessageBeingRead = readingMessage === message.name;
   const isCurrentMessageBeingLoaded = isLoadingTTS && isCurrentMessageBeingRead;
@@ -89,23 +90,27 @@ const MessageActions = ({
     >
       <CopyButton message={message} onCopy={onCopy} />
 
-      <Tooltip title={i18next.t("general:Like")} arrow={false}>
-        <Button
-          icon={message.likeUsers?.includes(account.name) ? <LikeFilled /> : <LikeOutlined />}
-          color="primary"
-          variant="text"
-          onClick={() => onLike(message, "like")}
-        />
-      </Tooltip>
+      {!hideInput && (
+        <Tooltip title={i18next.t("general:Like")} arrow={false}>
+          <Button
+            icon={message.likeUsers?.includes(account.name) ? <LikeFilled /> : <LikeOutlined />}
+            color="primary"
+            variant="text"
+            onClick={() => onLike(message, "like")}
+          />
+        </Tooltip>
+      )}
 
-      <Tooltip title={i18next.t("general:Dislike")} arrow={false}>
-        <Button
-          icon={message.dislikeUsers?.includes(account.name) ? <DislikeFilled /> : <DislikeOutlined />}
-          color="primary"
-          variant="text"
-          onClick={() => onLike(message, "dislike")}
-        />
-      </Tooltip>
+      {!hideInput && (
+        <Tooltip title={i18next.t("general:Dislike")} arrow={false}>
+          <Button
+            icon={message.dislikeUsers?.includes(account.name) ? <DislikeFilled /> : <DislikeOutlined />}
+            color="primary"
+            variant="text"
+            onClick={() => onLike(message, "dislike")}
+          />
+        </Tooltip>
+      )}
 
       <Tooltip title={getTtsTooltip()} arrow={false}>
         <Button
@@ -117,7 +122,7 @@ const MessageActions = ({
         />
       </Tooltip>
 
-      {!isLastMessage ? null : (
+      {!hideInput && isLastMessage && (
         <Tooltip title={i18next.t("general:Regenerate")} arrow={false}>
           <Button
             icon={<ReloadOutlined />}
diff --git a/web/src/chat/MessageEdit.js b/web/src/chat/MessageEdit.js
@@ -13,41 +13,23 @@
 // limitations under the License.
 
 import React, {useState} from "react";
-import {Button, Input, Space, Tooltip} from "antd";
+import {Button, Input, Tooltip} from "antd";
 import {CheckOutlined, CloseOutlined, EditOutlined} from "@ant-design/icons";
 import i18next from "i18next";
 
-// Styles for edit components
-export const editStyles = {
-  // Edit form styles
-  editForm: {
-    width: "100%",
-  },
-
-  // TextArea styles in edit form
-  editTextArea: {
-    marginBottom: "8px",
-  },
-
-  // Button container in edit form
-  editFormButtons: {
-    display: "flex",
-    justifyContent: "flex-end",
-  },
-};
-
 const MessageEdit = ({
   message,
   isLastMessage,
   disableInput,
+  hideInput,
   index,
   onEditMessage,
+  isDark,
 }) => {
   const [isEditing, setIsEditing] = useState(false);
   const [editedText, setEditedText] = useState("");
   const [isHovering, setIsHovering] = useState(false);
 
-  // Edit action handlers
   const handleEditActions = {
     start: () => {
       setIsEditing(true);
@@ -65,44 +47,99 @@ const MessageEdit = ({
       if (e.key === "Enter" && !e.shiftKey) {
         e.preventDefault();
         handleEditActions.save();
+      } else if (e.key === "Escape") {
+        handleEditActions.cancel();
       }
     },
   };
 
-  // Edit form component
-  const renderEditForm = () => (
-    <div style={editStyles.editForm}>
-      <Input.TextArea
-        value={editedText}
-        onChange={e => setEditedText(e.target.value)}
-        onKeyDown={handleEditActions.keyDown}
-        autoSize={{minRows: 1, maxRows: 6}}
-        style={editStyles.editTextArea}
-        autoFocus
-      />
-      <Space style={editStyles.editFormButtons}>
-        <Button
-          icon={<CloseOutlined />}
-          onClick={handleEditActions.cancel}
-          size="small"
-        >
-          {i18next.t("general:Cancel")}
-        </Button>
-        <Button
-          type="primary"
-          icon={<CheckOutlined />}
-          onClick={handleEditActions.save}
-          size="small"
-        >
-          {i18next.t("general:Save")}
-        </Button>
-      </Space>
-    </div>
-  );
+  const renderEditForm = () => {
+    const containerStyle = {
+      width: "100%",
+      maxWidth: "480px",
+      marginLeft: "auto",
+      background: isDark ? "#1e2130" : "#ffffff",
+      border: isDark ? "1px solid #2e3347" : "1px solid #e2e8f0",
+      borderRadius: "14px 14px 4px 14px",
+      padding: "12px 14px",
+      boxShadow: isDark
+        ? "0 4px 16px rgba(0,0,0,0.45)"
+        : "0 4px 16px rgba(0,0,0,0.08)",
+    };
+
+    const textareaStyle = {
+      background: isDark ? "#252a3a" : "#f7f9fc",
+      borderColor: isDark ? "#363d52" : "#dde3ed",
+      color: isDark ? "#dde3f0" : "#2d3748",
+      borderRadius: "8px",
+      fontSize: "14px",
+      lineHeight: "1.6",
+      resize: "none",
+      transition: "border-color 0.2s",
+    };
+
+    return (
+      <div style={containerStyle}>
+        <Input.TextArea
+          value={editedText}
+          onChange={e => setEditedText(e.target.value)}
+          onKeyDown={handleEditActions.keyDown}
+          autoSize={{minRows: 2, maxRows: 8}}
+          style={textareaStyle}
+          autoFocus
+        />
+        <div style={{
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+          marginTop: "10px",
+        }}>
+          <span style={{
+            fontSize: "11px",
+            color: isDark ? "#5a6480" : "#a0aec0",
+            userSelect: "none",
+          }}>
+            Enter {i18next.t("general:Save")} · Esc {i18next.t("general:Cancel")}
+          </span>
+          <div style={{display: "flex", gap: "8px"}}>
+            <Button
+              size="small"
+              icon={<CloseOutlined style={{fontSize: "11px"}} />}
+              onClick={handleEditActions.cancel}
+              style={{
+                borderRadius: "20px",
+                paddingInline: "12px",
+                height: "28px",
+                background: "transparent",
+                borderColor: isDark ? "#3d4560" : "#d1d8e4",
+                color: isDark ? "#8896b0" : "#718096",
+                fontSize: "12px",
+              }}
+            >
+              {i18next.t("general:Cancel")}
+            </Button>
+            <Button
+              type="primary"
+              size="small"
+              icon={<CheckOutlined style={{fontSize: "11px"}} />}
+              onClick={handleEditActions.save}
+              style={{
+                borderRadius: "20px",
+                paddingInline: "12px",
+                height: "28px",
+                fontSize: "12px",
+              }}
+            >
+              {i18next.t("general:Save")}
+            </Button>
+          </div>
+        </div>
+      </div>
+    );
+  };
 
-  // Edit button component
   const renderEditButton = () => {
-    if (message.author !== "AI" && !isEditing && (disableInput === false || index !== isLastMessage)) {
+    if (message.author !== "AI" && !isEditing && !hideInput && (disableInput === false || index !== isLastMessage)) {
       return (
         <Tooltip title={i18next.t("general:Edit")} arrow={false}>
           <Button
@@ -117,7 +154,6 @@ const MessageEdit = ({
     return null;
   };
 
-  // Return the editing state and render functions
   return {
     isEditing,
     isHovering,
diff --git a/web/src/chat/MessageItem.js b/web/src/chat/MessageItem.js
@@ -42,8 +42,9 @@ const MessageItem = ({
   onToggleRead,
   onEditMessage,
   disableInput,
+  hideInput,
   isReading,
-  isLoadingTTS, // Added new prop for TTS loading state
+  isLoadingTTS,
   readingMessage,
   sendMessage,
   hideThinking,
@@ -154,8 +155,10 @@ const MessageItem = ({
     message,
     isLastMessage,
     disableInput,
+    hideInput,
     index,
     onEditMessage,
+    isDark,
   });
 
   useEffect(() => {
@@ -168,12 +171,8 @@ const MessageItem = ({
   };
 
   const renderMessageContent = () => {
-    if (isEditing && message.author !== "AI") {
-      return renderEditForm();
-    }
-
     if (message.errorText !== "") {
-      const regenerateButton = (
+      const regenerateButton = !hideInput ? (
         <Button
           danger
           type="primary"
@@ -187,7 +186,7 @@ const MessageItem = ({
             ? i18next.t("general:Regenerating...")
             : i18next.t("general:Regenerate")}
         </Button>
-      );
+      ) : null;
       return Setting.isMobile() ? (
         <div>
           <Alert
@@ -197,17 +196,19 @@ const MessageItem = ({
             showIcon
             style={{whiteSpace: "normal", wordWrap: "break-word"}}
           />
-          <Row justify="center" style={{marginTop: 16}}>
-            <Col>{regenerateButton}</Col>
-          </Row>
+          {regenerateButton && (
+            <Row justify="center" style={{marginTop: 16}}>
+              <Col>{regenerateButton}</Col>
+            </Row>
+          )}
         </div>
       ) : (
         <Alert
           message={Setting.getRefinedErrorText(message.errorText)}
           description={message.errorText}
           type="error"
           showIcon
-          action={<div style={{marginLeft: 16}}>{regenerateButton}</div>}
+          action={regenerateButton ? <div style={{marginLeft: 16}}>{regenerateButton}</div> : null}
         />
       );
     }
@@ -335,6 +336,10 @@ const MessageItem = ({
 
     const isUserMessage = message.author !== "AI";
 
+    if (isEditing && isUserMessage) {
+      return renderEditForm();
+    }
+
     return (
       <div style={{
         display: "flex",
@@ -345,7 +350,7 @@ const MessageItem = ({
         {isUserMessage && !isEditing && (
           <Space size="small" style={{opacity: isHovering ? 0.8 : 0, transition: "opacity 0.2s ease-in-out"}}>
             <CopyButton message={message} onCopy={onCopy} />
-            {renderEditButton()}
+            {!hideInput && renderEditButton()}
           </Space>
         )}
 
@@ -370,11 +375,12 @@ const MessageItem = ({
                     onToggleRead={onToggleRead}
                     onEdit={() => setIsHovering(true)}
                     isReading={isReading}
-                    isLoadingTTS={isLoadingTTS} // Pass loading state to MessageActions
+                    isLoadingTTS={isLoadingTTS}
                     readingMessage={readingMessage}
                     account={account}
                     setIsRegenerating={setIsRegenerating}
                     isRegenerating={isRegenerating}
+                    hideInput={hideInput}
                   />
                   {mergedSearchResults.length > 0 && (
                     <Button
@@ -427,13 +433,11 @@ const MessageItem = ({
               padding: "11px 16px",
               backgroundColor: themeColor,
               color: "#fff",
-              minWidth: isEditing ? "300px" : "auto",
             } : {
               borderRadius: "4px 18px 18px 18px",
               padding: "11px 16px",
               backgroundColor: aiBubbleBg,
               border: aiBubbleBorder,
-              minWidth: isEditing ? "300px" : "auto",
             },
           }}
         />
diff --git a/web/src/chat/MessageList.js b/web/src/chat/MessageList.js
@@ -73,6 +73,7 @@ class MessageList extends React.Component {
             onToggleRead={onToggleRead}
             onEditMessage={onEditMessage}
             disableInput={disableInput}
+            hideInput={hideInput}
             isReading={isReading}
             isLoadingTTS={isLoadingTTS}
             readingMessage={readingMessage}

Original file line number	Diff line number	Diff line change
`@@ -69,7 +69,6 @@ func createProviderChat(chatId string, provider Provider) (Chat, error) {`
`69`	`69`	`}`
`70`	`70`	`chat := &Chat{`
`71`	`71`	`Name: chatName,`
`72`		`- Type: "Provider",`
`73`	`72`	`Owner: provider.Owner,`
`74`	`73`	`CreatedTime: util.GetCurrentTime(),`
`75`	`74`	`UpdatedTime: util.GetCurrentTime(),`