Add ChatQuickReplies pill row component

web/src/components/chat/ChatQuickReplies.tsx

@@ -0,0 +1,49 @@
+import { useTranslation } from "react-i18next";
+import { Button } from "@/components/ui/button";
+
+type QuickReply = { labelKey: string; textKey: string };
+
+const REPLIES: QuickReply[] = [
+  {
+    labelKey: "quick_reply_find_similar",
+    textKey: "quick_reply_find_similar_text",
+  },
+  {
+    labelKey: "quick_reply_tell_me_more",
+    textKey: "quick_reply_tell_me_more_text",
+  },
+  { labelKey: "quick_reply_when_else", textKey: "quick_reply_when_else_text" },
+];
+
+type ChatQuickRepliesProps = {
+  onSend: (text: string) => void;
+  disabled?: boolean;
+};
+
+/**
+ * Row of pill buttons shown in the composer while an attachment is pending.
+ * Clicking a pill immediately calls onSend with the canned text.
+ */
+export function ChatQuickReplies({
+  onSend,
+  disabled = false,
+}: ChatQuickRepliesProps) {
+  const { t } = useTranslation(["views/chat"]);
+
+  return (
+    <div className="flex w-full flex-wrap gap-2">
+      {REPLIES.map((reply) => (
+        <Button
+          key={reply.labelKey}
+          variant="outline"
+          size="sm"
+          className="h-7 rounded-full px-3 text-xs"
+          disabled={disabled}
+          onClick={() => onSend(t(reply.textKey))}
+        >
+          {t(reply.labelKey)}
+        </Button>
+      ))}
+    </div>
+  );
+}