feat(app): remove backend

src/components/MessageInputActions/Attach.tsx

@@ -0,0 +1,185 @@
+import { cn } from '@/lib/utils';
+import {
+  Popover,
+  PopoverButton,
+  PopoverPanel,
+  Transition,
+} from '@headlessui/react';
+import { CopyPlus, File, LoaderCircle, Plus, Trash } from 'lucide-react';
+import { Fragment, useRef, useState } from 'react';
+import { File as FileType } from '../ChatWindow';
+
+const Attach = ({
+  fileIds,
+  setFileIds,
+  showText,
+  files,
+  setFiles,
+}: {
+  fileIds: string[];
+  setFileIds: (fileIds: string[]) => void;
+  showText?: boolean;
+  files: FileType[];
+  setFiles: (files: FileType[]) => void;
+}) => {
+  const [loading, setLoading] = useState(false);
+  const fileInputRef = useRef<any>();
+
+  const handleChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    setLoading(true);
+    const data = new FormData();
+
+    for (let i = 0; i < e.target.files!.length; i++) {
+      data.append('files', e.target.files![i]);
+    }
+
+    const embeddingModelProvider = localStorage.getItem(
+      'embeddingModelProvider',
+    );
+    const embeddingModel = localStorage.getItem('embeddingModel');
+
+    data.append('embedding_model_provider', embeddingModelProvider!);
+    data.append('embedding_model', embeddingModel!);
+
+    const res = await fetch(`/api/uploads`, {
+      method: 'POST',
+      body: data,
+    });
+
+    const resData = await res.json();
+
+    setFiles([...files, ...resData.files]);
+    setFileIds([...fileIds, ...resData.files.map((file: any) => file.fileId)]);
+    setLoading(false);
+  };
+
+  return loading ? (
+    <div className="flex flex-row items-center justify-between space-x-1">
+      <LoaderCircle size={18} className="text-sky-400 animate-spin" />
+      <p className="text-sky-400 inline whitespace-nowrap text-xs font-medium">
+        Uploading..
+      </p>
+    </div>
+  ) : files.length > 0 ? (
+    <Popover className="relative w-full max-w-[15rem] md:max-w-md lg:max-w-lg">
+      <PopoverButton
+        type="button"
+        className={cn(
+          'flex flex-row items-center justify-between space-x-1 p-2 text-black/50 dark:text-white/50 rounded-xl hover:bg-light-secondary dark:hover:bg-dark-secondary active:scale-95 transition duration-200 hover:text-black dark:hover:text-white',
+          files.length > 0 ? '-ml-2 lg:-ml-3' : '',
+        )}
+      >
+        {files.length > 1 && (
+          <>
+            <File size={19} className="text-sky-400" />
+            <p className="text-sky-400 inline whitespace-nowrap text-xs font-medium">
+              {files.length} files
+            </p>
+          </>
+        )}
+
+        {files.length === 1 && (
+          <>
+            <File size={18} className="text-sky-400" />
+            <p className="text-sky-400 text-xs font-medium">
+              {files[0].fileName.length > 10
+                ? files[0].fileName.replace(/\.\w+$/, '').substring(0, 3) +
+                  '...' +
+                  files[0].fileExtension
+                : files[0].fileName}
+            </p>
+          </>
+        )}
+      </PopoverButton>
+      <Transition
+        as={Fragment}
+        enter="transition ease-out duration-150"
+        enterFrom="opacity-0 translate-y-1"
+        enterTo="opacity-100 translate-y-0"
+        leave="transition ease-in duration-150"
+        leaveFrom="opacity-100 translate-y-0"
+        leaveTo="opacity-0 translate-y-1"
+      >
+        <PopoverPanel className="absolute z-10 w-64 md:w-[350px] right-0">
+          <div className="bg-light-primary dark:bg-dark-primary border rounded-md border-light-200 dark:border-dark-200 w-full max-h-[200px] md:max-h-none overflow-y-auto flex flex-col">
+            <div className="flex flex-row items-center justify-between px-3 py-2">
+              <h4 className="text-black dark:text-white font-medium text-sm">
+                Attached files
+              </h4>
+              <div className="flex flex-row items-center space-x-4">
+                <button
+                  type="button"
+                  onClick={() => fileInputRef.current.click()}
+                  className="flex flex-row items-center space-x-1 text-black/70 dark:text-white/70 hover:text-black hover:dark:text-white transition duration-200"
+                >
+                  <input
+                    type="file"
+                    onChange={handleChange}
+                    ref={fileInputRef}
+                    accept=".pdf,.docx,.txt"
+                    multiple
+                    hidden
+                  />
+                  <Plus size={18} />
+                  <p className="text-xs">Add</p>
+                </button>
+                <button
+                  onClick={() => {
+                    setFiles([]);
+                    setFileIds([]);
+                  }}
+                  className="flex flex-row items-center space-x-1 text-black/70 dark:text-white/70 hover:text-black hover:dark:text-white transition duration-200"
+                >
+                  <Trash size={14} />
+                  <p className="text-xs">Clear</p>
+                </button>
+              </div>
+            </div>
+            <div className="h-[0.5px] mx-2 bg-white/10" />
+            <div className="flex flex-col items-center">
+              {files.map((file, i) => (
+                <div
+                  key={i}
+                  className="flex flex-row items-center justify-start w-full space-x-3 p-3"
+                >
+                  <div className="bg-dark-100 flex items-center justify-center w-10 h-10 rounded-md">
+                    <File size={16} className="text-white/70" />
+                  </div>
+                  <p className="text-black/70 dark:text-white/70 text-sm">
+                    {file.fileName.length > 25
+                      ? file.fileName.replace(/\.\w+$/, '').substring(0, 25) +
+                        '...' +
+                        file.fileExtension
+                      : file.fileName}
+                  </p>
+                </div>
+              ))}
+            </div>
+          </div>
+        </PopoverPanel>
+      </Transition>
+    </Popover>
+  ) : (
+    <button
+      type="button"
+      onClick={() => fileInputRef.current.click()}
+      className={cn(
+        'flex flex-row items-center space-x-1 text-black/50 dark:text-white/50 rounded-xl hover:bg-light-secondary dark:hover:bg-dark-secondary transition duration-200 hover:text-black dark:hover:text-white',
+        showText ? '' : 'p-2',
+      )}
+    >
+      <input
+        type="file"
+        onChange={handleChange}
+        ref={fileInputRef}
+        accept=".pdf,.docx,.txt"
+        multiple
+        hidden
+      />
+      <CopyPlus size={showText ? 18 : undefined} />
+      {showText && <p className="text-xs font-medium pl-[1px]">Attach</p>}
+    </button>
+  );
+};
+
+export default Attach;

src/components/MessageInputActions/AttachSmall.tsx

@@ -0,0 +1,153 @@
+import { cn } from '@/lib/utils';
+import {
+  Popover,
+  PopoverButton,
+  PopoverPanel,
+  Transition,
+} from '@headlessui/react';
+import { CopyPlus, File, LoaderCircle, Plus, Trash } from 'lucide-react';
+import { Fragment, useRef, useState } from 'react';
+import { File as FileType } from '../ChatWindow';
+
+const AttachSmall = ({
+  fileIds,
+  setFileIds,
+  files,
+  setFiles,
+}: {
+  fileIds: string[];
+  setFileIds: (fileIds: string[]) => void;
+  files: FileType[];
+  setFiles: (files: FileType[]) => void;
+}) => {
+  const [loading, setLoading] = useState(false);
+  const fileInputRef = useRef<any>();
+
+  const handleChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    setLoading(true);
+    const data = new FormData();
+
+    for (let i = 0; i < e.target.files!.length; i++) {
+      data.append('files', e.target.files![i]);
+    }
+
+    const embeddingModelProvider = localStorage.getItem(
+      'embeddingModelProvider',
+    );
+    const embeddingModel = localStorage.getItem('embeddingModel');
+
+    data.append('embedding_model_provider', embeddingModelProvider!);
+    data.append('embedding_model', embeddingModel!);
+
+    const res = await fetch(`/api/uploads`, {
+      method: 'POST',
+      body: data,
+    });
+
+    const resData = await res.json();
+
+    setFiles([...files, ...resData.files]);
+    setFileIds([...fileIds, ...resData.files.map((file: any) => file.fileId)]);
+    setLoading(false);
+  };
+
+  return loading ? (
+    <div className="flex flex-row items-center justify-between space-x-1 p-1">
+      <LoaderCircle size={20} className="text-sky-400 animate-spin" />
+    </div>
+  ) : files.length > 0 ? (
+    <Popover className="max-w-[15rem] md:max-w-md lg:max-w-lg">
+      <PopoverButton
+        type="button"
+        className="flex flex-row items-center justify-between space-x-1 p-1 text-black/50 dark:text-white/50 rounded-xl hover:bg-light-secondary dark:hover:bg-dark-secondary active:scale-95 transition duration-200 hover:text-black dark:hover:text-white"
+      >
+        <File size={20} className="text-sky-400" />
+      </PopoverButton>
+      <Transition
+        as={Fragment}
+        enter="transition ease-out duration-150"
+        enterFrom="opacity-0 translate-y-1"
+        enterTo="opacity-100 translate-y-0"
+        leave="transition ease-in duration-150"
+        leaveFrom="opacity-100 translate-y-0"
+        leaveTo="opacity-0 translate-y-1"
+      >
+        <PopoverPanel className="absolute z-10 w-64 md:w-[350px] bottom-14 -ml-3">
+          <div className="bg-light-primary dark:bg-dark-primary border rounded-md border-light-200 dark:border-dark-200 w-full max-h-[200px] md:max-h-none overflow-y-auto flex flex-col">
+            <div className="flex flex-row items-center justify-between px-3 py-2">
+              <h4 className="text-black dark:text-white font-medium text-sm">
+                Attached files
+              </h4>
+              <div className="flex flex-row items-center space-x-4">
+                <button
+                  type="button"
+                  onClick={() => fileInputRef.current.click()}
+                  className="flex flex-row items-center space-x-1 text-black/70 dark:text-white/70 hover:text-black hover:dark:text-white transition duration-200"
+                >
+                  <input
+                    type="file"
+                    onChange={handleChange}
+                    ref={fileInputRef}
+                    accept=".pdf,.docx,.txt"
+                    multiple
+                    hidden
+                  />
+                  <Plus size={18} />
+                  <p className="text-xs">Add</p>
+                </button>
+                <button
+                  onClick={() => {
+                    setFiles([]);
+                    setFileIds([]);
+                  }}
+                  className="flex flex-row items-center space-x-1 text-black/70 dark:text-white/70 hover:text-black hover:dark:text-white transition duration-200"
+                >
+                  <Trash size={14} />
+                  <p className="text-xs">Clear</p>
+                </button>
+              </div>
+            </div>
+            <div className="h-[0.5px] mx-2 bg-white/10" />
+            <div className="flex flex-col items-center">
+              {files.map((file, i) => (
+                <div
+                  key={i}
+                  className="flex flex-row items-center justify-start w-full space-x-3 p-3"
+                >
+                  <div className="bg-dark-100 flex items-center justify-center w-10 h-10 rounded-md">
+                    <File size={16} className="text-white/70" />
+                  </div>
+                  <p className="text-black/70 dark:text-white/70 text-sm">
+                    {file.fileName.length > 25
+                      ? file.fileName.replace(/\.\w+$/, '').substring(0, 25) +
+                        '...' +
+                        file.fileExtension
+                      : file.fileName}
+                  </p>
+                </div>
+              ))}
+            </div>
+          </div>
+        </PopoverPanel>
+      </Transition>
+    </Popover>
+  ) : (
+    <button
+      type="button"
+      onClick={() => fileInputRef.current.click()}
+      className="flex flex-row items-center space-x-1 text-black/50 dark:text-white/50 rounded-xl hover:bg-light-secondary dark:hover:bg-dark-secondary transition duration-200 hover:text-black dark:hover:text-white p-1"
+    >
+      <input
+        type="file"
+        onChange={handleChange}
+        ref={fileInputRef}
+        accept=".pdf,.docx,.txt"
+        multiple
+        hidden
+      />
+      <CopyPlus size={20} />
+    </button>
+  );
+};
+
+export default AttachSmall;

src/components/MessageInputActions/Copilot.tsx

@@ -0,0 +1,43 @@
+import { cn } from '@/lib/utils';
+import { Switch } from '@headlessui/react';
+
+const CopilotToggle = ({
+  copilotEnabled,
+  setCopilotEnabled,
+}: {
+  copilotEnabled: boolean;
+  setCopilotEnabled: (enabled: boolean) => void;
+}) => {
+  return (
+    <div className="group flex flex-row items-center space-x-1 active:scale-95 duration-200 transition cursor-pointer">
+      <Switch
+        checked={copilotEnabled}
+        onChange={setCopilotEnabled}
+        className="bg-light-secondary dark:bg-dark-secondary border border-light-200/70 dark:border-dark-200 relative inline-flex h-5 w-10 sm:h-6 sm:w-11 items-center rounded-full"
+      >
+        <span className="sr-only">Copilot</span>
+        <span
+          className={cn(
+            copilotEnabled
+              ? 'translate-x-6 bg-[#24A0ED]'
+              : 'translate-x-1 bg-black/50 dark:bg-white/50',
+            'inline-block h-3 w-3 sm:h-4 sm:w-4 transform rounded-full transition-all duration-200',
+          )}
+        />
+      </Switch>
+      <p
+        onClick={() => setCopilotEnabled(!copilotEnabled)}
+        className={cn(
+          'text-xs font-medium transition-colors duration-150 ease-in-out',
+          copilotEnabled
+            ? 'text-[#24A0ED]'
+            : 'text-black/50 dark:text-white/50 group-hover:text-black dark:group-hover:text-white',
+        )}
+      >
+        Copilot
+      </p>
+    </div>
+  );
+};
+
+export default CopilotToggle;

src/components/MessageInputActions/Focus.tsx

@@ -0,0 +1,131 @@
+import {
+  BadgePercent,
+  ChevronDown,
+  Globe,
+  Pencil,
+  ScanEye,
+  SwatchBook,
+} from 'lucide-react';
+import { cn } from '@/lib/utils';
+import {
+  Popover,
+  PopoverButton,
+  PopoverPanel,
+  Transition,
+} from '@headlessui/react';
+import { SiReddit, SiYoutube } from '@icons-pack/react-simple-icons';
+import { Fragment } from 'react';
+
+const focusModes = [
+  {
+    key: 'webSearch',
+    title: 'All',
+    description: 'Searches across all of the internet',
+    icon: <Globe size={20} />,
+  },
+  {
+    key: 'academicSearch',
+    title: 'Academic',
+    description: 'Search in published academic papers',
+    icon: <SwatchBook size={20} />,
+  },
+  {
+    key: 'writingAssistant',
+    title: 'Writing',
+    description: 'Chat without searching the web',
+    icon: <Pencil size={16} />,
+  },
+  {
+    key: 'wolframAlphaSearch',
+    title: 'Wolfram Alpha',
+    description: 'Computational knowledge engine',
+    icon: <BadgePercent size={20} />,
+  },
+  {
+    key: 'youtubeSearch',
+    title: 'Youtube',
+    description: 'Search and watch videos',
+    icon: <SiYoutube className="h-5 w-auto mr-0.5" />,
+  },
+  {
+    key: 'redditSearch',
+    title: 'Reddit',
+    description: 'Search for discussions and opinions',
+    icon: <SiReddit className="h-5 w-auto mr-0.5" />,
+  },
+];
+
+const Focus = ({
+  focusMode,
+  setFocusMode,
+}: {
+  focusMode: string;
+  setFocusMode: (mode: string) => void;
+}) => {
+  return (
+    <Popover className="relative w-full max-w-[15rem] md:max-w-md lg:max-w-lg mt-[6.5px]">
+      <PopoverButton
+        type="button"
+        className=" text-black/50 dark:text-white/50 rounded-xl hover:bg-light-secondary dark:hover:bg-dark-secondary active:scale-95 transition duration-200 hover:text-black dark:hover:text-white"
+      >
+        {focusMode !== 'webSearch' ? (
+          <div className="flex flex-row items-center space-x-1">
+            {focusModes.find((mode) => mode.key === focusMode)?.icon}
+            <p className="text-xs font-medium hidden lg:block">
+              {focusModes.find((mode) => mode.key === focusMode)?.title}
+            </p>
+            <ChevronDown size={20} className="-translate-x-1" />
+          </div>
+        ) : (
+          <div className="flex flex-row items-center space-x-1">
+            <ScanEye size={20} />
+            <p className="text-xs font-medium hidden lg:block">Focus</p>
+          </div>
+        )}
+      </PopoverButton>
+      <Transition
+        as={Fragment}
+        enter="transition ease-out duration-150"
+        enterFrom="opacity-0 translate-y-1"
+        enterTo="opacity-100 translate-y-0"
+        leave="transition ease-in duration-150"
+        leaveFrom="opacity-100 translate-y-0"
+        leaveTo="opacity-0 translate-y-1"
+      >
+        <PopoverPanel className="absolute z-10 w-64 md:w-[500px] left-0">
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2 bg-light-primary dark:bg-dark-primary border rounded-lg border-light-200 dark:border-dark-200 w-full p-4 max-h-[200px] md:max-h-none overflow-y-auto">
+            {focusModes.map((mode, i) => (
+              <PopoverButton
+                onClick={() => setFocusMode(mode.key)}
+                key={i}
+                className={cn(
+                  'p-2 rounded-lg flex flex-col items-start justify-start text-start space-y-2 duration-200 cursor-pointer transition',
+                  focusMode === mode.key
+                    ? 'bg-light-secondary dark:bg-dark-secondary'
+                    : 'hover:bg-light-secondary dark:hover:bg-dark-secondary',
+                )}
+              >
+                <div
+                  className={cn(
+                    'flex flex-row items-center space-x-1',
+                    focusMode === mode.key
+                      ? 'text-[#24A0ED]'
+                      : 'text-black dark:text-white',
+                  )}
+                >
+                  {mode.icon}
+                  <p className="text-sm font-medium">{mode.title}</p>
+                </div>
+                <p className="text-black/70 dark:text-white/70 text-xs">
+                  {mode.description}
+                </p>
+              </PopoverButton>
+            ))}
+          </div>
+        </PopoverPanel>
+      </Transition>
+    </Popover>
+  );
+};
+
+export default Focus;

src/components/MessageInputActions/Optimization.tsx

@@ -0,0 +1,104 @@
+import { ChevronDown, Sliders, Star, Zap } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import {
+  Popover,
+  PopoverButton,
+  PopoverPanel,
+  Transition,
+} from '@headlessui/react';
+import { Fragment } from 'react';
+
+const OptimizationModes = [
+  {
+    key: 'speed',
+    title: 'Speed',
+    description: 'Prioritize speed and get the quickest possible answer.',
+    icon: <Zap size={20} className="text-[#FF9800]" />,
+  },
+  {
+    key: 'balanced',
+    title: 'Balanced',
+    description: 'Find the right balance between speed and accuracy',
+    icon: <Sliders size={20} className="text-[#4CAF50]" />,
+  },
+  {
+    key: 'quality',
+    title: 'Quality (Soon)',
+    description: 'Get the most thorough and accurate answer',
+    icon: (
+      <Star
+        size={16}
+        className="text-[#2196F3] dark:text-[#BBDEFB] fill-[#BBDEFB] dark:fill-[#2196F3]"
+      />
+    ),
+  },
+];
+
+const Optimization = ({
+  optimizationMode,
+  setOptimizationMode,
+}: {
+  optimizationMode: string;
+  setOptimizationMode: (mode: string) => void;
+}) => {
+  return (
+    <Popover className="relative w-full max-w-[15rem] md:max-w-md lg:max-w-lg">
+      <PopoverButton
+        type="button"
+        className="p-2 text-black/50 dark:text-white/50 rounded-xl hover:bg-light-secondary dark:hover:bg-dark-secondary active:scale-95 transition duration-200 hover:text-black dark:hover:text-white"
+      >
+        <div className="flex flex-row items-center space-x-1">
+          {
+            OptimizationModes.find((mode) => mode.key === optimizationMode)
+              ?.icon
+          }
+          <p className="text-xs font-medium">
+            {
+              OptimizationModes.find((mode) => mode.key === optimizationMode)
+                ?.title
+            }
+          </p>
+          <ChevronDown size={20} />
+        </div>
+      </PopoverButton>
+      <Transition
+        as={Fragment}
+        enter="transition ease-out duration-150"
+        enterFrom="opacity-0 translate-y-1"
+        enterTo="opacity-100 translate-y-0"
+        leave="transition ease-in duration-150"
+        leaveFrom="opacity-100 translate-y-0"
+        leaveTo="opacity-0 translate-y-1"
+      >
+        <PopoverPanel className="absolute z-10 w-64 md:w-[250px] right-0">
+          <div className="flex flex-col gap-2 bg-light-primary dark:bg-dark-primary border rounded-lg border-light-200 dark:border-dark-200 w-full p-4 max-h-[200px] md:max-h-none overflow-y-auto">
+            {OptimizationModes.map((mode, i) => (
+              <PopoverButton
+                onClick={() => setOptimizationMode(mode.key)}
+                key={i}
+                disabled={mode.key === 'quality'}
+                className={cn(
+                  'p-2 rounded-lg flex flex-col items-start justify-start text-start space-y-1 duration-200 cursor-pointer transition',
+                  optimizationMode === mode.key
+                    ? 'bg-light-secondary dark:bg-dark-secondary'
+                    : 'hover:bg-light-secondary dark:hover:bg-dark-secondary',
+                  mode.key === 'quality' && 'opacity-50 cursor-not-allowed',
+                )}
+              >
+                <div className="flex flex-row items-center space-x-1 text-black dark:text-white">
+                  {mode.icon}
+                  <p className="text-sm font-medium">{mode.title}</p>
+                </div>
+                <p className="text-black/70 dark:text-white/70 text-xs">
+                  {mode.description}
+                </p>
+              </PopoverButton>
+            ))}
+          </div>
+        </PopoverPanel>
+      </Transition>
+    </Popover>
+  );
+};
+
+export default Optimization;