feat: revalidate path / remove create chat api (use server action) / code block style (#53)

<img width="934" alt="image"
src="https://github.com/landing-ai/vision-agent-ui/assets/5669963/6fd046ea-e9b5-45e2-bbef-bff0f1e42ac3">

app/api/chat/create/route.ts

@@ -1,36 +0,0 @@
-import { dbPostCreateChat } from '@/lib/db/functions';
-import { MessageRaw } from '@/lib/db/types';
-import { withLogging } from '@/lib/logger';
-import { revalidatePath } from 'next/cache';
-
-/**
- * @param req
- * @returns
- */
-export const POST = withLogging(
-  async (
-    _session,
-    json: {
-      id?: string;
-      url: string;
-      initMessages?: MessageRaw[];
-    },
-  ): Promise<Response> => {
-    try {
-      const { url, id, initMessages } = json;
-
-      const response = await dbPostCreateChat({
-        id,
-        mediaUrl: url,
-        initMessages,
-      });
-
-      revalidatePath('/chat', 'layout');
-      return Response.json(response);
-    } catch (error) {
-      return new Response((error as Error).message, {
-        status: 400,
-      });
-    }
-  },
-);

app/chat/page.tsx

@@ -14,7 +14,8 @@ import { IconDiscord, IconGitHub } from '@/components/ui/Icons';
 import Link from 'next/link';
 import { Button } from '@/components/ui/Button';
 import Img from '@/components/ui/Img';
-import { ChatWithMessages } from '@/lib/db/types';
+import { MessageRaw } from '@/lib/db/types';
+import { dbPostCreateChat } from '@/lib/db/functions';
 
 // const EXAMPLE_URL = 'https://landing-lens-support.s3.us-east-2.amazonaws.com/vision-agent-examples/cereal-example.jpg';
 const EXAMPLE_URL =
@@ -32,7 +33,7 @@ const exampleMessages = [
     url: EXAMPLE_URL,
     initMessages: [
       {
-        role: 'user',
+        role: 'user' as MessageRaw['role'],
         content:
           EXAMPLE_PROMPT + '\n\n' + generateInputImageMarkdown(EXAMPLE_URL),
       },
@@ -93,15 +94,9 @@ export default function Page() {
               index > 1 && 'hidden md:block'
             }`}
             onClick={async () => {
-              const resp = await fetcher<ChatWithMessages>('/api/chat/create', {
-                method: 'POST',
-                headers: {
-                  'Content-Type': 'application/json',
-                },
-                body: JSON.stringify({
-                  url: example.url,
-                  initMessages: example.initMessages,
-                }),
+              const resp = await dbPostCreateChat({
+                mediaUrl: example.url,
+                initMessages: example.initMessages,
               });
               if (resp) {
                 router.push(`/chat/${resp.id}`);

components/chat-sidebar/ChatCard.tsx

@@ -36,6 +36,7 @@ export const ChatCardLayout: React.FC<
 
 const ChatCard: React.FC<ChatCardProps> = ({ chat, isAdminView }) => {
   const { id: chatIdFromParam } = useParams();
+  const router = useRouter();
   const { id, mediaUrl, messages, userId, updatedAt } = chat;
   if (!id) {
     return null;

components/chat/ImageSelector.tsx

@@ -12,6 +12,7 @@ import {
   getVideoCover,
 } from '@rajesh896/video-thumbnails-generator';
 import { ChatWithMessages } from '@/lib/db/types';
+import { dbPostCreateChat } from '@/lib/db/functions';
 
 export interface ImageSelectorProps {}
 
@@ -87,15 +88,9 @@ const ImageSelector: React.FC<ImageSelectorProps> = () => {
               return upload(thumbnailFile, resp.id);
             });
         }
-        await fetcher<ChatWithMessages>('/api/chat/create', {
-          method: 'POST',
-          headers: {
-            'Content-Type': 'application/json',
-          },
-          body: JSON.stringify({
-            id: resp.id,
-            url: resp.publicUrl,
-          }),
+        await dbPostCreateChat({
+          id: resp.id,
+          mediaUrl: resp.publicUrl,
         });
         setUploading(false);
         router.push(`/chat/${resp.id}`);

components/ui/CodeBlock.tsx

@@ -91,10 +91,9 @@ const CodeBlock: FC<Props> = memo(({ language, value }) => {
     if (isCopied) return;
     copyToClipboard(value);
   };
-
   return (
-    <div className="relative w-full font-sans codeblock bg-zinc-950">
-      <div className="flex items-center justify-between w-full px-6 py-2 pr-4 bg-zinc-800 text-zinc-100">
+    <div className="relative w-full font-sans codeblock bg-zinc-950 rounded-lg overflow-hidden">
+      <div className="flex items-center justify-between w-full pl-8 pr-4 pt-2 text-zinc-100">
         <span className="text-xs lowercase">{language}</span>
         <div className="flex items-center space-x-1">
           <Button
@@ -126,7 +125,7 @@ const CodeBlock: FC<Props> = memo(({ language, value }) => {
           margin: 0,
           width: '100%',
           background: 'transparent',
-          padding: '1.5rem 1rem',
+          padding: '0.5rem 1rem 1.5rem 1rem',
         }}
         lineNumberStyle={{
           userSelect: 'none',

lib/db/functions.ts

@@ -3,6 +3,8 @@
 import { sessionUser } from '@/auth';
 import prisma from './prisma';
 import { ChatWithMessages, MessageRaw } from './types';
+import { revalidatePath } from 'next/cache';
+import { redirect } from 'next/navigation';
 
 /**
  * Finds or creates a user in the database based on the provided email and name.
@@ -45,6 +47,7 @@ export async function dbGetAllChat(): Promise<ChatWithMessages[]> {
     where: { userId },
     include: {
       messages: true,
+      user: true,
     },
   });
 }
@@ -89,7 +92,7 @@ export async function dbPostCreateChat({
       }
     : {};
   try {
-    return await prisma.chat.create({
+    const response = await prisma.chat.create({
       data: {
         id,
         mediaUrl: mediaUrl,
@@ -105,6 +108,9 @@ export async function dbPostCreateChat({
         messages: true,
       },
     });
+
+    revalidatePath('/chat', 'layout');
+    return response;
   } catch (error) {
     console.error(error);
   }
@@ -139,7 +145,11 @@ export async function dbPostCreateMessage(chatId: string, message: MessageRaw) {
 }
 
 export async function dbDeleteChat(chatId: string) {
-  return prisma.chat.delete({
+  await prisma.chat.delete({
     where: { id: chatId },
   });
+
+  revalidatePath('/chat', 'layout');
+
+  return;
 }

lib/hooks/useChatWithMedia.ts

@@ -1,87 +0,0 @@
-import { useChat, type Message } from 'ai/react';
-import { toast } from 'react-hot-toast';
-import { useEffect, useState } from 'react';
-import { MediaDetails } from '../fetch';
-import { MessageWithSelectedDataset } from '../types';
-
-const useChatWithMedia = (mediaList: MediaDetails[]) => {
-  const {
-    messages,
-    append,
-    reload,
-    stop,
-    isLoading,
-    input,
-    setInput,
-    setMessages,
-  } = useChat({
-    sendExtraMessageFields: true,
-    onResponse(response) {
-      if (response.status !== 200) {
-        toast.error(response.statusText);
-      }
-    },
-    initialMessages: [
-      {
-        id: 'system',
-        content: `For the full conversation, user have provided the following images: ${mediaList.map(media => media.name)}. Please help reply to user regarding these images`,
-        dataset: mediaList,
-        role: 'system',
-      },
-    ] as MessageWithSelectedDataset[],
-  });
-
-  const [loadingDots, setLoadingDots] = useState('');
-
-  useEffect(() => {
-    let loadingInterval: NodeJS.Timeout;
-
-    if (isLoading) {
-      loadingInterval = setInterval(() => {
-        setLoadingDots(prevMessage => {
-          switch (prevMessage) {
-            case '':
-              return '.';
-            case '.':
-              return '..';
-            case '..':
-              return '...';
-            case '...':
-              return '';
-            default:
-              return '';
-          }
-        });
-      }, 500);
-    }
-
-    return () => {
-      clearInterval(loadingInterval);
-    };
-  }, [isLoading]);
-
-  const assistantLoadingMessage = {
-    id: 'loading',
-    content: loadingDots,
-    role: 'assistant',
-  };
-
-  const messageWithLoading =
-    isLoading &&
-    messages.length &&
-    messages[messages.length - 1].role !== 'assistant'
-      ? [...messages, assistantLoadingMessage]
-      : messages;
-
-  return {
-    messages: messageWithLoading as MessageWithSelectedDataset[],
-    append,
-    reload,
-    stop,
-    isLoading,
-    input,
-    setInput,
-  };
-};
-
-export default useChatWithMedia;

lib/types.ts

@@ -1,42 +1,11 @@
 import { type Message } from 'ai';
 
-export type ServerActionResult<Result> = Promise<
-  | Result
-  | {
-      error: string;
-    }
->;
-
-/**
- * @deprecated
- */
-export type DatasetImageEntity = {
-  url: string;
-  selected?: boolean;
-  name: string;
-};
-
-/**
- * @deprecated
- */
-export type MessageWithSelectedDataset = Message & {
-  dataset: DatasetImageEntity[];
-};
-
 export type MessageBase = {
   role: Message['role'];
   content: string;
   id: string;
 };
 
-export type ChatEntity = {
-  url: string;
-  id?: string; // a chat without id is not to be saved
-  user: string; // email
-  messages: MessageBase[];
-  updatedAt: number;
-};
-
 export interface SignedPayload {
   id: string;
   publicUrl: string;

next.config.js

@@ -1,6 +1,7 @@
 /** @type {import('next').NextConfig} */
 
 module.exports = {
+  // reactStrictMode: false,
   images: {
     remotePatterns: [
       {

prisma/migrations/20240524012008_init/migration.sql

@@ -0,0 +1,49 @@
+-- CreateEnum
+CREATE TYPE "MessageRole" AS ENUM ('system', 'user', 'assistant');
+
+-- CreateTable
+CREATE TABLE "user" (
+    "id" TEXT NOT NULL,
+    "name" TEXT NOT NULL,
+    "email" TEXT NOT NULL,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updated_at" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "user_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "chat" (
+    "id" TEXT NOT NULL,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updated_at" TIMESTAMP(3) NOT NULL,
+    "userId" TEXT,
+    "mediaUrl" TEXT NOT NULL,
+
+    CONSTRAINT "chat_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "message" (
+    "id" TEXT NOT NULL,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updated_at" TIMESTAMP(3) NOT NULL,
+    "userId" TEXT,
+    "chatId" TEXT NOT NULL,
+    "content" TEXT NOT NULL,
+    "role" "MessageRole" NOT NULL,
+
+    CONSTRAINT "message_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "user_email_key" ON "user"("email");
+
+-- AddForeignKey
+ALTER TABLE "chat" ADD CONSTRAINT "chat_userId_fkey" FOREIGN KEY ("userId") REFERENCES "user"("id") ON DELETE SET NULL ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "message" ADD CONSTRAINT "message_chatId_fkey" FOREIGN KEY ("chatId") REFERENCES "chat"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "message" ADD CONSTRAINT "message_userId_fkey" FOREIGN KEY ("userId") REFERENCES "user"("id") ON DELETE SET NULL ON UPDATE CASCADE;

prisma/migrations/migration_lock.toml

@@ -0,0 +1,3 @@
+# Please do not edit this file manually
+# It should be added in your version-control system (i.e. Git)
+provider = "postgresql"