Spaces:

minchyeom
/

llmOS-Agent

Runtime error

tech-envision commited on Jun 10

Commit

1757403

unverified ·

2 Parent(s): 1b849df a74762c

Merge pull request #81 from EnvisionMindCa/codex/align-ui-elements-and-update-font

Files changed (6) hide show

frontend/src/app/globals.css CHANGED Viewed

@@ -49,7 +49,7 @@
 body {
   background: var(--background);
   color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
 }
 @keyframes fadeIn {

 body {
   background: var(--background);
   color: var(--foreground);
+  font-family: var(--font-sans, Arial, Helvetica, sans-serif);
 }
 @keyframes fadeIn {

frontend/src/app/layout.tsx CHANGED Viewed

@@ -1,6 +1,9 @@
 import type { Metadata } from "next";
 import "./globals.css";
 export const metadata: Metadata = {
   title: "Create Next App",
   description: "Generated by create next app",
@@ -12,10 +15,8 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
-      <body className="antialiased">
-        {children}
-      </body>
     </html>
   );
 }

 import type { Metadata } from "next";
+import { Inter } from "next/font/google";
 import "./globals.css";
+const inter = Inter({ subsets: ["latin"], variable: "--font-sans", display: "swap" });
 export const metadata: Metadata = {
   title: "Create Next App",
   description: "Generated by create next app",
   children: React.ReactNode;
 }>) {
   return (
+    <html lang="en" className={inter.variable}>
+      <body className="antialiased">{children}</body>
     </html>
   );
 }

frontend/src/components/ChatApp.tsx CHANGED Viewed

@@ -51,8 +51,8 @@ export default function ChatApp() {
   };
   return (
-    <div className="flex flex-col items-center h-screen bg-gradient-to-br from-white to-gray-100 text-gray-900 p-4">
-      <div className="w-full max-w-3xl flex flex-col flex-1 glass-panel rounded-lg overflow-hidden">
         <MessageList ref={listRef} messages={messages} />
         <MessageInput value={input} onChange={setInput} onSend={sendMessage} disabled={loading} />
       </div>

   };
   return (
+    <div className="flex flex-col min-h-screen bg-gradient-to-br from-white to-gray-100 text-gray-900 p-4">
+      <div className="w-full max-w-3xl flex flex-col flex-1 mx-auto glass-panel rounded-lg overflow-hidden">
         <MessageList ref={listRef} messages={messages} />
         <MessageInput value={input} onChange={setInput} onSend={sendMessage} disabled={loading} />
       </div>

frontend/src/components/MessageInput.tsx CHANGED Viewed

@@ -15,7 +15,7 @@ export default function MessageInput({ value, onChange, onSend, disabled }: Mess
   };
   return (
-    <form onSubmit={handleSubmit} className="flex gap-2 p-2">
       <input
         type="text"
         className="flex-1 bg-white/60 backdrop-blur-sm border border-gray-300 text-gray-900 px-3 py-2 rounded-md focus:outline-none"

   };
   return (
+    <form onSubmit={handleSubmit} className="flex gap-2 p-2 border-t border-gray-200">
       <input
         type="text"
         className="flex-1 bg-white/60 backdrop-blur-sm border border-gray-300 text-gray-900 px-3 py-2 rounded-md focus:outline-none"

frontend/src/components/MessageItem.tsx CHANGED Viewed

@@ -14,7 +14,7 @@ export default function MessageItem({ message }: MessageItemProps) {
   return (
     <div className={`flex flex-col ${alignment} animate-fadeIn`}>
       <div className="w-full max-w-xl p-3 my-2 glass-panel rounded-lg shadow-md">
-        <p className="whitespace-pre-wrap">{message.content}</p>
       </div>
     </div>
   );

   return (
     <div className={`flex flex-col ${alignment} animate-fadeIn`}>
       <div className="w-full max-w-xl p-3 my-2 glass-panel rounded-lg shadow-md">
+        <p className="whitespace-pre-wrap break-words">{message.content}</p>
       </div>
     </div>
   );

frontend/src/components/MessageList.tsx CHANGED Viewed

@@ -7,7 +7,7 @@ interface MessageListProps {
 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} />
       ))}

 const MessageList = forwardRef<HTMLDivElement, MessageListProps>(({ messages }, ref) => {
   return (
+    <div className="flex-1 overflow-y-auto p-4 space-y-4" ref={ref}>
       {messages.map((msg, idx) => (
         <MessageItem key={idx} message={msg} />
       ))}