feat: add switch to toggle self reflection (#44)

<img width="904" alt="image"
src="https://github.com/landing-ai/vision-agent-ui/assets/132986242/5b2fd8ee-1ade-41d7-a59f-57c323cd5036">
<img width="884" alt="image"
src="https://github.com/landing-ai/vision-agent-ui/assets/132986242/c3373cfc-f8c3-49d9-8415-e40492328303">

app/api/vision-agent/route.ts

@@ -17,10 +17,11 @@ export const POST = withLogging(
       messages: MessageBase[];
       id: string;
       url: string;
+      enableSelfReflection: boolean;
     },
     request,
   ) => {
-    const { messages, url } = json;
+    const { messages, url, enableSelfReflection } = json;
 
     // const session = await auth();
     // if (!session?.user?.email) {
@@ -55,7 +56,7 @@ export const POST = withLogging(
     formData.append('image', url);
 
     const fetchResponse = await fetch(
-      'https://api.dev.landing.ai/v1/agent/chat?agent_class=vision_agent&visualize_output=true',
+      `https://api.dev.landing.ai/v1/agent/chat?agent_class=vision_agent&visualize_output=true&self_reflection=${enableSelfReflection}`,
       // 'http://localhost:5050/v1/agent/chat?agent_class=vision_agent',
       {
         method: 'POST',

components/chat/Composer.tsx

@@ -21,6 +21,7 @@ import {
 } from '@/components/ui/Icons';
 import { cn } from '@/lib/utils';
 import { generateInputImageMarkdown } from '@/lib/messageUtils';
+import { Switch } from '../ui/Switch';
 
 export interface ComposerProps
   extends Pick<
@@ -33,6 +34,8 @@ export interface ComposerProps
   url?: string;
   isAtBottom: boolean;
   scrollToBottom: () => void;
+  enableSelfReflection: boolean;
+  setEnableSelfReflection: (value: boolean) => void;
 }
 
 export function Composer({
@@ -47,6 +50,8 @@ export function Composer({
   messages,
   isAtBottom,
   scrollToBottom,
+  enableSelfReflection,
+  setEnableSelfReflection,
   url,
 }: ComposerProps) {
   const { formRef, onKeyDown } = useEnterSubmit();
@@ -102,22 +107,33 @@ export function Composer({
                 </Tooltip>
               </div>
             )}
-            <Textarea
-              ref={inputRef}
-              tabIndex={0}
-              onKeyDown={onKeyDown}
-              rows={1}
-              value={input}
-              disabled={isLoading}
-              onChange={e => setInput(e.target.value)}
-              placeholder={
-                isLoading
-                  ? 'Vision Agent is thinking...'
-                  : 'Ask question about the image.'
-              }
-              spellCheck={false}
-              className="min-h-[60px] w-4/5 resize-none bg-transparent px-4 py-[1.3em] focus-within:outline-none sm:text-sm"
-            />
+            <div className="flex flex-col gap-2 w-4/5 px-4">
+              <Textarea
+                ref={inputRef}
+                tabIndex={0}
+                onKeyDown={onKeyDown}
+                rows={1}
+                value={input}
+                disabled={isLoading}
+                onChange={e => setInput(e.target.value)}
+                placeholder={
+                  isLoading
+                    ? 'Vision Agent is thinking...'
+                    : 'Ask question about the image.'
+                }
+                spellCheck={false}
+                className="min-h-[60px] resize-none bg-transparent py-[1.3em] focus-within:outline-none sm:text-sm"
+              />
+              <div className="flex items-center gap-2 mt-4">
+                <Switch
+                  checked={enableSelfReflection}
+                  onCheckedChange={checked => {
+                    setEnableSelfReflection(checked);
+                  }}
+                />
+                <p className="text-sm">Self Reflection</p>
+              </div>
+            </div>
             {/* Scroll to bottom Icon */}
             <div
               className={cn(

components/chat/index.tsx

@@ -6,6 +6,7 @@ import { ChatEntity } from '@/lib/types';
 import useVisionAgent from '@/lib/hooks/useVisionAgent';
 import { useScrollAnchor } from '@/lib/hooks/useScrollAnchor';
 import { Session } from 'next-auth';
+import { useState } from 'react';
 
 export interface ChatProps extends React.ComponentProps<'div'> {
   chat: ChatEntity;
@@ -14,8 +15,10 @@ export interface ChatProps extends React.ComponentProps<'div'> {
 
 export function Chat({ chat, session }: ChatProps) {
   const { url, id } = chat;
+  const [enableSelfReflection, setEnableSelfReflection] =
+    useState<boolean>(true);
   const { messages, append, reload, stop, isLoading, input, setInput } =
-    useVisionAgent(chat);
+    useVisionAgent(chat, enableSelfReflection);
 
   const { messagesRef, scrollRef, visibilityRef, isAtBottom, scrollToBottom } =
     useScrollAnchor();
@@ -45,6 +48,8 @@ export function Chat({ chat, session }: ChatProps) {
           setInput={setInput}
           isAtBottom={isAtBottom}
           scrollToBottom={scrollToBottom}
+          enableSelfReflection={enableSelfReflection}
+          setEnableSelfReflection={setEnableSelfReflection}
         />
       </div>
     </>

components/project/ProjectChat.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { MediaDetails } from '@/lib/fetch';
-import React from 'react';
+import React, { useState } from 'react';
 import { ChatList } from '../chat/ChatList';
 import useVisionAgent from '@/lib/hooks/useVisionAgent';
 import { nanoid } from '@/lib/utils';
@@ -19,13 +19,18 @@ const ProjectChat: React.FC<ChatProps> = ({ mediaList }) => {
   // fallback to the first media
   const selectedMedia =
     mediaList.find(media => media.id === selectedMediaId) ?? mediaList[0];
+  const [enableSelfReflection, setEnableSelfReflection] =
+    useState<boolean>(true);
   const { messages, append, reload, stop, isLoading, input, setInput } =
-    useVisionAgent({
-      url: selectedMedia.url,
-      messages: [],
-      user: 'does-not-matter@landing.ai',
-      updatedAt: Date.now(),
-    });
+    useVisionAgent(
+      {
+        url: selectedMedia.url,
+        messages: [],
+        user: 'does-not-matter@landing.ai',
+        updatedAt: Date.now(),
+      },
+      enableSelfReflection,
+    );
 
   const { messagesRef, scrollRef, visibilityRef, isAtBottom, scrollToBottom } =
     useScrollAnchor();
@@ -50,6 +55,8 @@ const ProjectChat: React.FC<ChatProps> = ({ mediaList }) => {
           setInput={setInput}
           isAtBottom={isAtBottom}
           scrollToBottom={scrollToBottom}
+          enableSelfReflection={enableSelfReflection}
+          setEnableSelfReflection={setEnableSelfReflection}
         />
       </div>
     </>

components/ui/Switch.tsx

@@ -0,0 +1,26 @@
+'use client';
+
+import * as React from 'react';
+import * as SwitchPrimitive from '@radix-ui/react-switch';
+
+import { cn } from '@/lib/utils';
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitive.Root
+    className={cn(
+      'h-[20px] w-[36px] cursor-pointer rounded-full bg-slate-500 data-[state=checked]:bg-sky-600 ',
+      className,
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitive.Thumb className="w-[18px] h-[18px] block rounded-full bg-white shadow-sm data-[state=checked]:translate-x-[18px] transition-transform" />
+  </SwitchPrimitive.Root>
+));
+
+Switch.displayName = SwitchPrimitive.Root.displayName;
+
+export { Switch };

lib/hooks/useVisionAgent.ts

@@ -49,7 +49,7 @@ const uploadBase64 = async (
   }
 };
 
-const useVisionAgent = (chat: ChatEntity) => {
+const useVisionAgent = (chat: ChatEntity, enableSelfReflection = true) => {
   const { messages: initialMessages, id, url } = chat;
   const {
     messages,
@@ -120,6 +120,7 @@ const useVisionAgent = (chat: ChatEntity) => {
     body: {
       url,
       id,
+      enableSelfReflection,
     },
   });