save

app/api/vision-agent/route.ts

@@ -90,12 +90,14 @@ export const POST = withLogging(
     formData.append('image', mediaUrl);
 
     const fetchResponse = await fetch(
-      `https://api.dev.landing.ai/v1/agent/chat?agent_class=vision_agent&self_reflection=false`,
+      // `https://api.dev.landing.ai/v1/agent/chat?agent_class=vision_agent&self_reflection=false`,
+      `https://api.landing.ai/v1/agent/chat?agent_class=vision_agent&self_reflection=false`,
       // `http://localhost:5001/v1/agent/chat?agent_class=vision_agent&self_reflection=${enableSelfReflection}`,
       {
         method: 'POST',
         headers: {
-          apikey: 'land_sk_DKeoYtaZZrYqJ9TMMiXe4BIQgJcZ0s3XAoB0JT3jv73FFqnr6k',
+          // apikey: 'land_sk_DKeoYtaZZrYqJ9TMMiXe4BIQgJcZ0s3XAoB0JT3jv73FFqnr6k', // dev
+          apikey: 'land_sk_nMnUf8xiJJUjyw1l5QaIJJ4ZyrvPthzVmPAIG7TtJY7F9CW6lu', // prod
         },
         body: formData,
       },
@@ -223,7 +225,6 @@ export const POST = withLogging(
               }
             }
             if (done) {
-              console.log(done);
               logger.info(
                 session,
                 {

app/chat/[id]/server.tsx

@@ -1,5 +1,5 @@
 import ChatInterface from '../../../components/ChatInterface';
-import { auth } from '@/auth';
+import { auth, sessionUser } from '@/auth';
 import { dbGetChat } from '@/lib/db/functions';
 import { redirect } from 'next/navigation';
 import { revalidatePath } from 'next/cache';
@@ -10,10 +10,11 @@ interface ChatServerProps {
 
 export default async function ChatServer({ id }: ChatServerProps) {
   const chat = await dbGetChat(id);
+  const { id: userId } = await sessionUser();
 
   if (!chat) {
     revalidatePath('/');
     redirect('/');
   }
-  return <ChatInterface chat={chat} />;
+  return <ChatInterface chat={chat} userId={userId} />;
 }

components/ChatInterface.tsx

@@ -10,9 +10,10 @@ import CodeResultDisplay from './CodeResultDisplay';
 
 export interface ChatInterfaceProps {
   chat: ChatWithMessages;
+  userId?: string | null;
 }
 
-const ChatInterface: React.FC<ChatInterfaceProps> = ({ chat }) => {
+const ChatInterface: React.FC<ChatInterfaceProps> = ({ chat, userId }) => {
   const messageId = useAtomValue(selectedMessageId);
   const messageCodeResult = chat.messages.find(
     message => message.id === messageId,
@@ -30,7 +31,7 @@ const ChatInterface: React.FC<ChatInterfaceProps> = ({ chat }) => {
         )}
       </div>
       <div className="w-full flex justify-center overflow-auto pr-0 animate-in duration-300 ease-in-out peer-[[data-state=open]]:xl:pr-[50%]">
-        <ChatList chat={chat} />
+        <ChatList chat={chat} userId={userId} />
       </div>
     </div>
   );

components/chat/ChatList.tsx

@@ -18,14 +18,18 @@ import { selectedMessageId } from '@/state/chat';
 
 export interface ChatListProps {
   chat: ChatWithMessages;
+  userId?: string | null;
 }
 
 export const SCROLL_BOTTOM = 120;
 
-const ChatList: React.FC<ChatListProps> = ({ chat }) => {
-  const { id, messages: dbMessages } = chat;
+const ChatList: React.FC<ChatListProps> = ({ chat, userId }) => {
+  const { id, messages: dbMessages, userId: chatUserId } = chat;
   const { messages, append, isLoading } = useVisionAgent(chat);
 
+  // Only login and chat owner can compose
+  const canCompose = !chatUserId || userId === chatUserId;
+
   const lastMessage = messages[messages.length - 1];
   const lastDbMessage = dbMessages[dbMessages.length - 1];
   const setMessageId = useSetAtom(selectedMessageId);
@@ -55,39 +59,44 @@ const ChatList: React.FC<ChatListProps> = ({ chat }) => {
       ref={scrollRef}
     >
       <div className="overflow-auto h-full p-4 z-10" ref={messagesRef}>
-        {dbMessages.map((message, index) => (
-          <ChatMessage
-            key={message.id}
-            message={message}
-            wipAssistantMessage={
-              lastMessage.role === 'assistant' &&
-              index === dbMessages.length - 1
-                ? lastMessage
-                : undefined
-            }
-          />
-        ))}
+        {dbMessages.map((message, index) => {
+          const isLastMessage = index === dbMessages.length - 1;
+          return (
+            <ChatMessage
+              key={message.id}
+              message={message}
+              loading={isLastMessage && isLoading}
+              wipAssistantMessage={
+                lastMessage.role === 'assistant' && isLastMessage
+                  ? lastMessage
+                  : undefined
+              }
+            />
+          );
+        })}
         <div
           className="w-full"
           style={{ height: SCROLL_BOTTOM }}
           ref={visibilityRef}
         />
       </div>
-      <div className="absolute bottom-4 w-full">
-        <Composer
-          // Use the last message mediaUrl as the initial mediaUrl
-          initMediaUrl={dbMessages[dbMessages.length - 1]?.mediaUrl}
-          isLoading={isLoading}
-          onSubmit={async ({ input, mediaUrl: newMediaUrl }) => {
-            const messageInput = {
-              prompt: input,
-              mediaUrl: newMediaUrl,
-            };
-            const resp = await dbPostCreateMessage(id, messageInput);
-            append(resp);
-          }}
-        />
-      </div>
+      {canCompose && (
+        <div className="absolute bottom-4 w-full">
+          <Composer
+            // Use the last message mediaUrl as the initial mediaUrl
+            initMediaUrl={dbMessages[dbMessages.length - 1]?.mediaUrl}
+            disabled={isLoading}
+            onSubmit={async ({ input, mediaUrl: newMediaUrl }) => {
+              const messageInput = {
+                prompt: input,
+                mediaUrl: newMediaUrl,
+              };
+              const resp = await dbPostCreateMessage(id, messageInput);
+              append(resp);
+            }}
+          />
+        </div>
+      )}
       {/* Scroll to bottom Icon */}
       <Button
         size="icon"

components/chat/ChatMessage.tsx

@@ -33,12 +33,14 @@ import { usePrevious } from '@/lib/hooks/usePrevious';
 
 export interface ChatMessageProps {
   message: Message;
+  loading?: boolean;
   wipAssistantMessage?: MessageUI;
 }
 
 export const ChatMessage: React.FC<ChatMessageProps> = ({
   message,
   wipAssistantMessage,
+  loading,
 }) => {
   const [messageId, setMessageId] = useAtom(selectedMessageId);
   const { id, mediaUrl, prompt, response, result } = message;
@@ -49,7 +51,7 @@ export const ChatMessage: React.FC<ChatMessageProps> = ({
   return (
     <div
       className={cn(
-        'rounded-md bg-muted border border-muted p-4 mb-4',
+        'rounded-md bg-muted border border-muted p-4 pb-5 mb-4 relative',
         messageId === id && 'lg:border-primary/50',
         result && 'lg:cursor-pointer',
       )}
@@ -121,6 +123,14 @@ export const ChatMessage: React.FC<ChatMessageProps> = ({
           </div>
         </>
       )}
+      <div
+        className={cn(
+          'w-1/3 h-1 rounded-full overflow-hidden bg-zinc-700 absolute left-1/2 -translate-x-1/2 bottom-2',
+          loading ? 'opacity-100' : 'opacity-0',
+        )}
+      >
+        <div className="h-full bg-primary animate-progress origin-left-right" />
+      </div>
     </div>
   );
 };
@@ -138,7 +148,6 @@ const ChunkTypeToText: React.FC<{
 
   const [seconds, setSeconds] = useState(0);
   const isExecution = type === 'code' && status === 'running';
-  const timerId = useRef<NodeJS.Timeout>();
 
   useEffect(() => {
     if (isExecution) {

components/chat/Composer.tsx

@@ -24,7 +24,7 @@ import useMediaUpload from '@/lib/hooks/useMediaUpload';
 
 export interface ComposerProps {
   onSubmit: (params: { input: string; mediaUrl: string }) => Promise<void>;
-  isLoading?: boolean;
+  disabled?: boolean;
   title?: string;
   initMediaUrl?: string;
   initInput?: string;
@@ -36,7 +36,7 @@ export interface ComposerRef {
 }
 
 const Composer = forwardRef<ComposerRef, ComposerProps>(
-  ({ isLoading, onSubmit, initMediaUrl, initInput }, ref) => {
+  ({ disabled, onSubmit, initMediaUrl, initInput }, ref) => {
     const { formRef, onKeyDown } = useEnterSubmit();
     const inputRef = useRef<HTMLTextAreaElement>(null);
     const [localMediaUrl, setLocalMediaUrl] = useState<string | undefined>(
@@ -53,7 +53,8 @@ const Composer = forwardRef<ComposerRef, ComposerProps>(
       openUpload,
     } = useMediaUpload(uploadUrl => setLocalMediaUrl(uploadUrl));
 
-    const finalLoading = isLoading || isUploading || isSubmitting;
+    const finalLoading = isUploading || isSubmitting;
+    const finalDisabled = finalLoading || disabled;
 
     useEffect(() => {
       if (inputRef.current) {
@@ -155,10 +156,10 @@ const Composer = forwardRef<ComposerRef, ComposerProps>(
             onKeyDown={onKeyDown}
             rows={1}
             value={input}
-            disabled={finalLoading}
+            disabled={finalDisabled}
             onChange={e => setLocalInput(e.target.value)}
             placeholder={
-              finalLoading ? '🤖 Agent working ✨' : 'Message Vision Agent'
+              finalDisabled ? '🤖 Agent working ✨' : 'Message Vision Agent'
             }
             spellCheck={false}
             className="w-full grow resize-none bg-transparent focus-within:outline-none"
@@ -170,7 +171,7 @@ const Composer = forwardRef<ComposerRef, ComposerProps>(
                 type="submit"
                 size="icon"
                 className={cn('size-6 absolute bottom-3 right-3')}
-                disabled={finalLoading || input === '' || noMediaValidation}
+                disabled={finalDisabled || input === '' || noMediaValidation}
               >
                 <IconArrowUp className="size-3" />
               </Button>

lib/logger.ts

@@ -118,14 +118,14 @@ export const withLogging = (
   return async (req: Request) => {
     const session = await auth();
     const json = await req.json();
-    logger.info(
-      session,
-      {
-        params: json,
-      },
-      req,
-      '_API_REQUEST',
-    );
+    // logger.info(
+    //   session,
+    //   {
+    //     params: json,
+    //   },
+    //   req,
+    //   '_API_REQUEST',
+    // );
     return handler(session, json, req);
   };
 };