UI 04

src/features/auth-page/login.tsx

@@ -29,7 +29,7 @@ export const LogIn: FC<LoginProps> = (props) => {
           <Avatar className="h-36 w-30">
             <AvatarImage src={theme === 'dark' ? "/Logo-COMAU-white.png" : "/ai-icon.png"} />
           </Avatar>
-          <span className={theme === 'dark' ? "text-white" : "text-blue"}>AIKO - AI for Comau</span>
+          <span className={theme === 'dark' ? "text-white" : "text-blue"}>AICO - AI for Comau</span>
         </CardTitle>
         {/* <CardDescription className="text-center text-sm">
         Welcome to Comau Generalist AI platform

src/features/chat-page/chat-header/chat-header.tsx

@@ -26,22 +26,21 @@ export const ChatHeader: FC<Props> = (props) => {
     <div className="bg-background border-b flex items-center py-2">
       <div className="container max-w-3xl flex justify-between items-center">
         <div className="flex flex-col">
-          <div className="grid grid-rows-2 grid-flow-col gap-2 items-center">
+          <div className="grid grid-rows-2 grid-flow-col gap-5 items-center">
             <div className="row-span-2">
               <Image
-                src={theme === 'dark' ? "/Logo-COMAU-white.png" : "/ai-icon.png"}
+                src={theme === 'dark' ? "/aico-white.png" : "/aico-blue.png"}
                 alt={props.chatThread.name}
                 width={100}
                 height={100}
               />
             </div>
             <div className="row-span-3">
-                {/* Riga vuota */} <div style={{ height: '20px' }}></div>
-                <span style={{ fontWeight: 'bold', fontSize: '30px' }}>
-                {/* <VenetianMask size={18} /> */}
+                 <span style={{ fontWeight: 'bold', fontSize: '30px' }}>
+                 {/* <VenetianMask size={18} /> */}
                 {persona} (AI for Comau)
               </span>
-              <div style={{ height: '20px' }}></div>
+              <div style={{ height: '10px' }}></div>
               <span className="flex flex-col" style={{ fontSize: '15px'}}>Current Chat:  {props.chatThread.name}</span>
             </div>
           </div>

src/features/chat-page/chat-page.tsx

@@ -10,6 +10,7 @@ import { useSession } from "next-auth/react";
 import { FC, useEffect, useRef } from "react";
 import { ExtensionModel } from "../extensions-page/extension-services/models";
 import { ChatHeader } from "./chat-header/chat-header";
+import Link from "next/link";
 import {
   ChatDocumentModel,
   ChatMessageModel,
@@ -18,6 +19,7 @@ import {
 import MessageContent from "./message-content";
 import Disclaimer from "../ui/chat/disclaimer";
 import { AlignCenter } from "lucide-react";
+import { useTheme } from "next-themes";
 
 interface ChatPageProps {
   messages: Array<ChatMessageModel>;
@@ -28,6 +30,7 @@ interface ChatPageProps {
 
 export const ChatPage: FC<ChatPageProps> = (props) => {
   const { data: session } = useSession();
+  const { theme } = useTheme();
 
   useEffect(() => {
     chatStore.initChatSession({
@@ -63,9 +66,10 @@ export const ChatPage: FC<ChatPageProps> = (props) => {
                 }}
                 profilePicture={
                   message.role === "assistant"
-                    ? "/aiko.png"
+                    ? theme === 'dark' ? "/logo-COMAU-white.png" : "/logo-COMAU.png"
                     : session?.user?.image
                 }
+                theme={theme}
               >
                 <MessageContent message={message} />
               </ChatMessageArea>
@@ -77,10 +81,11 @@ export const ChatPage: FC<ChatPageProps> = (props) => {
 
       <div className="flex flex-col items-center mt-4">
          <ChatInput />
-       <div className="mt-2 text-center">
-        <Disclaimer text={"The information generated by COMAU AICO could be wrong, please verify before using it."} />
+
+       <div className="mt-2 text-center text-sm">
+        <Disclaimer text={<>COMAU AICO generated content may be inaccurate. <Link target="_blank" href="https://drive.google.com/file/d/1OXkt4Z9hVoy4rXGFBOhzR9e0LJers5fJ/view">Refered Policy</Link>.</>}/>
        </div>
-      </div>
+      </div> 
     </main>
   );
 };

src/features/main-menu/main-menu.tsx

@@ -23,23 +23,27 @@ import { MenuLink } from "./menu-link";
 import { UserProfile } from "./user-profile";
 import Image from "next/image";
 
+
+
+
 export const MainMenu = async () => {
   const user = await getCurrentUser();
-
+
+
   return (
     <Menu>
       <MenuBar>
         <MenuItemContainer>
-          <MenuItem tooltip="Home" asChild>
-            <MenuLink href="/chat" ariaLabel="Go to the Home page">
-              <Home {...menuIconProps} />
-              {/* <Image
+          <MenuItem tooltip="Corporate" asChild>
+            <MenuLink href="https://www.comau.com/en/" ariaLabel="Go to the Corporate Site">
+              <Home/>
+              <Image 
                 src="/ai-icon.png"
-                width={45}
-                height={45}
+                width={80}
+                height={80}
                 quality={100}
                 alt="ai-icon"
-              /> */}
+              />
             </MenuLink>
           </MenuItem>
           <MenuTrayToggle />

src/features/main-menu/theme-toggle.tsx

@@ -25,14 +25,14 @@ export const ThemeToggle = () => {
         >
           <Moon size={18} />
         </TabsTrigger>
-        <TabsTrigger
+        {/*<TabsTrigger
           value="system"
           onClick={() => setTheme("system")}
           className="flex-1"
           title="System theme"
         >
           <Laptop2 size={18} />
-        </TabsTrigger>
+        </TabsTrigger>*/}
       </TabsList>
     </Tabs>
   );

src/features/theme/theme-config.ts

@@ -1,5 +1,5 @@
-export const AI_NAME = "AIKO";
-export const AI_DESCRIPTION = "Hey, I'm AIKO (Artificial Intelligence for Comau), your super assistant.";
+export const AI_NAME = "AICO";
+export const AI_DESCRIPTION = "Hey, I'm AICO (Artificial Intelligence for Comau), your super assistant.";
 export const CHAT_DEFAULT_PERSONA = AI_NAME;
 
 export const CHAT_DEFAULT_SYSTEM_PROMPT = `Your name is ${AI_NAME}. You are a friendly AI assistant. You must always return in markdown format.

src/features/ui/chat/chat-input-area/chat-input-area.tsx

@@ -14,7 +14,7 @@ export const ChatInputForm = React.forwardRef<
   <div className="absolute bottom-10 w-full py-2 ">
     <div className="container max-w-3xl flex flex-col gap-1">
       <ChatInputStatus status={status} />
-      <div className="backdrop-blur-xl bg-background/70 rounded-md overflow-hidden focus-within:border-primary border">
+      <div className="backdrop-blur-xl bg-background/70 rounded-3xl overflow-hidden border-2 border-gray-600 focus-within:border-4 focus-within:border-blue-900">
         <form ref={ref} className="p-[2px]" {...props}>
           {props.children}
         </form>

src/features/ui/chat/chat-input-area/chat-text-input.tsx

@@ -7,7 +7,7 @@ export const ChatTextInput = React.forwardRef<
   return (
     <textarea
       ref={ref}
-      className="p-4 w-full focus:outline-none bg-transparent resize-none "
+      className="p-4 w-full focus:outline-none bg-transparent resize-none text-md leading-relaxed"
       placeholder="Type your message here..."
       {...props}
     />

src/features/ui/chat/chat-message-area/chat-message-area.tsx

@@ -15,6 +15,7 @@ export const ChatMessageArea = (props: {
   profilePicture?: string | null;
   profileName?: string;
   role: "function" | "user" | "assistant" | "system" | "tool";
+  theme?: string;
   onCopy: () => void;
 }) => {
   const [isIconChecked, setIsIconChecked] = useState(false);
@@ -74,10 +75,11 @@ export const ChatMessageArea = (props: {
           {profile}
           <div
             className={cn(
-              "text-primary capitalize items-center flex",
+              "text-primary capitalize items-center flex text-muted-foreground",
               props.role === "function" || props.role === "tool"
                 ? "text-muted-foreground text-sm"
-                : ""
+                : "",
+              props.theme === "dark" ? "text-white" : "text-black"
             )}
           >
             {props.profileName}

src/features/ui/chat/chat-message-area/chat-message-content.tsx

@@ -11,7 +11,7 @@ const ChatMessageContentArea: ForwardRefRenderFunction<
   return (
     <div
       ref={ref}
-      className="container max-w-3xl  relative min-h-screen pb-[240px] pt-16  flex flex-col gap-16"
+      className="container max-w-3xl  relative min-h-screen pb-[240px] pt-6  flex flex-col gap-16"
     >
       {props.children}
     </div>

src/features/ui/chat/disclaimer.tsx

@@ -1,8 +1,9 @@
 // Disclaimer Component in TypeScript
-import React from 'react';
+import React, { ReactNode } from 'react';
+
 
 interface DisclaimerProps {
-  text: string;
+  text: ReactNode;
 }
 
 const Disclaimer: React.FC<DisclaimerProps> = ({ text }) => {

src/package.json

@@ -55,7 +55,7 @@
   },
   "devDependencies": {
     "@types/node": "^20",
-    "@types/react": "^18",
+    "@types/react": "^18.3.12",
     "@types/react-dom": "^18",
     "autoprefixer": "^10.0.1",
     "eslint": "^8",