feat(web): add sidebar feedback popover

Co-authored-by: dadachann <185672915+dadachann@users.noreply.github.com>

web/src/app/home/components/home-sidebar/FeedbackPopover.tsx

@@ -0,0 +1,278 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { Camera, ImagePlus, Loader2, Paperclip, Send, X } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { toast } from 'sonner';
+import { Button } from '@/components/ui/button';
+import { Textarea } from '@/components/ui/textarea';
+import { httpClient } from '@/app/infra/http/HttpClient';
+
+const MAX_ATTACHMENTS = 3;
+const MAX_IMAGE_BYTES = 2 * 1024 * 1024;
+
+type FeedbackAttachment = {
+  name: string;
+  mime_type: string;
+  data_url: string;
+};
+
+function bytesFromDataUrl(dataUrl: string): number {
+  const payload = dataUrl.split(',')[1] || '';
+  return Math.ceil((payload.length * 3) / 4);
+}
+
+function readImageFile(file: File): Promise<FeedbackAttachment> {
+  return new Promise((resolve, reject) => {
+    if (!file.type.startsWith('image/')) {
+      reject(new Error('not_image'));
+      return;
+    }
+    if (file.size > MAX_IMAGE_BYTES) {
+      reject(new Error('too_large'));
+      return;
+    }
+    const reader = new FileReader();
+    reader.onload = () => {
+      const dataUrl = String(reader.result || '');
+      if (!dataUrl.startsWith('data:image/')) {
+        reject(new Error('not_image'));
+        return;
+      }
+      resolve({
+        name: file.name || 'pasted-image.png',
+        mime_type: file.type || 'image/png',
+        data_url: dataUrl,
+      });
+    };
+    reader.onerror = () => reject(reader.error || new Error('read_failed'));
+    reader.readAsDataURL(file);
+  });
+}
+
+async function captureScreen(): Promise<FeedbackAttachment> {
+  if (!navigator.mediaDevices?.getDisplayMedia) {
+    throw new Error('unsupported');
+  }
+  const stream = await navigator.mediaDevices.getDisplayMedia({
+    video: true,
+    audio: false,
+  });
+  try {
+    const video = document.createElement('video');
+    video.srcObject = stream;
+    await video.play();
+    await new Promise((resolve) => requestAnimationFrame(resolve));
+    const canvas = document.createElement('canvas');
+    canvas.width = video.videoWidth;
+    canvas.height = video.videoHeight;
+    const ctx = canvas.getContext('2d');
+    if (!ctx) throw new Error('canvas_unavailable');
+    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+    const dataUrl = canvas.toDataURL('image/png');
+    if (bytesFromDataUrl(dataUrl) > MAX_IMAGE_BYTES) {
+      throw new Error('too_large');
+    }
+    return {
+      name: `screenshot-${Date.now()}.png`,
+      mime_type: 'image/png',
+      data_url: dataUrl,
+    };
+  } finally {
+    stream.getTracks().forEach((track) => track.stop());
+  }
+}
+
+export function FeedbackPopoverContent({
+  onSubmitted,
+}: {
+  onSubmitted?: () => void;
+}) {
+  const { t } = useTranslation();
+  const [content, setContent] = useState('');
+  const [attachments, setAttachments] = useState<FeedbackAttachment[]>([]);
+  const [submitting, setSubmitting] = useState(false);
+  const [capturing, setCapturing] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const addFiles = useCallback(
+    async (files: File[]) => {
+      const slots = MAX_ATTACHMENTS - attachments.length;
+      if (slots <= 0) {
+        toast.error(t('feedback.tooManyImages'));
+        return;
+      }
+      const picked = files.slice(0, slots);
+      const next: FeedbackAttachment[] = [];
+      for (const file of picked) {
+        try {
+          next.push(await readImageFile(file));
+        } catch (error) {
+          const msg = error instanceof Error ? error.message : '';
+          toast.error(
+            msg === 'too_large'
+              ? t('feedback.imageTooLarge')
+              : t('feedback.imageOnly'),
+          );
+        }
+      }
+      if (next.length > 0) {
+        setAttachments((prev) => [...prev, ...next].slice(0, MAX_ATTACHMENTS));
+      }
+    },
+    [attachments.length, t],
+  );
+
+  useEffect(() => {
+    const onPaste = (event: ClipboardEvent) => {
+      const files = Array.from(event.clipboardData?.files || []).filter(
+        (file) => file.type.startsWith('image/'),
+      );
+      if (files.length > 0) {
+        event.preventDefault();
+        void addFiles(files);
+      }
+    };
+    window.addEventListener('paste', onPaste);
+    return () => window.removeEventListener('paste', onPaste);
+  }, [addFiles]);
+
+  const handleCapture = async () => {
+    try {
+      if (attachments.length >= MAX_ATTACHMENTS) {
+        toast.error(t('feedback.tooManyImages'));
+        return;
+      }
+      setCapturing(true);
+      const screenshot = await captureScreen();
+      setAttachments((prev) => [...prev, screenshot].slice(0, MAX_ATTACHMENTS));
+    } catch (error) {
+      const msg = error instanceof Error ? error.message : '';
+      toast.error(
+        msg === 'too_large'
+          ? t('feedback.imageTooLarge')
+          : t('feedback.screenshotFailed'),
+      );
+    } finally {
+      setCapturing(false);
+    }
+  };
+
+  const handleSubmit = async () => {
+    const trimmed = content.trim();
+    if (!trimmed) {
+      toast.error(t('feedback.contentRequired'));
+      return;
+    }
+    try {
+      setSubmitting(true);
+      await httpClient.submitFeedback({
+        content: trimmed,
+        attachments,
+        page_url: window.location.href,
+        user_agent: navigator.userAgent,
+      });
+      toast.success(t('feedback.submitSuccess'));
+      setContent('');
+      setAttachments([]);
+      onSubmitted?.();
+    } catch {
+      toast.error(t('feedback.submitFailed'));
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <div className="w-80 space-y-3 p-1" onClick={(e) => e.stopPropagation()}>
+      <div>
+        <div className="text-sm font-medium">{t('feedback.title')}</div>
+        <p className="mt-1 text-xs text-muted-foreground">
+          {t('feedback.description')}
+        </p>
+      </div>
+      <Textarea
+        value={content}
+        onChange={(e) => setContent(e.target.value)}
+        placeholder={t('feedback.placeholder')}
+        maxLength={5000}
+        className="min-h-28 resize-none text-sm"
+      />
+      <div className="flex flex-wrap gap-2">
+        {attachments.map((item, index) => (
+          <div
+            key={`${item.name}-${index}`}
+            className="relative size-16 overflow-hidden rounded-md border"
+          >
+            <img
+              src={item.data_url}
+              alt={item.name}
+              className="h-full w-full object-cover"
+            />
+            <button
+              type="button"
+              onClick={() =>
+                setAttachments((prev) => prev.filter((_, i) => i !== index))
+              }
+              className="absolute right-1 top-1 rounded-full bg-black/60 p-0.5 text-white"
+              aria-label={t('feedback.removeImage')}
+            >
+              <X className="size-3" />
+            </button>
+          </div>
+        ))}
+      </div>
+      <div className="flex items-center justify-between gap-2">
+        <div className="flex gap-2">
+          <input
+            ref={fileInputRef}
+            type="file"
+            accept="image/*"
+            multiple
+            className="hidden"
+            onChange={(e) => {
+              void addFiles(Array.from(e.target.files || []));
+              e.target.value = '';
+            }}
+          />
+          <Button
+            type="button"
+            size="sm"
+            variant="outline"
+            onClick={() => fileInputRef.current?.click()}
+          >
+            <ImagePlus className="mr-1 size-4" />
+            {t('feedback.attachImage')}
+          </Button>
+          <Button
+            type="button"
+            size="sm"
+            variant="outline"
+            onClick={handleCapture}
+            disabled={capturing}
+          >
+            {capturing ? (
+              <Loader2 className="mr-1 size-4 animate-spin" />
+            ) : (
+              <Camera className="mr-1 size-4" />
+            )}
+            {t('feedback.screenshot')}
+          </Button>
+        </div>
+        <span className="flex items-center gap-1 text-xs text-muted-foreground">
+          <Paperclip className="size-3" />
+          {attachments.length}/{MAX_ATTACHMENTS}
+        </span>
+      </div>
+      <Button className="w-full" onClick={handleSubmit} disabled={submitting}>
+        {submitting ? (
+          <Loader2 className="mr-2 size-4 animate-spin" />
+        ) : (
+          <Send className="mr-2 size-4" />
+        )}
+        {t('feedback.submit')}
+      </Button>
+      <p className="text-[11px] leading-relaxed text-muted-foreground">
+        {t('feedback.privacyHint')}
+      </p>
+    </div>
+  );
+}

web/src/app/home/components/home-sidebar/HomeSidebar.tsx

@@ -100,6 +100,7 @@ import {
 } from '@/components/ui/popover';
 import { cn } from '@/lib/utils';
 import { useSidebarData, SidebarEntityItem } from './SidebarDataContext';
+import { FeedbackPopoverContent } from './FeedbackPopover';
 
 // Compare two version strings, returns true if v1 > v2
 function compareVersions(v1: string, v2: string): boolean {
@@ -2039,17 +2040,25 @@ export default function HomeSidebar({
                       <CircleHelp />
                       {t('common.helpDocs')}
                     </DropdownMenuItem>
-                    <DropdownMenuItem
-                      onClick={() => {
-                        window.open(
-                          'https://github.com/langbot-app/LangBot/issues',
-                          '_blank',
-                        );
-                      }}
-                    >
-                      <Lightbulb />
-                      {t('common.featureRequest')}
-                    </DropdownMenuItem>
+                    <Popover>
+                      <PopoverTrigger asChild>
+                        <DropdownMenuItem
+                          onSelect={(event) => event.preventDefault()}
+                        >
+                          <Lightbulb />
+                          {t('common.featureRequest')}
+                        </DropdownMenuItem>
+                      </PopoverTrigger>
+                      <PopoverContent
+                        side={isMobile ? 'bottom' : 'right'}
+                        align="start"
+                        className="w-auto p-3"
+                      >
+                        <FeedbackPopoverContent
+                          onSubmitted={() => setUserMenuOpen(false)}
+                        />
+                      </PopoverContent>
+                    </Popover>
                     <DropdownMenuItem
                       onClick={() => {
                         window.open(

web/src/app/infra/http/BackendClient.ts

@@ -1332,6 +1332,19 @@ export class BackendClient extends BaseHttpClient {
     return this.post('/api/v1/survey/dismiss', { survey_id: surveyId });
   }
 
+  public submitFeedback(data: {
+    content: string;
+    page_url?: string;
+    user_agent?: string;
+    attachments?: Array<{
+      name: string;
+      mime_type: string;
+      data_url: string;
+    }>;
+  }): Promise<object> {
+    return this.post('/api/v1/survey/feedback', data);
+  }
+
   // ============ Skills API ============
 
   public getSkills(): Promise<ApiRespSkills> {

web/src/i18n/locales/en-US.ts

@@ -35,7 +35,7 @@ const enUS = {
     emptyPassword: 'Please enter your password',
     language: 'Language',
     helpDocs: 'Get Help',
-    featureRequest: 'Feature Request',
+    featureRequest: 'Feedback',
     starOnGitHub: 'Star on GitHub',
     joinDiscord: 'Join our Discord',
     create: 'Create',
@@ -1362,6 +1362,22 @@ const enUS = {
       inaccurateReasons: 'Inaccurate Reasons',
       platform: 'Platform',
       exportFeedback: 'Export Feedback',
+      description:
+        'Tell us what went wrong or what could be better. Instance UUID, login account, and page info are included for diagnosis.',
+      placeholder: 'Describe your suggestion, issue, or reproduction steps...',
+      attachImage: 'Add image',
+      screenshot: 'Screenshot',
+      submit: 'Submit feedback',
+      privacyHint:
+        'Do not include secrets, passwords, or private chat content.',
+      contentRequired: 'Please enter feedback first',
+      imageOnly: 'Only image attachments are supported',
+      imageTooLarge: 'Each image must be under 2MB',
+      tooManyImages: 'You can attach up to 3 images',
+      screenshotFailed: 'Screenshot failed. Try pasting or uploading an image.',
+      submitSuccess: 'Feedback submitted. Thanks!',
+      submitFailed: 'Failed to submit feedback. Please try again later.',
+      removeImage: 'Remove image',
     },
     queries: {
       title: 'Queries',

web/src/i18n/locales/ja-JP.ts

@@ -36,7 +36,7 @@ const jaJP = {
     emptyPassword: 'パスワードを入力してください',
     language: '言語',
     helpDocs: 'ヘルプドキュメント',
-    featureRequest: '機能リクエスト',
+    featureRequest: 'フィードバック',
     starOnGitHub: 'GitHubでStarする',
     joinDiscord: 'Discord に参加',
     create: '作成',
@@ -1368,6 +1368,22 @@ const jaJP = {
       inaccurateReasons: '不正確な理由',
       platform: 'プラットフォーム',
       exportFeedback: 'フィードバックをエクスポート',
+      description:
+        '問題点や改善案を教えてください。診断のため、インスタンス UUID、ログインアカウント、ページ情報も送信されます。',
+      placeholder: '提案、問題、再現手順を入力してください...',
+      attachImage: '画像を追加',
+      screenshot: 'スクリーンショット',
+      submit: '送信',
+      privacyHint: '秘密鍵、パスワード、個人的な会話内容は含めないでください。',
+      contentRequired: 'フィードバック内容を入力してください',
+      imageOnly: '画像のみ添付できます',
+      imageTooLarge: '画像は 1 枚 2MB 未満にしてください',
+      tooManyImages: '画像は最大 3 枚まで添付できます',
+      screenshotFailed:
+        'スクリーンショットに失敗しました。貼り付けまたはアップロードを試してください。',
+      submitSuccess: 'フィードバックを送信しました。ありがとうございます！',
+      submitFailed: '送信に失敗しました。後でもう一度お試しください。',
+      removeImage: '画像を削除',
     },
     messageDetails: {
       noData: 'このクエリにはLLM呼び出しやエラーがありません',

web/src/i18n/locales/zh-Hans.ts

@@ -34,7 +34,7 @@ const zhHans = {
     emptyPassword: '请输入密码',
     language: '语言',
     helpDocs: '帮助文档',
-    featureRequest: '需求建议',
+    featureRequest: '建议反馈',
     starOnGitHub: '在 GitHub 上 Star',
     joinDiscord: '加入 Discord 社区',
     create: '创建',
@@ -1301,6 +1301,21 @@ const zhHans = {
       inaccurateReasons: '不准确原因',
       platform: '平台',
       exportFeedback: '导出反馈',
+      description:
+        '告诉我们遇到的问题或想要的改进。提交时会附带实例 UUID、登录账号和当前页面信息，方便定位。',
+      placeholder: '请描述你的建议、问题或复现步骤...',
+      attachImage: '添加图片',
+      screenshot: '截图',
+      submit: '提交反馈',
+      privacyHint: '请勿提交敏感密钥、密码或私人聊天内容。',
+      contentRequired: '请先填写反馈内容',
+      imageOnly: '仅支持图片附件',
+      imageTooLarge: '单张图片不能超过 2MB',
+      tooManyImages: '最多添加 3 张图片',
+      screenshotFailed: '截图失败，请尝试粘贴或上传图片',
+      submitSuccess: '反馈已提交，感谢！',
+      submitFailed: '反馈提交失败，请稍后重试',
+      removeImage: '移除图片',
     },
     queries: {
       title: '查询记录',