Merge branch 'feat/2.6.0-beta4' into feat/2.6.0-beta4-cofco

Author: zgqgit

src/frontend/client/src/components/Chat/MessageFeedbackButtons.tsx

@@ -2,19 +2,22 @@
  * Shared 点赞/点踩 (thumbs up / down) feedback control.
  *
  * Reused by every AI answer surface (daily chat, knowledge-space 知源, channel
- * subscription via AiMessageBubble; linsight task mode via ResultPanel). The
- * button visuals match the appChat MessageButtons / AiMessageBubble action row
- * (size-6 hit area, 14px bisheng-icons Outlined glyph, #818181 idle /
- * brand-500 active) so the whole action row reads as one consistent set.
+ * subscription via AiMessageBubble; linsight task mode via ResultPanel; appChat
+ * workflow/assistant via MessageButtons). The button visuals match the
+ * AiMessageBubble action row (size-6 hit area, 14px bisheng-icons Outlined
+ * glyph, #818181 idle / brand-500 active) so the whole action row reads as one
+ * consistent set.
  *
- * State is optimistic-local: the parent injects the persistence via `onLike`
- * (thumbs verdict) and `onDislikeComment` (reason text). `liked` seeds the
- * initial highlight and re-syncs when history reload delivers the stored value.
+ * Dislike is deferred: clicking thumbs-down only opens the reason dialog
+ * (shared shell: ui/CommentDialog, which resets the draft on open) —
+ * nothing is persisted or highlighted until the user hits submit (the comment
+ * itself is optional). Cancel/close discards the dislike entirely. Thumbs-up
+ * and un-toggling persist immediately. `liked` seeds the initial highlight and
+ * re-syncs when history reload delivers the stored value.
  */
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useState } from "react";
 import { Outlined } from "bisheng-icons";
-import { Button, Dialog, DialogContent, DialogHeader, DialogTitle, Textarea } from "~/components";
-import { useToastContext } from "~/Providers";
+import { CommentDialog } from "~/components";
 import { useLocalize } from "~/hooks";
 import { cn } from "~/utils";
 
@@ -27,9 +30,9 @@ const ACTION_BTN =
 interface MessageFeedbackButtonsProps {
     /** Initial / persisted verdict: 0 none, 1 up, 2 down. */
     liked?: number;
-    /** Persist the new verdict (0/1/2). Called on every toggle. */
+    /** Persist the new verdict (0/1/2). Dislike is only sent on dialog submit. */
     onLike: (liked: number) => void;
-    /** Persist the free-text reason when the user submits a dislike comment. */
+    /** Persist the free-text reason when the user submits a non-empty dislike comment. */
     onDislikeComment?: (comment: string) => void;
     className?: string;
 }
@@ -41,41 +44,31 @@ export function MessageFeedbackButtons({
     className,
 }: MessageFeedbackButtonsProps) {
     const localize = useLocalize();
-    const { showToast } = useToastContext();
     const [state, setState] = useState<ThumbsState>(liked as ThumbsState);
     const [commentOpen, setCommentOpen] = useState(false);
-    const [commentError, setCommentError] = useState(false);
-    const commentRef = useRef<HTMLTextAreaElement | null>(null);
 
     // Re-sync when the persisted value arrives/changes (e.g. history reload).
     useEffect(() => {
         setState(liked as ThumbsState);
     }, [liked]);
 
     const handleClick = (type: ThumbsState) => {
-        setState((prev) => {
-            const next: ThumbsState = prev === type ? 0 : type;
-            onLike(next);
-            // Prompt for a reason only when newly disliking.
-            if (next === 2 && onDislikeComment) {
-                setCommentError(false);
-                setCommentOpen(true);
-                if (commentRef.current) commentRef.current.value = "";
-            }
-            return next;
-        });
-    };
-
-    const handleSubmitComment = () => {
-        const value = commentRef.current?.value?.trim();
-        if (!value) {
-            showToast?.({ message: localize("com_feedback_required"), status: "warning" });
-            setCommentError(true);
+        // Newly disliking with a reason dialog available: defer — no persist,
+        // no highlight until the dialog is submitted.
+        if (type === 2 && state !== 2 && onDislikeComment) {
+            setCommentOpen(true);
             return;
         }
-        onDislikeComment?.(value);
+        const next: ThumbsState = state === type ? 0 : type;
+        setState(next);
+        onLike(next);
+    };
+
+    const handleSubmitComment = (comment: string) => {
+        setState(2);
+        onLike(2);
+        if (comment) onDislikeComment?.(comment);
         setCommentOpen(false);
-        setCommentError(false);
     };
 
     return (
@@ -110,28 +103,13 @@ export function MessageFeedbackButtons({
             </div>
 
             {onDislikeComment && (
-                <Dialog open={commentOpen} onOpenChange={setCommentOpen}>
-                    <DialogContent className="sm:max-w-[425px]">
-                        <DialogHeader>
-                            <DialogTitle>{localize("com_feedback_title")}</DialogTitle>
-                        </DialogHeader>
-                        <div>
-                            <Textarea
-                                ref={commentRef}
-                                maxLength={9999}
-                                className={cn("textarea", commentError && "border border-red-400")}
-                            />
-                            <div className="flex justify-end gap-4 mt-4">
-                                <Button className="px-11" variant="outline" onClick={() => setCommentOpen(false)}>
-                                    {localize("com_ui_cancel")}
-                                </Button>
-                                <Button className="px-11" onClick={handleSubmitComment}>
-                                    {localize("com_ui_submit")}
-                                </Button>
-                            </div>
-                        </div>
-                    </DialogContent>
-                </Dialog>
+                <CommentDialog
+                    open={commentOpen}
+                    onOpenChange={setCommentOpen}
+                    title={localize("com_feedback_title")}
+                    placeholder={localize("com_feedback_placeholder")}
+                    onSubmit={handleSubmitComment}
+                />
             )}
         </>
     );

src/frontend/client/src/components/Nav/Nav.tsx

@@ -174,7 +174,7 @@ const Nav = ({
                 <nav
                   id="chat-history-nav"
                   aria-label={localize('com_ui_chat_history')}
-                  className="flex h-full min-h-0 w-full flex-col gap-0 pt-5 px-3 max-[767px]:gap-0 max-[767px]:p-0"
+                  className="flex h-full min-h-0 w-full flex-col gap-0 pt-4 px-3 max-[767px]:gap-0 max-[767px]:p-0"
                 >
                   {/* New chat header and buttons */}
                   <NewChat

src/frontend/client/src/components/ui/CommentDialog.tsx

@@ -0,0 +1,93 @@
+/**
+ * Shared "title + free-text textarea + cancel/submit" dialog.
+ *
+ * Extracted from MessageFeedbackButtons' dislike-reason dialog so other
+ * surfaces (e.g. menu-permission apply on MenuUnavailablePage) reuse the
+ * exact same shell. Anatomy: the container carries no padding; header /
+ * body / footer each own px-5 (20px). Mobile: width calc(100%-48px),
+ * centered title, full-width button pair.
+ *
+ * The textarea is uncontrolled and reset on every open, so every close
+ * path (cancel / ESC / overlay click) discards the draft. Submitting does
+ * NOT auto-close — the caller owns `open` and closes when its side effect
+ * settles (sync callers close immediately; async ones close on success).
+ */
+import { useEffect, useRef } from 'react';
+import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from './Dialog';
+import { Textarea } from './Textarea';
+import { Button } from './Button';
+import { useLocalize } from '~/hooks';
+
+interface CommentDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  title: string;
+  placeholder?: string;
+  /** Disables the submit button and swaps its label while an async submit runs. */
+  submitting?: boolean;
+  /** Submit-button label while `submitting` (defaults to the normal submit label). */
+  submittingText?: string;
+  /** Receives the trimmed textarea content ('' when left blank). */
+  onSubmit: (comment: string) => void;
+}
+
+export function CommentDialog({
+  open,
+  onOpenChange,
+  title,
+  placeholder,
+  submitting = false,
+  submittingText,
+  onSubmit,
+}: CommentDialogProps) {
+  const localize = useLocalize();
+  const commentRef = useRef<HTMLTextAreaElement | null>(null);
+
+  // Reset the draft on every open so all close paths discard it alike.
+  useEffect(() => {
+    if (open && commentRef.current) {
+      commentRef.current.value = '';
+    }
+  }, [open]);
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      {/* Don't auto-focus the textarea on open — no focus ring until the user clicks in.
+          Anatomy: container carries no padding; header / body / footer each own px-5 (20px). */}
+      <DialogContent
+        className="w-[calc(100%-48px)] sm:w-full sm:max-w-[425px] rounded-xl sm:rounded-xl p-0 gap-0"
+        onOpenAutoFocus={(e) => e.preventDefault()}
+        close={false}
+      >
+        <DialogHeader className="px-5 py-4 text-center sm:text-left">
+          <DialogTitle className="text-base leading-6 text-[#212121]">{title}</DialogTitle>
+        </DialogHeader>
+        <div className="px-5">
+          {/* Focus chrome mirrors the app-center search box (ExpandableSearchField). */}
+          <Textarea
+            ref={commentRef}
+            maxLength={9999}
+            placeholder={placeholder}
+            className="bg-white border-[#E5E6EB] shadow-none transition-[border-color,box-shadow] duration-200 focus:border-[#DDDDDD] focus:shadow-[0_0_0_2px_#F1F5F9] placeholder:text-sm placeholder:text-[#999]"
+          />
+        </div>
+        <DialogFooter className="flex-row justify-end gap-3 space-x-0 sm:space-x-0 px-5 py-4">
+          <Button
+            className="h-8 px-4 rounded-md text-sm font-normal flex-1 sm:flex-none"
+            variant="outline"
+            onClick={() => onOpenChange(false)}
+          >
+            {localize('com_ui_cancel')}
+          </Button>
+          <Button
+            className="h-8 px-4 rounded-md text-sm font-normal flex-1 sm:flex-none"
+            disabled={submitting}
+            onClick={() => onSubmit(commentRef.current?.value?.trim() ?? '')}
+          >
+            {submitting ? (submittingText ?? localize('com_ui_submit')) : localize('com_ui_submit')}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

src/frontend/client/src/components/ui/index.ts

@@ -2,6 +2,7 @@ export * from './AlertDialog';
 export * from './Breadcrumb';
 export * from './Button';
 export * from './Checkbox';
+export * from './CommentDialog';
 export * from './DataTableColumnHeader';
 export * from './Dialog';
 export * from './ExpandableSearchField';

src/frontend/client/src/locales/en/translation.json

@@ -331,7 +331,7 @@
   "com_error_moderation": "It appears that the content submitted has been flagged by our moderation system for not aligning with our community guidelines. We're unable to proceed with this specific topic. If you have any other questions or topics you'd like to explore, please edit your message, or create a new conversation.",
   "com_error_no_base_url": "No base URL found. Please provide one and try again.",
   "com_error_no_user_key": "No key found. Please provide a key and try again.",
-  "com_feedback_required": "Feedback cannot be empty",
+  "com_feedback_placeholder": "Share your suggestions — we'll keep improving (optional)",
   "com_feedback_title": "Feedback",
   "com_file_content_exceed_tokens": "File content exceeds 30k tokens",
   "com_file_current_empty": "Current file is empty",

src/frontend/client/src/locales/ja/translation.json

@@ -317,7 +317,7 @@
   "com_error_moderation": "申し訳ありません。送信内容がコミュニティガイドラインに抵触したため、このトピックについては続行できません。他の質問や話題があれば、メッセージを編集するか新しい会話を開始してください。",
   "com_error_no_base_url": "ベース URL が見つかりません。指定してから再試行してください。",
   "com_error_no_user_key": "キーが見つかりません。キーを提供して再試行してください。",
-  "com_feedback_required": "フィードバックは空にできません",
+  "com_feedback_placeholder": "ご意見をお聞かせください。今後の改善に活かします（任意）",
   "com_feedback_title": "フィードバック",
   "com_file_content_exceed_tokens": "ファイル内容が 3 万トークンを超えています",
   "com_file_current_empty": "現在のファイルは空です",

src/frontend/client/src/locales/zh-Hans/translation.json

@@ -320,7 +320,7 @@
   "com_error_moderation": "很抱歉，您提交的内容被我们的审核系统标记为不符合社区指引。我们无法就此特定主题继续交流。如果您有任何其他问题或想探讨的话题，请编辑您的消息或开启新的对话。",
   "com_error_no_base_url": "未找到基础 URL，请提供一个后重试。",
   "com_error_no_user_key": "没有找到密钥。请提供密钥后重试。",
-  "com_feedback_required": "反馈信息不能为空",
+  "com_feedback_placeholder": "欢迎留下你的建议，我们会持续改进（选填）",
   "com_feedback_title": "反馈",
   "com_file_content_exceed_tokens": "文件内容超出3万token",
   "com_file_current_empty": "当前文件为空",

src/frontend/client/src/pages/MenuUnavailablePage.tsx

@@ -6,6 +6,7 @@ import { NotificationSeverity } from '~/common';
 import { useAuthContext, useLocalize } from '~/hooks';
 import { WorkbenchEmptyIllustration } from '~/components/workbench/WorkbenchEmptyIllustration';
 import { Button } from '~/components/ui/Button';
+import { CommentDialog } from '~/components/ui/CommentDialog';
 
 const MENU_LABEL_KEYS: Record<string, string> = {
   home: 'com_nav_home',
@@ -49,7 +50,6 @@ export default function MenuUnavailablePage() {
   const menuName = pluginId ? localize((MENU_LABEL_KEYS[pluginId] || pluginId) as any) : '';
 
   const [showDialog, setShowDialog] = useState(false);
-  const [reason, setReason] = useState('');
   const [submitting, setSubmitting] = useState(false);
   const [applied, setApplied] = useState(false);
 
@@ -67,14 +67,14 @@ export default function MenuUnavailablePage() {
     return () => { cancelled = true; };
   }, [canApply, pluginId]);
 
-  const handleSubmit = async () => {
+  const handleSubmit = async (reason: string) => {
     if (!canApply || !pluginId || submitting) return;
     setSubmitting(true);
     try {
       await applyMenuAccessApi({
         menu_key: pluginId,
         menu_name: menuName || pluginId,
-        reason: reason.trim() || undefined,
+        reason: reason || undefined,
       });
       setApplied(true);
       setShowDialog(false);
@@ -121,43 +121,16 @@ export default function MenuUnavailablePage() {
         </Button>
       )}
 
-      {/* Apply reason dialog */}
-      {showDialog && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 px-4">
-          <div className="w-full max-w-sm rounded-2xl bg-white p-6 shadow-xl">
-            <h3 className="mb-4 text-base font-semibold text-gray-900">
-              {localize('com_menu_unavailable_apply_button')}
-            </h3>
-            <label className="mb-1 block text-sm text-gray-600">
-              {localize('com_menu_unavailable_reason_label')}
-            </label>
-            <textarea
-              value={reason}
-              onChange={(e) => setReason(e.target.value)}
-              rows={3}
-              placeholder={localize('com_menu_unavailable_reason_placeholder') as string}
-              className="mb-4 w-full resize-none rounded-lg border border-gray-200 px-3 py-2 text-sm text-gray-800 outline-none focus:border-blue-500"
-            />
-            <div className="flex justify-end gap-3">
-              <button
-                type="button"
-                onClick={() => { setShowDialog(false); setReason(''); }}
-                className="rounded-lg border border-gray-200 px-4 py-2 text-sm text-gray-700 hover:bg-gray-50"
-              >
-                {localize('com_ui_cancel')}
-              </button>
-              <button
-                type="button"
-                disabled={submitting}
-                onClick={() => void handleSubmit()}
-                className="rounded-lg bg-blue-500 px-4 py-2 text-sm text-white hover:bg-blue-700 disabled:opacity-60 btn-brand-primary"
-              >
-                {submitting ? localize('com_menu_unavailable_apply_submitting') : localize('com_ui_submit')}
-              </button>
-            </div>
-          </div>
-        </div>
-      )}
+      {/* Apply reason dialog — shared shell with the message-feedback dialog. */}
+      <CommentDialog
+        open={showDialog}
+        onOpenChange={(open) => { if (!submitting) setShowDialog(open); }}
+        title={localize('com_menu_unavailable_apply_button')}
+        placeholder={localize('com_menu_unavailable_reason_placeholder') as string}
+        submitting={submitting}
+        submittingText={localize('com_menu_unavailable_apply_submitting')}
+        onSubmit={(reason) => void handleSubmit(reason)}
+      />
     </div>
   );
 }

src/frontend/client/src/pages/_gallery/GalleryApp.tsx

@@ -14,6 +14,7 @@ import { OverviewSection } from './sections/OverviewSection';
 import { ModalSection } from './sections/ModalSection';
 import { ConfirmDialogSection } from './sections/ConfirmDialogSection';
 import { ButtonSection } from './sections/ButtonSection';
+import { FeedbackSection } from './sections/FeedbackSection';
 
 interface NavItem {
   id: string;
@@ -26,6 +27,7 @@ const NAV: NavItem[] = [
   { id: 'modal', label: 'Modal 弹窗', status: 'wip' },
   { id: 'confirm', label: '二次确认弹窗', status: 'wip' },
   { id: 'button', label: 'Button 按钮', status: 'todo' },
+  { id: 'feedback', label: '点赞点踩反馈', status: 'done' },
 ];
 
 const STATUS_DOT: Record<NonNullable<NavItem['status']>, string> = {
@@ -81,6 +83,7 @@ export default function GalleryApp() {
           <ModalSection />
           <ConfirmDialogSection />
           <ButtonSection />
+          <FeedbackSection />
         </div>
       </main>
     </div>