ui changes

gilsondsouza · Aug 5, 2023 · bbb7c61 · bbb7c61
1 parent cafd3c0
commit bbb7c61
Show file tree

Hide file tree

Showing 15 changed files with 135 additions and 81 deletions.
diff --git a/src/app/chat/[id]/not-found.tsx b/src/app/chat/[id]/not-found.tsx
@@ -1,19 +1,25 @@
-import Typography from "@/components/typography";
 import { Card } from "@/components/ui/card";
 import { NewChat } from "@/features/chat/chat-menu/new-chat";
 
 export default async function NotFound() {
   return (
     <Card className="h-full items-center flex flex-col gap-4 justify-center">
-      <div className="text-center">
-        <Typography className="" variant="h3">
-          Uh-oh! 404
-        </Typography>
-        <div className="text-muted-foreground text-sm">
-          How about we start a new chat?
+      <div className="flex w-full items-center container mx-auto max-w-2xl justify-center h-full gap-2">
+        <div className="flex flex-col gap-2 flex-1 items-start">
+          <img
+            alt="Bubble gum man not found"
+            src="/bubble-gum-man-not-found.png"
+            className=""
+          />
+        </div>
+        <div className="gap-5 flex flex-col items-start  flex-1">
+          <h2 className="text-4xl font-bold"> Uh-oh! 404</h2>
+          <p className="text-sm text-muted-foreground">
+            How about we start a new chat?
+          </p>
+          <NewChat />
         </div>
       </div>
-      <NewChat></NewChat>
     </Card>
   );
 }
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -1,78 +1,81 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
- 
+
 @layer base {
   :root {
     --background: 0 0% 100%;
     --foreground: 222.2 84% 4.9%;
- 
+
     --muted: 210 40% 96.1%;
     --muted-foreground: 215.4 16.3% 46.9%;
- 
+
     --popover: 0 0% 100%;
     --popover-foreground: 222.2 84% 4.9%;
- 
+
     --card: 0 0% 100%;
     --card-foreground: 222.2 84% 4.9%;
- 
+
     --border: 214.3 31.8% 91.4%;
     --input: 214.3 31.8% 91.4%;
- 
+
     --primary: 222.2 47.4% 11.2%;
     --primary-foreground: 210 40% 98%;
- 
+
     --secondary: 210 40% 96.1%;
     --secondary-foreground: 222.2 47.4% 11.2%;
- 
+
     --accent: 210 40% 96.1%;
     --accent-foreground: 222.2 47.4% 11.2%;
- 
+
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 210 40% 98%;
- 
+
     --ring: 215 20.2% 65.1%;
- 
+
     --radius: 0.5rem;
+
+    --brand: 210 94% 49%;
   }
- 
+
   .dark {
     --background: 222.2 84% 4.9%;
     --foreground: 210 40% 98%;
- 
+
     --muted: 217.2 32.6% 17.5%;
     --muted-foreground: 215 20.2% 65.1%;
- 
+
     --popover: 222.2 84% 4.9%;
     --popover-foreground: 210 40% 98%;
- 
+
     --card: 222.2 84% 4.9%;
     --card-foreground: 210 40% 98%;
- 
+
     --border: 217.2 32.6% 17.5%;
     --input: 217.2 32.6% 17.5%;
- 
+
     --primary: 210 40% 98%;
     --primary-foreground: 222.2 47.4% 11.2%;
- 
+
     --secondary: 217.2 32.6% 17.5%;
     --secondary-foreground: 210 40% 98%;
- 
+
     --accent: 217.2 32.6% 17.5%;
     --accent-foreground: 210 40% 98%;
- 
+
     --destructive: 0 62.8% 30.6%;
     --destructive-foreground: 0 85.7% 97.3%;
- 
+
     --ring: 217.2 32.6% 17.5%;
+    --brand: 210 94% 49%;
   }
 }
- 
+
 @layer base {
   * {
     @apply border-border;
   }
   body {
     @apply bg-background text-foreground;
   }
-}
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -20,14 +20,19 @@ export default function RootLayout({
   return (
     <html lang="en" className="h-full overflow-hidden">
       <body
-        className={cn(
-          inter.className,
-          "flex p-2 h-full gap-2 bg-page-background"
-        )}
+        className={cn(inter.className, "flex w-full h-full bg-page-background")}
       >
         <Providers>
           <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
-            {children}
+            <div
+              className={cn(
+                inter.className,
+                "flex w-full p-2 h-full gap-2 bg-page-background"
+              )}
+            >
+              {children}
+            </div>
+
             <Toaster />
           </ThemeProvider>
         </Providers>

diff --git a/src/components/chat/chat-row.tsx b/src/components/chat/chat-row.tsx
@@ -19,7 +19,7 @@ const ChatRow: FC<ChatRowProps> = (props) => {
     <div
       className={cn(
         "border-b ",
-        props.type === "assistant" ? "bg-primary/5" : ""
+        props.type === "assistant" ? "bg-secondary" : ""
       )}
     >
       <div className="container mx-auto max-w-4xl py-6">

diff --git a/src/components/menu.tsx b/src/components/menu.tsx
@@ -49,8 +49,8 @@ const MenuItem: React.FC<MenuItemProps> = (props) => {
     <Link
       className={cn(
         props.className,
-        "items-center text-sm font-medium flex gap-2 p-2 py-1 rounded-md hover:bg-primary/10",
-        props.isSelected && "bg-primary/10"
+        "items-center text-sm font-medium flex gap-2 p-2 py-1 rounded-md hover:bg-secondary",
+        props.isSelected && "bg-secondary"
       )}
       href={props.href}
     >

diff --git a/src/features/chat/chat-menu/menu-items.tsx b/src/features/chat/chat-menu/menu-items.tsx
@@ -30,12 +30,15 @@ export const MenuItems: FC<Prop> = (props) => {
           key={thread.id}
           className="justify-between group/item"
         >
-          <MessageCircle size={16} />
+          <MessageCircle
+            size={16}
+            className={id === thread.id ? " text-brand" : ""}
+          />
           <span className="flex gap-2 items-center overflow-hidden flex-1">
             <span className="overflow-ellipsis truncate"> {thread.name}</span>
           </span>
           <Button
-            className="invisible  group-hover/item:visible"
+            className="invisible  group-hover/item:visible hover:text-brand"
             size={"sm"}
             variant={"ghost"}
             onClick={async (e) => {

diff --git a/src/features/chat/chat-ui/chat-empty-state.tsx b/src/features/chat/chat-ui/chat-empty-state.tsx
@@ -0,0 +1,35 @@
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { FC } from "react";
+import { ChatType } from "../chat-services/models";
+interface Prop {
+  onValueChange: (value: ChatType) => void;
+}
+export const EmptyState: FC<Prop> = (props) => {
+  return (
+    <div className="flex w-full items-center container mx-auto max-w-2xl justify-center h-full gap-2">
+      <div className="flex flex-col gap-2 flex-1 items-start">
+        <img
+          alt="Bubble gum cycling"
+          src="/bubble-gum-cycling.png"
+          className=""
+        />
+      </div>
+      <div className="gap-5 flex flex-col items-start  flex-1">
+        <h2 className="text-4xl font-bold">Hello</h2>
+        <p className="text-sm text-muted-foreground">
+          Start by just typing your message in the box below. You can also
+          personalise the chat by making changes to the settings.
+        </p>
+        <Tabs
+          defaultValue={"GPT-3.5"}
+          onValueChange={(value) => props.onValueChange(value as ChatType)}
+        >
+          <TabsList className="grid w-full grid-cols-2 h-12 items-stretch">
+            <TabsTrigger value="GPT-3.5">⚡ GPT-3.5</TabsTrigger>
+            <TabsTrigger value="GPT-4">✨ GPT-4</TabsTrigger>
+          </TabsList>
+        </Tabs>
+      </div>
+    </div>
+  );
+};
diff --git a/src/features/chat/chat-ui/chat-header.tsx b/src/features/chat/chat-ui/chat-header.tsx
@@ -4,21 +4,17 @@ import { ChatType } from "../chat-services/models";
 
 interface Prop {
   chatType: ChatType;
-  isEnabled: boolean;
-  onValueChange: (value: ChatType) => void;
+  disable: boolean;
 }
 
 export const ChatHeader: FC<Prop> = (props) => {
   return (
-    <Tabs
-      defaultValue={"GPT-3.5"}
-      onValueChange={(value) => props.onValueChange(value as ChatType)}
-    >
+    <Tabs defaultValue={"GPT-3.5"}>
       <TabsList className="grid w-full grid-cols-2 h-12 items-stretch">
-        <TabsTrigger disabled={props.isEnabled} value="GPT-3.5">
+        <TabsTrigger disabled={props.disable} value="GPT-3.5">
           ⚡ GPT-3.5
         </TabsTrigger>
-        <TabsTrigger disabled={props.isEnabled} value="GPT-4">
+        <TabsTrigger disabled={props.disable} value="GPT-4">
           ✨ GPT-4
         </TabsTrigger>
       </TabsList>

diff --git a/src/features/chat/chat-ui/chat-ui.tsx b/src/features/chat/chat-ui/chat-ui.tsx
@@ -13,6 +13,7 @@ import { useParams } from "next/navigation";
 import { FC, FormEvent, useRef, useState } from "react";
 import { ChatMessageModel, PromptGPTBody } from "../chat-services/models";
 import { transformCosmosToAIModel } from "../chat-services/utils";
+import { EmptyState } from "./chat-empty-state";
 import { ChatHeader } from "./chat-header";
 
 interface Prop {
@@ -72,33 +73,37 @@ export const ChatUI: FC<Prop> = (props) => {
     handleSubmit(e);
   };
 
-  return (
-    <Card className="h-full relative">
-      <div className="h-full rounded-md overflow-y-auto" ref={scrollRef}>
-        <div className="flex justify-center p-4">
-          <ChatHeader
-            isEnabled={messages.length !== 0}
-            chatType="data"
-            onValueChange={(chatType) => {}}
+  const ChatWindow = (
+    <div className=" h-full rounded-md overflow-y-auto" ref={scrollRef}>
+      <div className="flex justify-center p-4">
+        <ChatHeader disable={messages.length === 0} chatType="data" />
+      </div>
+      <div className=" pb-[80px] ">
+        {messages.map((message, index) => (
+          <ChatRow
+            name={
+              message.role === "user" ? session?.user?.name! : "AzureChatGPT"
+            }
+            profilePicture={
+              message.role === "user" ? session?.user?.image! : "/ai-icon.png"
+            }
+            message={message.content}
+            type={message.role}
+            key={index}
           />
-        </div>
-        <div className=" pb-[80px] ">
-          {messages.map((message, index) => (
-            <ChatRow
-              name={
-                message.role === "user" ? session?.user?.name! : "AzureChatGPT"
-              }
-              profilePicture={
-                message.role === "user" ? session?.user?.image! : "/ai-icon.png"
-              }
-              message={message.content}
-              type={message.role}
-              key={index}
-            />
-          ))}
-          {isLoading && <ChatLoading />}
-        </div>
+        ))}
+        {isLoading && <ChatLoading />}
       </div>
+    </div>
+  );
+
+  return (
+    <Card className="h-full relative overflow-hidden">
+      {messages.length !== 0 ? (
+        ChatWindow
+      ) : (
+        <EmptyState onValueChange={(chat) => onValueChange(chat)} />
+      )}
       <ChatInput
         isLoading={isLoading}
         value={input}

diff --git a/src/features/langchain/vector-stores/azure-cog-search/azure-cog-vector-store.ts b/src/features/langchain/vector-stores/azure-cog-search/azure-cog-vector-store.ts
@@ -110,7 +110,7 @@ export class AzureCogSearch<
     k?: number,
     filter?: AzureCogFilter,
     _callbacks: Callbacks | undefined = undefined
-  ): Promise<[Document, number][]> {
+  ): Promise<[Document<TModel>, number][]> {
     const embeddings = await this.embeddings.embedQuery(query);
     return this.similaritySearchVectorWithScore(embeddings, k || 5, filter);
   }

diff --git a/src/features/menu/menu.tsx b/src/features/menu/menu.tsx
@@ -5,23 +5,23 @@ import { UserProfile } from "../user-profile";
 
 export const MainMenu = () => {
   return (
-    <div className="flex gap-3 flex-col justify-between">
-      <div>
+    <div className="flex gap-2 flex-col justify-between">
+      <div className="flex gap-2 flex-col justify-between">
         <Link
           href="/"
           className="w-10 h-10 items-center justify-center flex"
           title="Home"
         >
-          <Avatar className="h-8 w-8">
+          <Avatar className="">
             <AvatarImage src="/ai-icon.png" />
           </Avatar>
         </Link>
         <Link
           href="/reporting"
-          className="w-10 h-10 p-2 items-center justify-center flex border rounded-full"
+          className="w-10 h-10 items-center justify-center flex rounded-full hover:bg-secondary"
           title="Reporting"
         >
-          <BarChartHorizontalBig />
+          <BarChartHorizontalBig size={20} />
         </Link>
       </div>
       <UserProfile />

diff --git a/src/features/user-profile.tsx b/src/features/user-profile.tsx
@@ -21,7 +21,7 @@ const UserProfile = () => {
       <DropdownMenuTrigger asChild>
         <div className="flex flex-col items-stretch">
           <Button variant="link" className="relative gap-2 p-0 justify-start">
-            <Avatar className="h-8 w-8">
+            <Avatar className="">
               <AvatarImage
                 src={session?.user?.image!}
                 alt={session?.user?.name!}

diff --git a/src/public/bubble-gum-cycling.png b/src/public/bubble-gum-cycling.png
diff --git a/src/public/bubble-gum-man-not-found.png b/src/public/bubble-gum-man-not-found.png
diff --git a/src/tailwind.config.js b/src/tailwind.config.js
@@ -18,6 +18,7 @@ module.exports = {
     },
     extend: {
       colors: {
+        brand: "hsl(var(--brand))",
         border: "hsl(var(--border))",
         input: "hsl(var(--input))",
         ring: "hsl(var(--ring))",