feat(focus-modes): Add focus modes

ui/components/ChatWindow.tsx

@@ -41,6 +41,7 @@ const ChatWindow = () => {
   const [messages, setMessages] = useState<Message[]>([]);
   const [loading, setLoading] = useState(false);
   const [messageAppeared, setMessageAppeared] = useState(false);
+  const [focusMode, setFocusMode] = useState('webSearch');
 
   const sendMessage = async (message: string) => {
     if (loading) return;
@@ -55,6 +56,7 @@ const ChatWindow = () => {
       JSON.stringify({
         type: 'message',
         content: message,
+        focusMode: focusMode,
         history: [...chatHistory, ['human', message]],
       }),
     );
@@ -164,7 +166,11 @@ const ChatWindow = () => {
           />
         </>
       ) : (
-        <EmptyChat sendMessage={sendMessage} />
+        <EmptyChat
+          sendMessage={sendMessage}
+          focusMode={focusMode}
+          setFocusMode={setFocusMode}
+        />
       )}
     </div>
   );

ui/components/EmptyChat.tsx

@@ -2,15 +2,23 @@ import EmptyChatMessageInput from './EmptyChatMessageInput';
 
 const EmptyChat = ({
   sendMessage,
+  focusMode,
+  setFocusMode,
 }: {
   sendMessage: (message: string) => void;
+  focusMode: string;
+  setFocusMode: (mode: string) => void;
 }) => {
   return (
     <div className="flex flex-col items-center justify-center min-h-screen max-w-screen-sm mx-auto p-2 space-y-8">
       <h2 className="text-white/70 text-3xl font-medium -mt-8">
         Research begins here.
       </h2>
-      <EmptyChatMessageInput sendMessage={sendMessage} />
+      <EmptyChatMessageInput
+        sendMessage={sendMessage}
+        focusMode={focusMode}
+        setFocusMode={setFocusMode}
+      />
     </div>
   );
 };

ui/components/EmptyChatMessageInput.tsx

@@ -5,8 +5,12 @@ import { Attach, CopilotToggle, Focus } from './MessageInputActions';
 
 const EmptyChatMessageInput = ({
   sendMessage,
+  focusMode,
+  setFocusMode,
 }: {
   sendMessage: (message: string) => void;
+  focusMode: string;
+  setFocusMode: (mode: string) => void;
 }) => {
   const [copilotEnabled, setCopilotEnabled] = useState(false);
   const [message, setMessage] = useState('');
@@ -37,8 +41,8 @@ const EmptyChatMessageInput = ({
         />
         <div className="flex flex-row items-center justify-between mt-4">
           <div className="flex flex-row items-center space-x-1 -mx-2">
-            <Focus />
-            <Attach />
+            <Focus focusMode={focusMode} setFocusMode={setFocusMode} />
+            {/* <Attach /> */}
           </div>
           <div className="flex flex-row items-center space-x-4 -mx-2">
             <CopilotToggle

ui/components/MessageInputActions.tsx

@@ -1,20 +1,131 @@
-import { CopyPlus, ScanEye } from 'lucide-react';
+import {
+  BadgePercent,
+  CopyPlus,
+  Globe,
+  Pencil,
+  ScanEye,
+  SwatchBook,
+} from 'lucide-react';
 import { cn } from '@/lib/utils';
-import { Switch } from '@headlessui/react';
+import { Popover, Switch, Transition } from '@headlessui/react';
+import { SiReddit, SiYoutube } from '@icons-pack/react-simple-icons';
+import { Fragment } from 'react';
 
 export const Attach = () => {
   return (
-    <button type="button" className="p-2 text-white/50 rounded-xl hover:bg-[#1c1c1c] transition duration-200 hover:text-white">
+    <button
+      type="button"
+      className="p-2 text-white/50 rounded-xl hover:bg-[#1c1c1c] transition duration-200 hover:text-white"
+    >
       <CopyPlus />
     </button>
   );
 };
 
-export const Focus = () => {
+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={20} />,
+  },
+  {
+    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"
+        onPointerEnterCapture={undefined}
+        onPointerLeaveCapture={undefined}
+      />
+    ),
+  },
+  {
+    key: 'redditSearch',
+    title: 'Reddit',
+    description: 'Search for discussions and opinions',
+    icon: (
+      <SiReddit
+        className="h-5 w-auto mr-0.5"
+        onPointerEnterCapture={undefined}
+        onPointerLeaveCapture={undefined}
+      />
+    ),
+  },
+];
+
+export const Focus = ({
+  focusMode,
+  setFocusMode,
+}: {
+  focusMode: string;
+  setFocusMode: (mode: string) => void;
+}) => {
   return (
-    <button type="button" className="p-2 text-white/50 rounded-xl hover:bg-[#1c1c1c] transition duration-200 hover:text-white">
-      <ScanEye />
-    </button>
+    <Popover className="fixed w-full max-w-[15rem] md:max-w-md lg:max-w-lg">
+      <Popover.Button
+        type="button"
+        className="p-2 text-white/50 rounded-xl hover:bg-[#1c1c1c] transition duration-200 hover:text-white"
+      >
+        <ScanEye />
+      </Popover.Button>
+      <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"
+      >
+        <Popover.Panel className="absolute z-10 w-full">
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-1 bg-[#0A0A0A] border rounded-lg  border-[#1c1c1c] w-full p-2">
+            {focusModes.map((mode, i) => (
+              <Popover.Button
+                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-[#111111]'
+                    : 'hover:bg-[#111111]',
+                )}
+              >
+                <div
+                  className={cn(
+                    'flex flex-row items-center space-x-1',
+                    focusMode === mode.key ? 'text-[#24A0ED]' : 'text-white',
+                  )}
+                >
+                  {mode.icon}
+                  <p className="text-sm font-medium">{mode.title}</p>
+                </div>
+                <p className="text-white/70 text-xs">{mode.description}</p>
+              </Popover.Button>
+            ))}
+          </div>
+        </Popover.Panel>
+      </Transition>
+    </Popover>
   );
 };