(Feature) Vercel AI SDK (#2024)

2024-11-19 23:53:58 +05:30
parent a02597ed59
commit 13374a12e9
70 changed files with 4074 additions and 0 deletions
--- a/examples/vercel-ai-sdk-chat-app/src/components/header.tsx
+++ b/examples/vercel-ai-sdk-chat-app/src/components/header.tsx
@@ -0,0 +1,81 @@
+import { Button } from "@/components/ui/button";
+import { ChevronRight, X, RefreshCcw, Settings } from "lucide-react";
+import { Dispatch, SetStateAction, useContext, useEffect, useState } from "react";
+import GlobalContext from "../contexts/GlobalContext";
+import { Input } from "./ui/input";
+
+const Header = (props: {
+  setIsSettingsOpen: Dispatch<SetStateAction<boolean>>;
+}) => {
+  const { setIsSettingsOpen } = props;
+  const { selectUserHandler, clearUserHandler, selectedUser, clearConfiguration } = useContext(GlobalContext);
+  const [userId, setUserId] = useState<string>("");
+
+  const handleSelectUser = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setUserId(e.target.value);
+  };
+
+  const handleClearUser = () => {
+    clearUserHandler();
+    setUserId("");
+  };
+
+  const handleSubmit = () => {
+    selectUserHandler(userId);
+  };
+
+  // New function to handle key down events
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') {
+      e.preventDefault(); // Prevent form submission if it's in a form
+      handleSubmit();
+    }
+  };
+
+  useEffect(() => {
+    if (selectedUser) {
+      setUserId(selectedUser);
+    }
+  }, [selectedUser]);
+
+  return (
+    <>
+      <header className="border-b p-4 flex items-center justify-between">
+        <div className="flex items-center space-x-2">
+          <span className="text-xl font-semibold">Mem0 Assistant</span>
+        </div>
+        <div className="flex items-center space-x-2 text-sm">
+          <div className="flex">
+            <Input 
+              placeholder="UserId" 
+              className="w-full rounded-3xl pr-6 pl-4" 
+              value={userId}
+              onChange={handleSelectUser} 
+              onKeyDown={handleKeyDown} // Attach the key down handler here
+            />
+            <Button variant="ghost" size="icon" onClick={handleClearUser} className="relative hover:bg-transparent hover:text-neutral-400 right-8">
+              <X className="h-4 w-4" />
+            </Button>
+            <Button variant="ghost" size="icon" onClick={handleSubmit} className="relative right-6">
+              <ChevronRight className="h-4 w-4" />
+            </Button>
+          </div>
+          <div className="flex items-center space-x-2">
+            <Button variant="ghost" size="icon" onClick={clearConfiguration}>
+              <RefreshCcw className="h-4 w-4" />
+            </Button>
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={() => setIsSettingsOpen(true)}
+            >
+              <Settings className="h-4 w-4" />
+            </Button>
+          </div>
+        </div>
+      </header>
+    </>
+  );
+};
+
+export default Header;