feat: close #1615 pin messages to contextual prompts

app/components/chat.module.scss

@@ -279,19 +279,22 @@
   min-width: 0;
 
   &:hover {
-    min-width: 300px;
+    min-width: 330px;
 
     .chat-message-actions {
       height: 40px;
       opacity: 1;
       transform: translateY(0px);
+
+      .chat-message-action-date {
+        opacity: 0.3;
+      }
     }
   }
 
   .chat-message-actions {
     display: flex;
     width: 100%;
-    padding-top: 5px;
     box-sizing: border-box;
     font-size: 12px;
     align-items: flex-end;
@@ -304,7 +307,7 @@
 
   .chat-message-action-date {
     color: var(--black);
-    opacity: 0.3;
+    opacity: 0;
   }
 }
 
@@ -323,8 +326,6 @@
   padding-top: 10px;
   box-sizing: border-box;
   flex-direction: column;
-  border-top-left-radius: 10px;
-  border-top-right-radius: 10px;
   border-top: var(--border-in-light);
   box-shadow: var(--card-shadow);
 }

app/components/chat.tsx

@@ -22,6 +22,7 @@ import ResetIcon from "../icons/reload.svg";
 import BreakIcon from "../icons/break.svg";
 import SettingsIcon from "../icons/chat-settings.svg";
 import DeleteIcon from "../icons/clear.svg";
+import PinIcon from "../icons/pin.svg";
 
 import LightIcon from "../icons/light.svg";
 import DarkIcon from "../icons/dark.svg";
@@ -60,7 +61,7 @@ import Locale from "../locales";
 import { IconButton } from "./button";
 import styles from "./chat.module.scss";
 
-import { ListItem, Modal } from "./ui-lib";
+import { ListItem, Modal, showToast } from "./ui-lib";
 import { useLocation, useNavigate } from "react-router-dom";
 import { LAST_INPUT_KEY, Path, REQUEST_TIMEOUT_MS } from "../constant";
 import { Avatar } from "./emoji";
@@ -696,6 +697,24 @@ export function Chat() {
     inputRef.current?.focus();
   };
 
+  const onPinMessage = (botMessage: ChatMessage) => {
+    if (!botMessage.id) return;
+    const userMessageIndex = findLastUserIndex(botMessage.id);
+    if (!userMessageIndex) return;
+
+    const userMessage = session.messages[userMessageIndex];
+    chatStore.updateCurrentSession((session) =>
+      session.mask.context.push(userMessage, botMessage),
+    );
+
+    showToast(Locale.Chat.Actions.PinToastContent, {
+      text: Locale.Chat.Actions.PinToastAction,
+      onClick: () => {
+        setShowPromptModal(true);
+      },
+    });
+  };
+
   const context: RenderMessage[] = session.mask.hideContext
     ? []
     : session.mask.context.slice();
@@ -922,6 +941,12 @@ export function Chat() {
                                 icon={<ResetIcon />}
                                 onClick={() => onResend(message.id ?? i)}
                               />
+
+                              <ChatAction
+                                text={Locale.Chat.Actions.Pin}
+                                icon={<PinIcon />}
+                                onClick={() => onPinMessage(message)}
+                              />
                             </>
                           )}
                           <ChatAction

app/locales/cn.ts

@@ -25,6 +25,9 @@ const cn = {
       Copy: "复制",
       Stop: "停止",
       Retry: "重试",
+      Pin: "固定",
+      PinToastContent: "已将 2 条对话固定至预设提示词",
+      PinToastAction: "查看",
       Delete: "删除",
     },
     Commands: {

app/locales/en.ts

@@ -26,6 +26,9 @@ const en: LocaleType = {
       Copy: "Copy",
       Stop: "Stop",
       Retry: "Retry",
+      Pin: "Pin",
+      PinToastContent: "Pinned 2 messages to contextual prompts",
+      PinToastAction: "View",
       Delete: "Delete",
     },
     Commands: {