Minor things: revalidate cache, table css, card title (#16)


app/api/upload/route.ts

@@ -3,6 +3,7 @@ import { upload } from '@/lib/aws';
 import { createKVChat } from '@/lib/kv/chat';
 import { ChatEntity, MessageBase } from '@/lib/types';
 import { nanoid } from '@/lib/utils';
+import { revalidatePath } from 'next/cache';
 
 /**
  * TODO: this should be replaced with actual upload to S3
@@ -56,6 +57,8 @@ export async function POST(req: Request): Promise<Response> {
 
     await createKVChat(payload);
 
+    revalidatePath('/chat', 'layout');
+
     return Response.json(payload);
   } catch (error) {
     return new Response((error as Error).message, {

app/chat/[id]/page.tsx

@@ -1,6 +1,6 @@
-import { nanoid } from '@/lib/utils';
-import { Chat } from '@/components/chat';
-import { getKVChat } from '@/lib/kv/chat';
+import ChatDataLoad from '@/components/chat/ChatDataLoad';
+import { Suspense } from 'react';
+import Loading from '@/components/ui/Loading';
 
 interface PageProps {
   params: {
@@ -11,7 +11,9 @@ interface PageProps {
 export default async function Page({ params }: PageProps) {
   const { id: chatId } = params;
 
-  const chat = await getKVChat(chatId);
-
-  return <Chat chat={chat} />;
+  return (
+    <Suspense fallback={<Loading />}>
+      <ChatDataLoad chatId={chatId} />
+    </Suspense>
+  );
 }

app/globals.css

@@ -141,7 +141,6 @@ table {
 }
 
 tr {
-  background-color: var(--color-canvas-default);
   border-top: 1px solid var(--color-border-muted);
 }
 

components/chat-sidebar/ChatCard.tsx

@@ -18,7 +18,7 @@ export const ChatCardLayout: React.FC<
   return (
     <Link
       className={cn(
-        'p-2 m-2 bg-background l:h-[250px] rounded-xl shadow-md flex items-center border border-transparent hover:border-gray-500 transition-all cursor-pointer',
+        'p-2 m-2 bg-background max-h-[100px] rounded-xl shadow-md flex items-center border border-transparent hover:border-gray-500 transition-all cursor-pointer',
         classNames,
       )}
       href={link}
@@ -31,7 +31,12 @@ export const ChatCardLayout: React.FC<
 const ChatCard: React.FC<ChatCardProps> = ({ chat }) => {
   const { id: chatIdFromParam } = useParams();
   const { id, url, messages, user } = chat;
-  const firstMessage = messages?.[0]?.content.slice(0, 50);
+  const firstMessage = messages?.[0]?.content;
+  const title = firstMessage
+    ? firstMessage.length > 50
+      ? firstMessage.slice(0, 50) + '...'
+      : firstMessage
+    : '(No messages yet)';
   return (
     <ChatCardLayout
       link={`/chat/${id}`}
@@ -45,9 +50,9 @@ const ChatCard: React.FC<ChatCardProps> = ({ chat }) => {
           height={50}
           className="rounded w-1/4 "
         />
-        <p className="text-sm w-3/4 ml-3">
-          {firstMessage ?? '(No messages yet)'}
-        </p>
+        <div className="flex items-start h-full">
+          <p className="text-sm w-3/4 ml-3">{title}</p>
+        </div>
       </div>
     </ChatCardLayout>
   );

components/chat/ChatDataLoad.tsx

@@ -0,0 +1,11 @@
+import { getKVChat } from '@/lib/kv/chat';
+import { Chat } from '.';
+
+export interface ChatDataLoadProps {
+  chatId: string;
+}
+
+export default async function ChatDataLoad({ chatId }: ChatDataLoadProps) {
+  const chat = await getKVChat(chatId);
+  return <Chat chat={chat} />;
+}

components/chat/ChatMessage.tsx

@@ -15,7 +15,6 @@ export interface ChatMessageProps {
   message: MessageBase;
 }
 
-
 const PAIRS: Record<string, string> = {
   '┍': '┑',
   '┝': '┥',
@@ -91,7 +90,7 @@ export function ChatMessage({ message, ...props }: ChatMessageProps) {
       </div>
       <div className="flex-1 px-1 ml-4 space-y-2 overflow-hidden">
         {logs && message.role !== 'user' && (
-          <div className="bg-slate-100 mb-4 p-4 max-h-60 overflow-auto">
+          <div className="bg-slate-100 dark:bg-slate-900 mb-4 p-4 max-h-[400px] overflow-auto">
             <div className="text-xl font-bold">Thinking Process</div>
             <MemoizedReactMarkdown
               className="break-words text-sm"

components/chat/ImageSelector.tsx

@@ -51,13 +51,13 @@ const ImageSelector: React.FC<ImageSelectorProps> = () => {
       )}
     >
       <input {...getInputProps()} />
-      <p className="text-gray-400 text-lg">
+      <div className="text-gray-400 text-lg">
         {isUploading ? (
           <Loading />
         ) : (
           'Drag or drop image here, or click to select images'
         )}
-      </p>
+      </div>
     </div>
   );
 };

components/chat/PromptForm.tsx

@@ -54,8 +54,8 @@ export function PromptForm({
             <TooltipTrigger asChild>
               <Image
                 src={url}
-                width={60}
-                height={60}
+                width={250}
+                height={250}
                 alt="chosen image"
                 className="w-1/5 my-4 mx-2 rounded-md"
               />

components/ui/ImageLoader.tsx

@@ -0,0 +1,11 @@
+// import Image from 'next/image';
+// import React from 'react';
+
+// type ImageLoaderProps = typeof Image;
+
+// const ImageLoader: React.FC<ImageLoaderProps> = props => {
+//   const { alt, width, height } = props;
+//   return <Image alt={alt} />;
+// };
+
+// export default ImageLoader;

lib/kv/chat.ts

@@ -64,7 +64,7 @@ export async function createKVChat(chat: ChatEntity) {
     score: Date.now(),
     member: `chat:${chat.id}`,
   });
-  revalidatePath('/chat/layout', 'layout');
+  revalidatePath('/chat', 'layout');
 }
 
 export async function saveKVChatMessage(id: string, message: MessageBase) {
@@ -77,7 +77,7 @@ export async function saveKVChatMessage(id: string, message: MessageBase) {
     ...chat,
     messages: [...messages, message],
   });
-  revalidatePath('/chat/layout', 'layout');
+  revalidatePath('/chat', 'layout');
 }
 
 export async function removeKVChat({ id, path }: { id: string; path: string }) {