Spaces:

minchyeom
/

llmOS-Agent

Runtime error

App Files Files Community

tech-envision commited on Jun 10

Commit

9d53f47

unverified ·

2 Parent(s): 48b4388 6a317c1

Merge pull request #79 from EnvisionMindCa/codex/implement-glassmorphism-design

Browse files

Files changed (7) hide show

frontend/src/app/globals.css +11 -2
frontend/src/app/layout.tsx +1 -14
frontend/src/components/ChatApp.tsx +15 -46
frontend/src/components/MessageInput.tsx +31 -0
frontend/src/components/MessageItem.tsx +21 -0
frontend/src/components/MessageList.tsx +20 -0
frontend/src/components/ui/GlassButton.tsx +16 -0

frontend/src/app/globals.css CHANGED Viewed

@@ -8,8 +8,8 @@
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
 }
 @media (prefers-color-scheme: dark) {
@@ -24,3 +24,12 @@ body {
   color: var(--foreground);
   font-family: Arial, Helvetica, sans-serif;
 }

 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
+  --font-sans: ui-sans-serif, system-ui, sans-serif;
+  --font-mono: ui-monospace, monospace;
 }
 @media (prefers-color-scheme: dark) {
   color: var(--foreground);
   font-family: Arial, Helvetica, sans-serif;
 }
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(5px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+.animate-fadeIn {
+  animation: fadeIn 0.3s ease-in-out;
+}

frontend/src/app/layout.tsx CHANGED Viewed

@@ -1,17 +1,6 @@
 import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
-const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
-});
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
-});
 export const metadata: Metadata = {
   title: "Create Next App",
   description: "Generated by create next app",
@@ -24,9 +13,7 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
-      >
         {children}
       </body>
     </html>

 import type { Metadata } from "next";
 import "./globals.css";
 export const metadata: Metadata = {
   title: "Create Next App",
   description: "Generated by create next app",
 }>) {
   return (
     <html lang="en">
+      <body className="antialiased">
         {children}
       </body>
     </html>

frontend/src/components/ChatApp.tsx CHANGED Viewed

@@ -1,26 +1,27 @@
 'use client';
-import { useState, useRef } from 'react';
 import { streamChat, ChatRequest } from '../utils/api';
-interface Message {
-  role: 'user' | 'assistant';
-  content: string;
-}
 export default function ChatApp() {
   const [messages, setMessages] = useState<Message[]>([]);
   const [input, setInput] = useState('');
   const [loading, setLoading] = useState(false);
-  const endRef = useRef<HTMLDivElement>(null);
   const scrollToEnd = () => {
-    endRef.current?.scrollIntoView({ behavior: 'smooth' });
   };
   const sendMessage = async () => {
     if (!input.trim() || loading) return;
     const prompt = input;
     setInput('');
     setMessages((prev) => [...prev, { role: 'user', content: prompt }, { role: 'assistant', content: '' }]);
@@ -36,57 +37,25 @@ export default function ChatApp() {
           };
           return msgs;
         });
-        scrollToEnd();
       }
     } catch (err) {
       console.error(err);
       setMessages((prev) => {
         const msgs = [...prev];
-        msgs[msgs.length - 1] = {
-          role: 'assistant',
-          content: 'Error retrieving response',
-        };
         return msgs;
       });
     } finally {
       setLoading(false);
-      scrollToEnd();
     }
   };
-  const onSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    void sendMessage();
-  };
   return (
-    <div className="flex flex-col max-w-2xl mx-auto h-screen p-4">
-      <div className="flex-1 overflow-y-auto space-y-4">
-        {messages.map((msg, idx) => (
-          <div key={idx} className={msg.role === 'user' ? 'text-right' : 'text-left'}>
-            <span className="px-3 py-2 inline-block rounded bg-gray-200 dark:bg-gray-700">
-              {msg.content}
-            </span>
-          </div>
-        ))}
-        <div ref={endRef} />
       </div>
-      <form onSubmit={onSubmit} className="mt-4 flex gap-2">
-        <input
-          type="text"
-          className="flex-1 border rounded px-3 py-2 text-black"
-          value={input}
-          onChange={(e) => setInput(e.target.value)}
-          placeholder="Type your message..."
-        />
-        <button
-          type="submit"
-          className="bg-blue-600 text-white px-4 py-2 rounded disabled:opacity-50"
-          disabled={loading}
-        >
-          Send
-        </button>
-      </form>
     </div>
   );
 }

 'use client';
+import { useState, useRef, useEffect } from 'react';
 import { streamChat, ChatRequest } from '../utils/api';
+import MessageList from './MessageList';
+import MessageInput from './MessageInput';
+import { Message } from './MessageItem';
 export default function ChatApp() {
   const [messages, setMessages] = useState<Message[]>([]);
   const [input, setInput] = useState('');
   const [loading, setLoading] = useState(false);
+  const listRef = useRef<HTMLDivElement>(null);
   const scrollToEnd = () => {
+    listRef.current?.scrollTo({ top: listRef.current.scrollHeight, behavior: 'smooth' });
   };
+  useEffect(() => {
+    scrollToEnd();
+  }, [messages]);
   const sendMessage = async () => {
     if (!input.trim() || loading) return;
     const prompt = input;
     setInput('');
     setMessages((prev) => [...prev, { role: 'user', content: prompt }, { role: 'assistant', content: '' }]);
           };
           return msgs;
         });
       }
     } catch (err) {
       console.error(err);
       setMessages((prev) => {
         const msgs = [...prev];
+        msgs[msgs.length - 1] = { role: 'assistant', content: 'Error retrieving response' };
         return msgs;
       });
     } finally {
       setLoading(false);
     }
   };
   return (
+    <div className="flex flex-col items-center h-screen bg-gradient-to-br from-gray-950/60 to-gray-800/60 text-white p-4">
+      <div className="w-full max-w-3xl flex flex-col flex-1 backdrop-blur-lg rounded-lg border border-white/20 bg-white/10 shadow-xl overflow-hidden">
+        <MessageList ref={listRef} messages={messages} />
+        <MessageInput value={input} onChange={setInput} onSend={sendMessage} disabled={loading} />
       </div>
     </div>
   );
 }

frontend/src/components/MessageInput.tsx ADDED Viewed

	@@ -0,0 +1,31 @@

+import React from 'react';
+import GlassButton from './ui/GlassButton';
+interface MessageInputProps {
+  value: string;
+  onChange: (value: string) => void;
+  onSend: () => void;
+  disabled?: boolean;
+}
+export default function MessageInput({ value, onChange, onSend, disabled }: MessageInputProps) {
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    onSend();
+  };
+  return (
+    <form onSubmit={handleSubmit} className="flex gap-2 p-2">
+      <input
+        type="text"
+        className="flex-1 bg-white/20 backdrop-blur-md border border-white/30 text-white px-3 py-2 rounded-md focus:outline-none"
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        placeholder="Type your message..."
+      />
+      <GlassButton type="submit" disabled={disabled}>
+        Send
+      </GlassButton>
+    </form>
+  );
+}

frontend/src/components/MessageItem.tsx ADDED Viewed

	@@ -0,0 +1,21 @@

+import React from 'react';
+export interface Message {
+  role: 'user' | 'assistant';
+  content: string;
+}
+interface MessageItemProps {
+  message: Message;
+}
+export default function MessageItem({ message }: MessageItemProps) {
+  const alignment = message.role === 'user' ? 'items-end' : 'items-start';
+  return (
+    <div className={`flex flex-col ${alignment} animate-fadeIn`}>
+      <div className="w-full max-w-xl p-3 my-2 bg-white/10 border border-white/30 backdrop-blur-lg rounded-lg shadow-md">
+        <p className="whitespace-pre-wrap">{message.content}</p>
+      </div>
+    </div>
+  );
+}

frontend/src/components/MessageList.tsx ADDED Viewed

	@@ -0,0 +1,20 @@

+import React, { forwardRef } from 'react';
+import MessageItem, { Message } from './MessageItem';
+interface MessageListProps {
+  messages: Message[];
+}
+const MessageList = forwardRef<HTMLDivElement, MessageListProps>(({ messages }, ref) => {
+  return (
+    <div className="flex-1 overflow-y-auto p-2" ref={ref}>
+      {messages.map((msg, idx) => (
+        <MessageItem key={idx} message={msg} />
+      ))}
+    </div>
+  );
+});
+MessageList.displayName = 'MessageList';
+export default MessageList;

frontend/src/components/ui/GlassButton.tsx ADDED Viewed

	@@ -0,0 +1,16 @@

+import React from 'react';
+interface GlassButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  children: React.ReactNode;
+}
+export default function GlassButton({ children, className = '', ...props }: GlassButtonProps) {
+  return (
+    <button
+      className={`bg-white/20 backdrop-blur-md border border-white/30 text-white px-4 py-2 rounded-md shadow-lg transition-all hover:bg-white/30 active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed ${className}`}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+}