Delete chat and clean up toggle into search params (#48)

<img width="246" alt="image"
src="https://github.com/landing-ai/vision-agent-ui/assets/5669963/2b1b7cdc-7671-4211-a9be-32e8954c73e1">

app/api/vision-agent/route.ts

@@ -57,7 +57,7 @@ export const POST = withLogging(
 
     const fetchResponse = await fetch(
       `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',
+      // `http://localhost:5001/v1/agent/chat?agent_class=vision_agent&visualize_output=true&self_reflection=${enableSelfReflection}`,
       {
         method: 'POST',
         headers: {

components/chat-sidebar/ChatCard.tsx

@@ -10,6 +10,8 @@ import clsx from 'clsx';
 import Img from '../ui/Img';
 import { format } from 'date-fns';
 import { cleanInputMessage } from '@/lib/messageUtils';
+import { IconClose } from '../ui/Icons';
+import { removeKVChat } from '@/lib/kv/chat';
 // import { format } from 'date-fns';
 
 type ChatCardProps = PropsWithChildren<{
@@ -36,6 +38,9 @@ export const ChatCardLayout: React.FC<
 const ChatCard: React.FC<ChatCardProps> = ({ chat, isAdminView }) => {
   const { id: chatIdFromParam } = useParams();
   const { id, url, messages, user, updatedAt } = chat;
+  if (!id) {
+    return null;
+  }
   const firstMessage = cleanInputMessage(messages?.[0]?.content ?? '');
   const title = firstMessage
     ? firstMessage.length > 50
@@ -47,7 +52,7 @@ const ChatCard: React.FC<ChatCardProps> = ({ chat, isAdminView }) => {
       link={isAdminView ? `/all/chat/${id}` : `/chat/${id}`}
       classNames={chatIdFromParam === id && 'border-gray-500'}
     >
-      <div className="overflow-hidden flex items-center size-full">
+      <div className="overflow-hidden flex items-center size-full group">
         <Img src={url} alt={`chat-${id}-card-image`} className="w-1/4" />
         <div className="flex items-start flex-col h-full ml-3 w-3/4">
           <p className="text-sm mb-1">{title}</p>
@@ -55,6 +60,13 @@ const ChatCard: React.FC<ChatCardProps> = ({ chat, isAdminView }) => {
             {updatedAt ? format(Number(updatedAt), 'yyyy-MM-dd') : '-'}
           </p>
           {isAdminView && <p className="text-xs text-gray-500">{user}</p>}
+          <IconClose
+            onClick={async e => {
+              e.stopPropagation();
+              await removeKVChat(id);
+            }}
+            className="absolute right-4 opacity-0 group-hover:opacity-100 top-1/2 -translate-y-1/2"
+          />
         </div>
       </div>
     </ChatCardLayout>

components/chat-sidebar/ChatListSidebar.tsx

@@ -19,7 +19,7 @@ const getItemSize = (message: string, isAdminView?: boolean) => {
   else return 88;
 };
 
-export default async function ChatSidebarList({
+export default function ChatSidebarList({
   chats,
   isAdminView,
 }: ChatSidebarListProps) {

components/chat/Composer.tsx

@@ -34,8 +34,6 @@ export interface ComposerProps
   url?: string;
   isAtBottom: boolean;
   scrollToBottom: () => void;
-  enableSelfReflection: boolean;
-  setEnableSelfReflection: (value: boolean) => void;
 }
 
 export function Composer({
@@ -50,8 +48,6 @@ export function Composer({
   messages,
   isAtBottom,
   scrollToBottom,
-  enableSelfReflection,
-  setEnableSelfReflection,
   url,
 }: ComposerProps) {
   const { formRef, onKeyDown } = useEnterSubmit();
@@ -124,15 +120,6 @@ export function Composer({
                 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

components/chat/index.tsx

@@ -16,10 +16,8 @@ export interface ChatProps extends React.ComponentProps<'div'> {
 
 export function Chat({ chat, session, isAdminView }: ChatProps) {
   const { url, id } = chat;
-  const [enableSelfReflection, setEnableSelfReflection] =
-    useState<boolean>(true);
   const { messages, append, reload, stop, isLoading, input, setInput } =
-    useVisionAgent(chat, enableSelfReflection);
+    useVisionAgent(chat);
 
   const { messagesRef, scrollRef, visibilityRef, isAtBottom, scrollToBottom } =
     useScrollAnchor();
@@ -50,8 +48,6 @@ export function Chat({ chat, session, isAdminView }: ChatProps) {
             setInput={setInput}
             isAtBottom={isAtBottom}
             scrollToBottom={scrollToBottom}
-            enableSelfReflection={enableSelfReflection}
-            setEnableSelfReflection={setEnableSelfReflection}
           />
         </div>
       )}

components/project/ProjectChat.tsx

@@ -19,18 +19,13 @@ 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(),
-      },
-      enableSelfReflection,
-    );
+    useVisionAgent({
+      url: selectedMedia.url,
+      messages: [],
+      user: '[email protected]',
+      updatedAt: Date.now(),
+    });
 
   const { messagesRef, scrollRef, visibilityRef, isAtBottom, scrollToBottom } =
     useScrollAnchor();
@@ -55,8 +50,6 @@ const ProjectChat: React.FC<ChatProps> = ({ mediaList }) => {
           setInput={setInput}
           isAtBottom={isAtBottom}
           scrollToBottom={scrollToBottom}
-          enableSelfReflection={enableSelfReflection}
-          setEnableSelfReflection={setEnableSelfReflection}
         />
       </div>
     </>

lib/hooks/useVisionAgent.ts

@@ -10,6 +10,7 @@ import {
   generateInputImageMarkdown,
 } from '../messageUtils';
 import { CLEANED_SEPARATOR } from '../constants';
+import { useSearchParams } from 'next/navigation';
 
 const uploadBase64 = async (
   base64: string,
@@ -49,8 +50,11 @@ const uploadBase64 = async (
   }
 };
 
-const useVisionAgent = (chat: ChatEntity, enableSelfReflection = true) => {
+const useVisionAgent = (chat: ChatEntity) => {
   const { messages: initialMessages, id, url } = chat;
+  const searchParams = useSearchParams();
+  const reflectionValue = searchParams.get('reflection');
+
   const {
     messages,
     append: appendRaw,
@@ -120,7 +124,7 @@ const useVisionAgent = (chat: ChatEntity, enableSelfReflection = true) => {
     body: {
       url,
       id,
-      enableSelfReflection,
+      enableSelfReflection: reflectionValue === 'true',
     },
   });
 

lib/kv/chat.ts

@@ -23,8 +23,11 @@ export async function getKVChats() {
 
     const results = (await pipeline.exec()) as ChatEntity[];
 
-    return results.sort((r1, r2) => r2.updatedAt - r1.updatedAt);
+    return results
+      .filter(r => !!r)
+      .sort((r1, r2) => r2.updatedAt - r1.updatedAt);
   } catch (error) {
+    console.error('getKVChats error:', error);
     return [];
   }
 }
@@ -94,30 +97,22 @@ export async function saveKVChatMessage(id: string, message: MessageBase) {
     messages: [...messages, message],
     updatedAt: Date.now(),
   });
-  revalidatePath('/chat', 'layout');
+  return revalidatePath('/chat', 'layout');
 }
 
-export async function removeKVChat({ id, path }: { id: string; path: string }) {
-  const session = await auth();
-
-  if (!session) {
-    return {
-      error: 'Unauthorized',
-    };
-  }
-
-  //Convert uid to string for consistent comparison with session.user.id
-  const uid = String(await kv.hget(`chat:${id}`, 'userId'));
+export async function removeKVChat(id: string) {
+  const { email } = await authEmail();
 
-  if (uid !== session?.user?.id) {
+  if (!email) {
     return {
       error: 'Unauthorized',
     };
   }
 
-  await kv.del(`chat:${id}`);
-  await kv.zrem(`user:chat:${session.user.id}`, `chat:${id}`);
+  await Promise.all([
+    kv.zrem(`user:chat:${email}`, `chat:${id}`),
+    kv.del(`chat:${id}`),
+  ]);
 
-  revalidatePath('/chat/layout', 'layout');
-  return revalidatePath(path);
+  return revalidatePath('/chat', 'layout');
 }

package.json

@@ -78,4 +78,4 @@
     "typescript": "^5.3.3"
   },
   "packageManager": "[email protected]"
-}
+}