feat: add suggestions

frontend/src/components/workspace/input-box.tsx

@@ -6,13 +6,13 @@ import {
   GraduationCapIcon,
   LightbulbIcon,
   PaperclipIcon,
+  PlusIcon,
   ZapIcon,
 } from "lucide-react";
 import { useCallback, useMemo, useState, type ComponentProps } from "react";
 
 import {
   PromptInput,
-  PromptInputActionAddAttachments,
   PromptInputActionMenu,
   PromptInputActionMenuContent,
   PromptInputActionMenuItem,
@@ -26,11 +26,13 @@ import {
   PromptInputTextarea,
   PromptInputTools,
   usePromptInputAttachments,
+  usePromptInputController,
   type PromptInputMessage,
 } from "@/components/ai-elements/prompt-input";
 import {
   DropdownMenuGroup,
   DropdownMenuLabel,
+  DropdownMenuSeparator,
 } from "@/components/ui/dropdown-menu";
 import { useI18n } from "@/core/i18n/hooks";
 import { useModels } from "@/core/models/hooks";
@@ -46,6 +48,13 @@ import {
   ModelSelectorName,
   ModelSelectorTrigger,
 } from "../ai-elements/model-selector";
+import { Suggestion, Suggestions } from "../ai-elements/suggestion";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "../ui/dropdown-menu";
 
 import { Tooltip } from "./tooltip";
 
@@ -338,6 +347,11 @@ export function InputBox({
           />
         </PromptInputTools>
       </PromptInputFooter>
+      {isNewThread && (
+        <div className="absolute right-0 -bottom-12 left-0 z-0 flex items-center justify-center">
+          <SuggestionList />
+        </div>
+      )}
       {!isNewThread && (
         <div className="bg-background absolute right-0 -bottom-[17px] left-0 z-0 h-4"></div>
       )}
@@ -345,6 +359,67 @@ export function InputBox({
   );
 }
 
+function SuggestionList() {
+  const { t } = useI18n();
+  const { textInput } = usePromptInputController();
+  const handleSuggestionClick = useCallback(
+    (prompt: string | undefined) => {
+      if (!prompt) return;
+      textInput.setInput(prompt);
+      setTimeout(() => {
+        const textarea = document.querySelector<HTMLTextAreaElement>(
+          "textarea[name='message']",
+        );
+        if (textarea) {
+          const selStart = prompt.indexOf("[");
+          const selEnd = prompt.indexOf("]");
+          if (selStart !== -1 && selEnd !== -1) {
+            textarea.setSelectionRange(selStart, selEnd + 1);
+            textarea.focus();
+          }
+        }
+      }, 500);
+    },
+    [textInput],
+  );
+  return (
+    <Suggestions className="w-fit">
+      {t.inputBox.suggestions.map((suggestion) => (
+        <Suggestion
+          key={suggestion.suggestion}
+          icon={suggestion.icon}
+          suggestion={suggestion.suggestion}
+          onClick={() => handleSuggestionClick(suggestion.prompt)}
+        />
+      ))}
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Suggestion icon={PlusIcon} suggestion={t.common.create} />
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="start">
+          <DropdownMenuGroup>
+            {t.inputBox.suggestionsCreate.map((suggestion, index) =>
+              "type" in suggestion && suggestion.type === "separator" ? (
+                <DropdownMenuSeparator key={index} />
+              ) : (
+                !("type" in suggestion) && (
+                  <DropdownMenuItem
+                    key={suggestion.suggestion}
+                    onClick={() => handleSuggestionClick(suggestion.prompt)}
+                  >
+                    {suggestion.icon && <suggestion.icon className="size-4" />}
+                    {suggestion.suggestion}
+                  </DropdownMenuItem>
+                )
+              ),
+            )}
+          </DropdownMenuGroup>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </Suggestions>
+  );
+}
+
 function AddAttachmentsButton({ className }: { className?: string }) {
   const { t } = useI18n();
   const attachments = usePromptInputAttachments();