Add GenAI Backend Streaming and Chat (#22152)

* Add basic chat page with entry * Add chat history * processing * Add markdown * Improvements * Adjust timing format * Reduce fields in response * More time parsing improvements * Show tool calls separately from message * Add title * Improve UI handling * Support streaming * Full streaming support * Fix tool calling * Add copy button * Improvements to UI * Improve default behavior * Implement message editing * Add sub label to event tool filtering * Cleanup * Cleanup UI and prompt * Cleanup UI bubbles * Fix loading * Add support for markdown tables * Add thumbnail images to object results * Add a starting state for chat * Clenaup
2026-11-01 11:20:32 +03:00 · 2026-02-27 09:07:30 -07:00
parent e7250f24cb
commit fa1f9a1fa4
20 changed files with 3097 additions and 291 deletions
@@ -0,0 +1,89 @@
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { FaArrowUpLong } from "react-icons/fa6";
+import { useTranslation } from "react-i18next";
+import { useState } from "react";
+import type { StartingRequest } from "@/types/chat";
+
+type ChatStartingStateProps = {
+  onSendMessage: (message: string) => void;
+};
+
+export function ChatStartingState({ onSendMessage }: ChatStartingStateProps) {
+  const { t } = useTranslation(["views/chat"]);
+  const [input, setInput] = useState("");
+
+  const defaultRequests: StartingRequest[] = [
+    {
+      label: t("starting_requests.show_recent_events"),
+      prompt: t("starting_requests_prompts.show_recent_events"),
+    },
+    {
+      label: t("starting_requests.show_camera_status"),
+      prompt: t("starting_requests_prompts.show_camera_status"),
+    },
+  ];
+
+  const handleRequestClick = (prompt: string) => {
+    onSendMessage(prompt);
+  };
+
+  const handleSubmit = () => {
+    const text = input.trim();
+    if (!text) return;
+    onSendMessage(text);
+    setInput("");
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleSubmit();
+    }
+  };
+
+  return (
+    <div className="flex size-full flex-col items-center justify-center gap-6 p-8">
+      <div className="flex flex-col items-center gap-2">
+        <h1 className="text-4xl font-bold text-foreground">{t("title")}</h1>
+        <p className="text-muted-foreground">{t("subtitle")}</p>
+      </div>
+
+      <div className="flex w-full max-w-2xl flex-col items-center gap-4">
+        <p className="text-center text-sm text-muted-foreground">
+          {t("suggested_requests")}
+        </p>
+        <div className="flex w-full flex-wrap justify-center gap-2">
+          {defaultRequests.map((request, idx) => (
+            <Button
+              key={idx}
+              variant="outline"
+              className="max-w-sm text-sm"
+              onClick={() => handleRequestClick(request.prompt)}
+            >
+              {request.label}
+            </Button>
+          ))}
+        </div>
+      </div>
+
+      <div className="flex w-full max-w-2xl flex-row items-center gap-2 rounded-xl bg-secondary p-4">
+        <Input
+          className="h-12 w-full flex-1 border-transparent bg-transparent text-base shadow-none focus-visible:ring-0 dark:bg-transparent"
+          placeholder={t("placeholder")}
+          value={input}
+          onChange={(e) => setInput(e.target.value)}
+          onKeyDown={handleKeyDown}
+        />
+        <Button
+          variant="select"
+          className="size-10 shrink-0 rounded-full"
+          disabled={!input.trim()}
+          onClick={handleSubmit}
+        >
+          <FaArrowUpLong size="18" />
+        </Button>
+      </div>
+    </div>
+  );
+}