UI Doesnt suck

packages/chat/src/ui/chat/Message.tsx

@@ -3,9 +3,9 @@ import type {Message} from './types'
 
 export const MessageElement = ({ message }: { message: Message }) => {
 	return (
-		<div className="chat-message">
-			<div className="chat-bubble" data-role={message.role}>
-				{message.message}
+		<div className={`chat-message ${message.role === 'user' ? 'text-right' : 'text-left'}`}>
+			<div className={`chat-bubble inline-block p-2 rounded-lg ${message.role === 'user' ? 'bg-blue-500 text-white' : 'bg-gray-200 text-gray-800'}`} data-role={message.role}>
+				{message.text}
 			</div>
 		</div>
 	)

packages/chat/src/ui/chat/index.tsx

@@ -10,15 +10,21 @@ interface ChatProps {
 export const ChatUI = ({ chat }: ChatProps) => {
 
 	const messages = React.use(chat)
-
+	console.log(messages)
 	return (
-		<div className="flex-grow flex flex-col gap-2 ">
-			<div className="chat-messages">
+		<div className="flex-grow flex flex-col gap-2">
+			<div className="chat-messages flex-grow overflow-y-auto p-4 space-y-2">
 				{messages?.messages?.map((message) => (
 					<MessageElement key={message.message} message={message} />
 				))}
 			</div>
-			<div className="chat-input"><form id="chat"><label htmlFor="chat-input">Input Your Query</label><input name="chat-input" id="chat-input"/></form></div>
+			<div className="chat-input p-4 bg-gray-100">
+				<form id="chat" className="flex">
+					<label htmlFor="chat-input" className="sr-only">Input Your Query</label>
+					<input name="chat-input" id="chat-input" className="flex-grow p-2 border border-gray-300 rounded-l" placeholder="Type your message..." />
+					<button type="submit" className="p-2 bg-blue-500 text-white rounded-r">Send</button>
+				</form>
+			</div>
 		</div>
 	)
 }

packages/chat/src/ui/chat/types.ts

@@ -1,4 +1,4 @@
 export interface Message {
 	role: 'assistant' | 'user'
-	message: string
+	text: string
 }

packages/chat/src/ui/page/ChatView.tsx

@@ -10,7 +10,7 @@ import {redirect} from 'next/navigation'
 import {ChatUI} from '../chat'
 import {ConversationsList} from './ConversationsList'
 
- const ChatView: React.FC<AdminViewProps> = ({
+const ChatView: React.FC<AdminViewProps> = ({
 	initPageResult,
 	params,
 	searchParams,
@@ -43,41 +43,44 @@ import {ConversationsList} from './ConversationsList'
 			}))
 		}).catch(console.error)
 
-	const chatId = params?.chat
+	const chatId = 1
 	const chat = chatId
 		? payload
 				.find({
 					collection: 'chats',
 					where: { id: { equals: chatId } },
 				})
 				.then((chats) => {
+					console.log(chats)
 					const chat = chats.docs[0]
+					console.log(chat)
+
 					if (!chat) return { messages: [] }
 					return { ...chat, messages: chat.messages }
 				}).catch(console.error)
 		: Promise.resolve({ messages: [] })
 
 	return (
 		<>
-		{/*<script src="https://cdn.tailwindcss.com"/>*/}
-	 <div
-		 style={{
-			 paddingLeft: 'var(--gutter-h)',
-					paddingRight: 'var(--gutter-h)',
-				}}
-			>
-				<h1>Conversations</h1>
-				<div className="w-full max-h-full flex flex-row flex-grow ">
-					<Suspense fallback={<p>Loading</p>}>
-					<ConversationsList conversations={conversations} />
-					<ChatUI chat={chat} />
-					</Suspense>
+			<div className="flex flex-col h-screen">
+				<header className="bg-gray-800 text-white p-4">
+					<h1 className="text-xl">Conversations</h1>
+				</header>
+				<div className="flex flex-grow overflow-hidden">
+					<aside className="w-1/4 bg-gray-100 p-4 overflow-y-auto">
+						<Suspense fallback={<p>Loading</p>}>
+							<ConversationsList conversations={conversations} />
+						</Suspense>
+					</aside>
+					<main className="flex-grow p-4 flex flex-col">
+						<Suspense fallback={<p>Loading</p>}>
+							<ChatUI chat={chat} />
+						</Suspense>
+					</main>
 				</div>
 			</div>
 		</>
 	)
-
- }
-
+}
 
 export default ChatView

packages/chat/src/ui/page/ConversationsList.tsx

@@ -12,11 +12,11 @@ export const ConversationsList = ({
 
 	const convos = use(conversations)
 	return (
-		<div className="conversations-list">
+		<div className="conversations-list space-y-2">
 			{convos?.map((convo) => (
-				<a key={convo.id} href={`#${convo.id}`}>
+				<a key={convo.id} href={`#${convo.id}`} className="block p-2 bg-white rounded shadow hover:bg-gray-200">
 					<div className="conversation">
-						<p>{convo.description}</p>
+						<p className="text-gray-800">{convo.description}</p>
 					</div>
 				</a>
 			))}

packages/chat/vite.config.ts

@@ -9,6 +9,7 @@ export default defineConfig({
 	plugins: [tsconfigPaths(), react(),  libInjectCss(),externalizeDeps(), dts({copyDtsFiles:true, outDir:'dist', })],
 	build: {
 		outDir: 'dist/ui/page',
+		sourcemap:true,
 		lib: {
 			entry: ['./src/ui/page/ChatView.tsx'],
 			formats: ['es', 'cjs']