From 236d71bdbac148cb63f6cae2a96d85f199af7a4d Mon Sep 17 00:00:00 2001
From: paulclindo <paulclindo@gmail.com>
Date: Wed, 29 Nov 2023 17:55:18 -0500
Subject: [PATCH 1/9] refactor: shinkai-tray ui components

---
 .../src/components/chat/message.tsx           |  16 +-
 .../shinkai-tray/src/components/ui/avatar.tsx |  48 -----
 .../shinkai-tray/src/components/ui/button.tsx |  70 -------
 .../src/components/ui/checkbox.tsx            |  28 ---
 .../src/components/ui/command.tsx             | 153 ---------------
 .../components/ui/copy-to-clipboard-icon.tsx  |  48 -----
 .../shinkai-tray/src/components/ui/dialog.tsx | 118 ------------
 .../src/components/ui/dots-loader.tsx         |  13 --
 .../src/components/ui/error-message.tsx       |  10 -
 apps/shinkai-tray/src/components/ui/form.tsx  | 181 ------------------
 .../src/components/ui/hover-card.tsx          |  27 ---
 apps/shinkai-tray/src/components/ui/input.tsx |  25 ---
 apps/shinkai-tray/src/components/ui/label.tsx |  24 ---
 .../src/components/ui/popover.tsx             |  29 ---
 .../src/components/ui/qr-code.tsx             |  32 ----
 .../src/components/ui/scroll-area.tsx         |  53 -----
 .../shinkai-tray/src/components/ui/select.tsx | 118 ------------
 .../src/components/ui/separator.tsx           |  29 ---
 .../src/components/ui/skeleton.tsx            |  18 --
 .../shinkai-tray/src/components/ui/switch.tsx |  27 ---
 .../src/components/ui/textarea.tsx            |  48 -----
 .../src/components/ui/tooltip.tsx             |  28 ---
 apps/shinkai-tray/src/globals.css             |  10 +-
 .../src/pages/chat/chat-conversation.tsx      |  26 +--
 .../src/pages/chat/empty-message.tsx          |  16 +-
 apps/shinkai-tray/src/pages/chat/layout.tsx   |  26 +--
 apps/shinkai-tray/src/pages/create-agent.tsx  |  57 ++----
 apps/shinkai-tray/src/pages/create-chat.tsx   |  18 +-
 apps/shinkai-tray/src/pages/create-job.tsx    |  32 ++--
 apps/shinkai-tray/src/pages/generate-code.tsx |  35 ++--
 .../src/pages/layout/main-layout.tsx          |  28 ++-
 .../src/pages/layout/simple-layout.tsx        |   1 +
 apps/shinkai-tray/src/pages/onboarding.tsx    |  26 +--
 apps/shinkai-tray/tailwind.config.js          |  14 +-
 libs/shinkai-ui/src/components/command.tsx    |   9 +-
 libs/shinkai-ui/src/components/textfield.tsx  |  11 +-
 36 files changed, 144 insertions(+), 1308 deletions(-)
 delete mode 100644 apps/shinkai-tray/src/components/ui/avatar.tsx
 delete mode 100644 apps/shinkai-tray/src/components/ui/button.tsx
 delete mode 100644 apps/shinkai-tray/src/components/ui/checkbox.tsx
 delete mode 100644 apps/shinkai-tray/src/components/ui/command.tsx
 delete mode 100644 apps/shinkai-tray/src/components/ui/copy-to-clipboard-icon.tsx
 delete mode 100644 apps/shinkai-tray/src/components/ui/dialog.tsx
 delete mode 100644 apps/shinkai-tray/src/components/ui/dots-loader.tsx
 delete mode 100644 apps/shinkai-tray/src/components/ui/error-message.tsx
 delete mode 100644 apps/shinkai-tray/src/components/ui/form.tsx
 delete mode 100644 apps/shinkai-tray/src/components/ui/hover-card.tsx
 delete mode 100644 apps/shinkai-tray/src/components/ui/input.tsx
 delete mode 100644 apps/shinkai-tray/src/components/ui/label.tsx
 delete mode 100644 apps/shinkai-tray/src/components/ui/popover.tsx
 delete mode 100644 apps/shinkai-tray/src/components/ui/qr-code.tsx
 delete mode 100644 apps/shinkai-tray/src/components/ui/scroll-area.tsx
 delete mode 100644 apps/shinkai-tray/src/components/ui/select.tsx
 delete mode 100644 apps/shinkai-tray/src/components/ui/separator.tsx
 delete mode 100644 apps/shinkai-tray/src/components/ui/skeleton.tsx
 delete mode 100644 apps/shinkai-tray/src/components/ui/switch.tsx
 delete mode 100644 apps/shinkai-tray/src/components/ui/textarea.tsx
 delete mode 100644 apps/shinkai-tray/src/components/ui/tooltip.tsx

diff --git a/apps/shinkai-tray/src/components/chat/message.tsx b/apps/shinkai-tray/src/components/chat/message.tsx
index 9d42633dd..9d398b419 100644
--- a/apps/shinkai-tray/src/components/chat/message.tsx
+++ b/apps/shinkai-tray/src/components/chat/message.tsx
@@ -1,17 +1,19 @@
 import type { ShinkaiMessage } from '@shinkai_network/shinkai-message-ts/models';
 import { MessageSchemaType } from '@shinkai_network/shinkai-message-ts/models';
 import { ChatConversationMessage } from '@shinkai_network/shinkai-node-state/lib/queries/getChatConversation/types';
-import MarkdownPreview from '@uiw/react-markdown-preview';
-
-import { cn } from '../../lib/utils';
-import { Avatar, AvatarFallback, AvatarImage } from '../ui/avatar';
-import CopyToClipboardIcon from '../ui/copy-to-clipboard-icon';
 import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+  CopyToClipboardIcon,
   Tooltip,
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
-} from '../ui/tooltip';
+} from '@shinkai_network/shinkai-ui';
+import MarkdownPreview from '@uiw/react-markdown-preview';
+
+import { cn } from '../../lib/utils';
 
 export const getMessageFilesInbox = (
   message: ShinkaiMessage,
@@ -70,7 +72,7 @@ const Message = ({
       </Avatar>
       <div
         className={cn(
-          'group flex items-start gap-1 break-words rounded-lg bg-transparent px-2.5 py-3 overflow-x-hidden',
+          'group flex items-start gap-1 overflow-x-hidden break-words rounded-lg bg-transparent px-2.5 py-3',
           message.isLocal
             ? 'rounded-tl-none border border-slate-800'
             : 'rounded-tr-none border-none bg-[rgba(217,217,217,0.04)]',
diff --git a/apps/shinkai-tray/src/components/ui/avatar.tsx b/apps/shinkai-tray/src/components/ui/avatar.tsx
deleted file mode 100644
index 9d6107afa..000000000
--- a/apps/shinkai-tray/src/components/ui/avatar.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import * as AvatarPrimitive from '@radix-ui/react-avatar';
-import * as React from 'react';
-
-import { cn } from '../../lib/utils';
-
-const Avatar = React.forwardRef<
-  React.ElementRef<typeof AvatarPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
->(({ className, ...props }, ref) => (
-  <AvatarPrimitive.Root
-    className={cn(
-      'relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full',
-      className,
-    )}
-    ref={ref}
-    {...props}
-  />
-));
-Avatar.displayName = AvatarPrimitive.Root.displayName;
-
-const AvatarImage = React.forwardRef<
-  React.ElementRef<typeof AvatarPrimitive.Image>,
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
->(({ className, ...props }, ref) => (
-  <AvatarPrimitive.Image
-    className={cn('aspect-square h-full w-full', className)}
-    ref={ref}
-    {...props}
-  />
-));
-AvatarImage.displayName = AvatarPrimitive.Image.displayName;
-
-const AvatarFallback = React.forwardRef<
-  React.ElementRef<typeof AvatarPrimitive.Fallback>,
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
->(({ className, ...props }, ref) => (
-  <AvatarPrimitive.Fallback
-    className={cn(
-      'flex h-full w-full items-center justify-center rounded-full bg-gray-100 dark:bg-gray-800',
-      className,
-    )}
-    ref={ref}
-    {...props}
-  />
-));
-AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
-
-export { Avatar, AvatarImage, AvatarFallback };
diff --git a/apps/shinkai-tray/src/components/ui/button.tsx b/apps/shinkai-tray/src/components/ui/button.tsx
deleted file mode 100644
index 9ff48f1c3..000000000
--- a/apps/shinkai-tray/src/components/ui/button.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import { Slot } from '@radix-ui/react-slot';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { Loader } from 'lucide-react';
-import * as React from 'react';
-
-import { cn } from '../../lib/utils';
-
-const buttonVariants = cva(
-  'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-gray-950 disabled:pointer-events-none disabled:opacity-50 dark:focus-visible:ring-gray-300',
-  {
-    variants: {
-      variant: {
-        default:
-          'bg-primary-600 hover:bg-primary-700 text-white shadow dark:bg-gray-50 dark:text-gray-900 dark:hover:bg-gray-50/90',
-        destructive:
-          'bg-red-500 text-gray-50 shadow-sm hover:bg-red-500/90 dark:bg-red-900 dark:text-gray-50 dark:hover:bg-red-900/90',
-        outline:
-          'border border-gray-200 bg-transparent shadow-sm hover:bg-gray-100 hover:text-gray-900 dark:border-gray-800 dark:hover:bg-gray-800 dark:hover:text-gray-50',
-        secondary:
-          'bg-gray-100 text-gray-900 shadow-sm hover:bg-gray-100/80 dark:bg-gray-800 dark:text-gray-50 dark:hover:bg-gray-800/80',
-        ghost:
-          'hover:bg-gray-800 hover:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-gray-50',
-        link: 'text-gray-900 underline-offset-4 hover:underline dark:text-gray-50',
-      },
-      size: {
-        default: 'h-9 px-4 py-2',
-        sm: 'h-8 rounded-md px-3 text-xs',
-        lg: 'h-10 rounded-md px-8',
-        icon: 'h-9 w-9',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-      size: 'default',
-    },
-  },
-);
-
-export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
-  asChild?: boolean;
-  isLoading?: boolean;
-}
-
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  (
-    { className, variant, size, asChild = false, isLoading = false, ...props },
-    ref,
-  ) => {
-    const Comp = asChild ? Slot : 'button';
-    return (
-      <Comp
-        className={cn(buttonVariants({ variant, size, className }))}
-        ref={ref}
-        {...props}
-      >
-        {isLoading ? (
-          <Loader
-            className={cn('h-4 w-4 animate-spin', size !== 'icon' && 'mr-2')}
-          />
-        ) : null}
-        {isLoading && size === 'icon' ? null : props.children}
-      </Comp>
-    );
-  },
-);
-Button.displayName = 'Button';
-
-export { Button, buttonVariants };
diff --git a/apps/shinkai-tray/src/components/ui/checkbox.tsx b/apps/shinkai-tray/src/components/ui/checkbox.tsx
deleted file mode 100644
index 51ae52220..000000000
--- a/apps/shinkai-tray/src/components/ui/checkbox.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
-import { CheckIcon } from '@radix-ui/react-icons';
-import * as React from 'react';
-
-import { cn } from '../../lib/utils';
-
-const Checkbox = React.forwardRef<
-  React.ElementRef<typeof CheckboxPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
->(({ className, ...props }, ref) => (
-  <CheckboxPrimitive.Root
-    className={cn(
-      'border-primary focus-visible:ring-ring data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground peer h-4 w-4 shrink-0 rounded-sm border shadow focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50',
-      className,
-    )}
-    ref={ref}
-    {...props}
-  >
-    <CheckboxPrimitive.Indicator
-      className={cn('flex items-center justify-center text-current')}
-    >
-      <CheckIcon className="h-4 w-4" />
-    </CheckboxPrimitive.Indicator>
-  </CheckboxPrimitive.Root>
-));
-Checkbox.displayName = CheckboxPrimitive.Root.displayName;
-
-export { Checkbox };
diff --git a/apps/shinkai-tray/src/components/ui/command.tsx b/apps/shinkai-tray/src/components/ui/command.tsx
deleted file mode 100644
index 006d7b245..000000000
--- a/apps/shinkai-tray/src/components/ui/command.tsx
+++ /dev/null
@@ -1,153 +0,0 @@
-import { DialogProps } from '@radix-ui/react-dialog';
-import { MagnifyingGlassIcon } from '@radix-ui/react-icons';
-import { Command as CommandPrimitive } from 'cmdk';
-import * as React from 'react';
-
-import { cn } from '../../lib/utils';
-import { Dialog, DialogContent } from './dialog';
-
-const Command = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive
-    className={cn(
-      'flex h-full w-full flex-col overflow-hidden rounded-md bg-white text-gray-950 dark:bg-gray-950 dark:text-gray-50',
-      className,
-    )}
-    ref={ref}
-    {...props}
-  />
-));
-Command.displayName = CommandPrimitive.displayName;
-
-interface CommandDialogProps extends DialogProps {}
-
-const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
-  return (
-    <Dialog {...props}>
-      <DialogContent className="overflow-hidden p-0">
-        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-gray-500 dark:[&_[cmdk-group-heading]]:text-gray-400 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
-          {children}
-        </Command>
-      </DialogContent>
-    </Dialog>
-  );
-};
-
-const CommandInput = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Input>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
->(({ className, ...props }, ref) => (
-  <div className="flex items-center border-b px-3">
-    <MagnifyingGlassIcon className="mr-2 h-4 w-4 shrink-0 opacity-50" />
-    <CommandPrimitive.Input
-      className={cn(
-        'flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-gray-500 disabled:cursor-not-allowed disabled:opacity-50 dark:placeholder:text-gray-400',
-        className,
-      )}
-      ref={ref}
-      {...props}
-    />
-  </div>
-));
-
-CommandInput.displayName = CommandPrimitive.Input.displayName;
-
-const CommandList = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.List>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.List
-    className={cn('max-h-[280px] overflow-y-auto overflow-x-hidden', className)}
-    ref={ref}
-    {...props}
-  />
-));
-
-CommandList.displayName = CommandPrimitive.List.displayName;
-
-const CommandEmpty = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Empty>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
->((props, ref) => (
-  <CommandPrimitive.Empty
-    className="py-6 text-center text-sm"
-    ref={ref}
-    {...props}
-  />
-));
-
-CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
-
-const CommandGroup = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Group>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.Group
-    className={cn(
-      'text-foreground overflow-hidden p-1 dark:text-gray-50 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-gray-500 dark:[&_[cmdk-group-heading]]:text-gray-400',
-      className,
-    )}
-    ref={ref}
-    {...props}
-  />
-));
-
-CommandGroup.displayName = CommandPrimitive.Group.displayName;
-
-const CommandSeparator = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.Separator
-    className={cn('-mx-1 h-px bg-slate-800 dark:bg-gray-800', className)}
-    ref={ref}
-    {...props}
-  />
-));
-CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
-
-const CommandItem = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.Item
-    className={cn(
-      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-gray-800 aria-selected:text-gray-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:aria-selected:bg-gray-800 dark:aria-selected:text-gray-50',
-      className,
-    )}
-    ref={ref}
-    {...props}
-  />
-));
-
-CommandItem.displayName = CommandPrimitive.Item.displayName;
-
-const CommandShortcut = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLSpanElement>) => {
-  return (
-    <span
-      className={cn(
-        'ml-auto text-xs tracking-widest text-gray-500 dark:text-gray-400',
-        className,
-      )}
-      {...props}
-    />
-  );
-};
-CommandShortcut.displayName = 'CommandShortcut';
-
-export {
-  Command,
-  CommandDialog,
-  CommandInput,
-  CommandList,
-  CommandEmpty,
-  CommandGroup,
-  CommandItem,
-  CommandShortcut,
-  CommandSeparator,
-};
diff --git a/apps/shinkai-tray/src/components/ui/copy-to-clipboard-icon.tsx b/apps/shinkai-tray/src/components/ui/copy-to-clipboard-icon.tsx
deleted file mode 100644
index 77dcd5843..000000000
--- a/apps/shinkai-tray/src/components/ui/copy-to-clipboard-icon.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import { CheckCircle2, CopyIcon } from 'lucide-react';
-import { useState } from 'react';
-
-import { cn } from '../../lib/utils';
-import { Button } from './button';
-
-type CopyToClipboardIconProps = {
-  string?: string;
-  children?: React.ReactNode;
-  className?: string;
-};
-
-const CopyToClipboardIcon = ({
-  string,
-  children,
-  className,
-}: CopyToClipboardIconProps) => {
-  const [clipboard, setClipboard] = useState(false);
-
-  let timeout: ReturnType<typeof setTimeout>;
-  const onCopy = () => {
-    if (!string) return;
-    const string_ = string.trim();
-    navigator.clipboard.writeText(string_);
-    setClipboard(true);
-    clearTimeout(timeout);
-    timeout = setTimeout(() => setClipboard(false), 1000);
-  };
-
-  const ClipboardIcon = clipboard ? CheckCircle2 : CopyIcon;
-
-  return (
-    <Button
-      className={cn(
-        'text-muted-foreground flex gap-2 px-2 text-xs font-normal',
-        className,
-      )}
-      disabled={!string}
-      onClick={onCopy}
-      variant="ghost"
-    >
-      <ClipboardIcon className={cn('h-4 w-4', clipboard && 'text-green-600')} />
-      {children}
-    </Button>
-  );
-};
-
-export default CopyToClipboardIcon;
diff --git a/apps/shinkai-tray/src/components/ui/dialog.tsx b/apps/shinkai-tray/src/components/ui/dialog.tsx
deleted file mode 100644
index 72eccf934..000000000
--- a/apps/shinkai-tray/src/components/ui/dialog.tsx
+++ /dev/null
@@ -1,118 +0,0 @@
-import * as DialogPrimitive from '@radix-ui/react-dialog';
-import { Cross2Icon } from '@radix-ui/react-icons';
-import * as React from 'react';
-
-import { cn } from '../../lib/utils';
-
-const Dialog = DialogPrimitive.Root;
-
-const DialogTrigger = DialogPrimitive.Trigger;
-
-const DialogPortal = ({ ...props }: DialogPrimitive.DialogPortalProps) => (
-  <DialogPrimitive.Portal {...props} />
-);
-DialogPortal.displayName = DialogPrimitive.Portal.displayName;
-
-const DialogOverlay = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Overlay
-    className={cn(
-      'bg-app-gradient data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 backdrop-blur-sm',
-      className,
-    )}
-    ref={ref}
-    {...props}
-  />
-));
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-
-const DialogContent = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-  <DialogPortal>
-    <DialogOverlay />
-    <DialogPrimitive.Content
-      className={cn(
-        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 bg-[#131B23] p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',
-        className,
-      )}
-      ref={ref}
-      {...props}
-    >
-      {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-gray-950 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-gray-100 data-[state=open]:text-gray-500">
-        <Cross2Icon className="h-4 w-4" />
-        <span className="sr-only">Close</span>
-      </DialogPrimitive.Close>
-    </DialogPrimitive.Content>
-  </DialogPortal>
-));
-DialogContent.displayName = DialogPrimitive.Content.displayName;
-
-const DialogHeader = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      'flex flex-col space-y-1.5 text-center sm:text-left',
-      className,
-    )}
-    {...props}
-  />
-);
-DialogHeader.displayName = 'DialogHeader';
-
-const DialogFooter = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
-      className,
-    )}
-    {...props}
-  />
-);
-DialogFooter.displayName = 'DialogFooter';
-
-const DialogTitle = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Title
-    className={cn(
-      'text-lg font-semibold leading-none tracking-tight',
-      className,
-    )}
-    ref={ref}
-    {...props}
-  />
-));
-DialogTitle.displayName = DialogPrimitive.Title.displayName;
-
-const DialogDescription = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Description
-    className={cn('text-foreground text-xs', className)}
-    ref={ref}
-    {...props}
-  />
-));
-DialogDescription.displayName = DialogPrimitive.Description.displayName;
-
-export {
-  Dialog,
-  DialogTrigger,
-  DialogContent,
-  DialogHeader,
-  DialogFooter,
-  DialogTitle,
-  DialogDescription,
-};
diff --git a/apps/shinkai-tray/src/components/ui/dots-loader.tsx b/apps/shinkai-tray/src/components/ui/dots-loader.tsx
deleted file mode 100644
index 18d01ceb4..000000000
--- a/apps/shinkai-tray/src/components/ui/dots-loader.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-const DotsLoader = ({ className }: { className?: string }) => {
-  return (
-    <div className={className}>
-      <div className="flex h-4 space-x-1.5">
-        <div className="h-2 w-2 animate-[loaderDots_0.6s_0s_infinite_alternate] rounded-full bg-slate-100"></div>
-        <div className="h-2 w-2 animate-[loaderDots_0.6s_0.3s_infinite_alternate] rounded-full bg-slate-100"></div>
-        <div className="h-2 w-2 animate-[loaderDots_0.6s_0.6s_infinite_alternate] rounded-full bg-slate-100"></div>
-      </div>
-    </div>
-  );
-};
-
-export default DotsLoader;
diff --git a/apps/shinkai-tray/src/components/ui/error-message.tsx b/apps/shinkai-tray/src/components/ui/error-message.tsx
deleted file mode 100644
index f075ad541..000000000
--- a/apps/shinkai-tray/src/components/ui/error-message.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-const ErrorMessage = ({ message }: { message: string }) => {
-  return (
-    <div className="rounded bg-red-500/10 px-4 py-2 text-sm text-red-700">
-      <strong className="font-bold">Error: </strong>
-      <span className="block sm:inline"> {message} </span>
-    </div>
-  );
-};
-
-export default ErrorMessage;
diff --git a/apps/shinkai-tray/src/components/ui/form.tsx b/apps/shinkai-tray/src/components/ui/form.tsx
deleted file mode 100644
index 19f0f0f09..000000000
--- a/apps/shinkai-tray/src/components/ui/form.tsx
+++ /dev/null
@@ -1,181 +0,0 @@
-import * as LabelPrimitive from '@radix-ui/react-label';
-import { Slot } from '@radix-ui/react-slot';
-import * as React from 'react';
-import {
-  Controller,
-  ControllerProps,
-  FieldPath,
-  FieldValues,
-  FormProvider,
-  useFormContext,
-} from 'react-hook-form';
-
-import { cn } from '../../lib/utils';
-import { Label } from './label';
-
-const Form = FormProvider;
-
-type FormFieldContextValue<
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
-> = {
-  name: TName;
-};
-
-const FormFieldContext = React.createContext<FormFieldContextValue>(
-  {} as FormFieldContextValue,
-);
-
-const FormField = <
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
->({
-  ...props
-}: ControllerProps<TFieldValues, TName>) => {
-  return (
-    <FormFieldContext.Provider value={{ name: props.name }}>
-      <Controller {...props} />
-    </FormFieldContext.Provider>
-  );
-};
-
-const useFormField = () => {
-  const fieldContext = React.useContext(FormFieldContext);
-  const itemContext = React.useContext(FormItemContext);
-  const { getFieldState, formState } = useFormContext();
-
-  const fieldState = getFieldState(fieldContext.name, formState);
-
-  if (!fieldContext) {
-    throw new Error('useFormField should be used within <FormField>');
-  }
-
-  const { id } = itemContext;
-
-  return {
-    id,
-    name: fieldContext.name,
-    formItemId: `${id}-form-item`,
-    formDescriptionId: `${id}-form-item-description`,
-    formMessageId: `${id}-form-item-message`,
-    ...fieldState,
-  };
-};
-
-type FormItemContextValue = {
-  id: string;
-};
-
-const FormItemContext = React.createContext<FormItemContextValue>(
-  {} as FormItemContextValue,
-);
-
-const FormItem = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => {
-  const id = React.useId();
-
-  return (
-    <FormItemContext.Provider value={{ id }}>
-      <div className={cn('space-y-2', className)} ref={ref} {...props} />
-    </FormItemContext.Provider>
-  );
-});
-FormItem.displayName = 'FormItem';
-
-const FormLabel = React.forwardRef<
-  React.ElementRef<typeof LabelPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
->(({ className, ...props }, ref) => {
-  const { error, formItemId } = useFormField();
-
-  return (
-    <Label
-      className={cn(error && 'text-red-500 dark:text-red-900', className)}
-      htmlFor={formItemId}
-      ref={ref}
-      {...props}
-    />
-  );
-});
-FormLabel.displayName = 'FormLabel';
-
-const FormControl = React.forwardRef<
-  React.ElementRef<typeof Slot>,
-  React.ComponentPropsWithoutRef<typeof Slot>
->(({ ...props }, ref) => {
-  const { error, formItemId, formDescriptionId, formMessageId } =
-    useFormField();
-
-  return (
-    <Slot
-      aria-describedby={
-        error ? `${formDescriptionId} ${formMessageId}` : `${formDescriptionId}`
-      }
-      aria-invalid={!!error}
-      id={formItemId}
-      ref={ref}
-      {...props}
-    />
-  );
-});
-FormControl.displayName = 'FormControl';
-
-const FormDescription = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, ...props }, ref) => {
-  const { formDescriptionId } = useFormField();
-
-  return (
-    <p
-      className={cn(
-        'text-[0.8rem] text-gray-500 dark:text-gray-400',
-        className,
-      )}
-      id={formDescriptionId}
-      ref={ref}
-      {...props}
-    />
-  );
-});
-FormDescription.displayName = 'FormDescription';
-
-const FormMessage = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, children, ...props }, ref) => {
-  const { error, formMessageId } = useFormField();
-  const body = error ? String(error?.message) : children;
-
-  if (!body) {
-    return null;
-  }
-
-  return (
-    <p
-      className={cn(
-        'text-[0.8rem] font-medium text-red-500 dark:text-red-900',
-        className,
-      )}
-      id={formMessageId}
-      ref={ref}
-      {...props}
-    >
-      {body}
-    </p>
-  );
-});
-FormMessage.displayName = 'FormMessage';
-
-export {
-  useFormField,
-  Form,
-  FormItem,
-  FormLabel,
-  FormControl,
-  FormDescription,
-  FormMessage,
-  FormField,
-};
diff --git a/apps/shinkai-tray/src/components/ui/hover-card.tsx b/apps/shinkai-tray/src/components/ui/hover-card.tsx
deleted file mode 100644
index 97a167e46..000000000
--- a/apps/shinkai-tray/src/components/ui/hover-card.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import * as HoverCardPrimitive from '@radix-ui/react-hover-card';
-import * as React from 'react';
-
-import { cn } from '../../lib/utils';
-
-const HoverCard = HoverCardPrimitive.Root;
-
-const HoverCardTrigger = HoverCardPrimitive.Trigger;
-
-const HoverCardContent = React.forwardRef<
-  React.ElementRef<typeof HoverCardPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
->(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
-  <HoverCardPrimitive.Content
-    align={align}
-    className={cn(
-      'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 rounded-md border border-gray-200 bg-white p-4 text-gray-950 shadow-md outline-none dark:border-gray-800 dark:bg-gray-950 dark:text-gray-50',
-      className,
-    )}
-    ref={ref}
-    sideOffset={sideOffset}
-    {...props}
-  />
-));
-HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
-
-export { HoverCard, HoverCardTrigger, HoverCardContent };
diff --git a/apps/shinkai-tray/src/components/ui/input.tsx b/apps/shinkai-tray/src/components/ui/input.tsx
deleted file mode 100644
index 0e660c5e9..000000000
--- a/apps/shinkai-tray/src/components/ui/input.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import * as React from 'react';
-
-import { cn } from '../../lib/utils';
-
-export interface InputProps
-  extends React.InputHTMLAttributes<HTMLInputElement> {}
-
-const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ className, type, ...props }, ref) => {
-    return (
-      <input
-        className={cn(
-          'border-input focus-visible:ring-ring placeholder:text-muted-foreground flex h-9 w-full rounded-md border bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50',
-          className,
-        )}
-        ref={ref}
-        type={type}
-        {...props}
-      />
-    );
-  },
-);
-Input.displayName = 'Input';
-
-export { Input };
diff --git a/apps/shinkai-tray/src/components/ui/label.tsx b/apps/shinkai-tray/src/components/ui/label.tsx
deleted file mode 100644
index c8e95c48a..000000000
--- a/apps/shinkai-tray/src/components/ui/label.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import * as LabelPrimitive from '@radix-ui/react-label';
-import { cva, type VariantProps } from 'class-variance-authority';
-import * as React from 'react';
-
-import { cn } from '../../lib/utils';
-
-const labelVariants = cva(
-  'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
-);
-
-const Label = React.forwardRef<
-  React.ElementRef<typeof LabelPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
-    VariantProps<typeof labelVariants>
->(({ className, ...props }, ref) => (
-  <LabelPrimitive.Root
-    className={cn(labelVariants(), className)}
-    ref={ref}
-    {...props}
-  />
-));
-Label.displayName = LabelPrimitive.Root.displayName;
-
-export { Label };
diff --git a/apps/shinkai-tray/src/components/ui/popover.tsx b/apps/shinkai-tray/src/components/ui/popover.tsx
deleted file mode 100644
index d500f67a0..000000000
--- a/apps/shinkai-tray/src/components/ui/popover.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import * as PopoverPrimitive from '@radix-ui/react-popover';
-import * as React from 'react';
-
-import { cn } from '../../lib/utils';
-
-const Popover = PopoverPrimitive.Root;
-
-const PopoverTrigger = PopoverPrimitive.Trigger;
-
-const PopoverContent = React.forwardRef<
-  React.ElementRef<typeof PopoverPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
->(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
-  <PopoverPrimitive.Portal>
-    <PopoverPrimitive.Content
-      align={align}
-      className={cn(
-        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 rounded-md border p-4 shadow-md outline-none',
-        className,
-      )}
-      ref={ref}
-      sideOffset={sideOffset}
-      {...props}
-    />
-  </PopoverPrimitive.Portal>
-));
-PopoverContent.displayName = PopoverPrimitive.Content.displayName;
-
-export { Popover, PopoverTrigger, PopoverContent };
diff --git a/apps/shinkai-tray/src/components/ui/qr-code.tsx b/apps/shinkai-tray/src/components/ui/qr-code.tsx
deleted file mode 100644
index ece2fbcce..000000000
--- a/apps/shinkai-tray/src/components/ui/qr-code.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import React from 'react';
-import type { IProps } from 'react-qrcode-logo';
-import { QRCode as ReactQRCode } from 'react-qrcode-logo';
-
-import shinkaiLogo from '../../../app-icon.png';
-
-export default function QRCode({
-  value,
-  size,
-  id,
-}: {
-  value: IProps['value'];
-  size: IProps['size'];
-  id?: IProps['id'];
-}): React.ReactElement {
-  return (
-    <ReactQRCode
-      eyeColor="black"
-      eyeRadius={10}
-      fgColor="black"
-      id={id}
-      logoHeight={40}
-      logoImage={shinkaiLogo}
-      logoPaddingStyle="circle"
-      logoWidth={size ? size * 0.2 : undefined}
-      qrStyle="dots"
-      removeQrCodeBehindLogo
-      size={size ?? 300}
-      value={value}
-    />
-  );
-}
diff --git a/apps/shinkai-tray/src/components/ui/scroll-area.tsx b/apps/shinkai-tray/src/components/ui/scroll-area.tsx
deleted file mode 100644
index 3f4e89091..000000000
--- a/apps/shinkai-tray/src/components/ui/scroll-area.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
-import * as React from 'react';
-
-import { cn } from '../../lib/utils';
-
-const ScrollArea = React.forwardRef<
-  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
->(({ className, children, ...props }, ref) => (
-  <ScrollAreaPrimitive.Root
-    className={cn('relative overflow-hidden', className)}
-    {...props}
-  >
-    <ScrollAreaPrimitive.Viewport
-      className="h-full w-full rounded-[inherit]"
-      ref={ref}
-    >
-      {children}
-    </ScrollAreaPrimitive.Viewport>
-    <ScrollBar />
-    <ScrollAreaPrimitive.Corner />
-  </ScrollAreaPrimitive.Root>
-));
-ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
-
-const ScrollBar = React.forwardRef<
-  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
-  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
->(({ className, orientation = 'vertical', ...props }, ref) => (
-  <ScrollAreaPrimitive.ScrollAreaScrollbar
-    className={cn(
-      'flex touch-none select-none transition-colors',
-      orientation === 'vertical' &&
-        'h-full w-2.5 border-l border-l-transparent p-[1px]',
-      orientation === 'horizontal' &&
-        'h-2.5 border-t border-t-transparent p-[1px]',
-      className,
-    )}
-    orientation={orientation}
-    ref={ref}
-    {...props}
-  >
-    <ScrollAreaPrimitive.ScrollAreaThumb
-      className={cn(
-        'relative rounded-full bg-gray-400/20',
-        orientation === 'vertical' && 'flex-1',
-      )}
-    />
-  </ScrollAreaPrimitive.ScrollAreaScrollbar>
-));
-ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
-
-export { ScrollArea, ScrollBar };
diff --git a/apps/shinkai-tray/src/components/ui/select.tsx b/apps/shinkai-tray/src/components/ui/select.tsx
deleted file mode 100644
index d03390b67..000000000
--- a/apps/shinkai-tray/src/components/ui/select.tsx
+++ /dev/null
@@ -1,118 +0,0 @@
-import { CaretSortIcon, CheckIcon } from '@radix-ui/react-icons';
-import * as SelectPrimitive from '@radix-ui/react-select';
-import * as React from 'react';
-
-import { cn } from '../../lib/utils';
-
-const Select = SelectPrimitive.Root;
-
-const SelectGroup = SelectPrimitive.Group;
-
-const SelectValue = SelectPrimitive.Value;
-
-const SelectTrigger = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
-  <SelectPrimitive.Trigger
-    className={cn(
-      'border-input ring-offset-background focus:ring-ring placeholder:text-muted-foreground flex h-9 w-full items-center justify-between rounded-md border bg-transparent px-3 py-2 text-sm shadow-sm focus:outline-none focus:ring-1 disabled:cursor-not-allowed disabled:opacity-50',
-      className,
-    )}
-    ref={ref}
-    {...props}
-  >
-    {children}
-    <SelectPrimitive.Icon asChild>
-      <CaretSortIcon className="h-4 w-4 opacity-50" />
-    </SelectPrimitive.Icon>
-  </SelectPrimitive.Trigger>
-));
-SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-
-const SelectContent = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
->(({ className, children, position = 'popper', ...props }, ref) => (
-  <SelectPrimitive.Portal>
-    <SelectPrimitive.Content
-      className={cn(
-        'text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-[#19242D] shadow-md',
-        position === 'popper' &&
-          'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
-        className,
-      )}
-      position={position}
-      ref={ref}
-      {...props}
-    >
-      <SelectPrimitive.Viewport
-        className={cn(
-          'p-1',
-          position === 'popper' &&
-            'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]',
-        )}
-      >
-        {children}
-      </SelectPrimitive.Viewport>
-    </SelectPrimitive.Content>
-  </SelectPrimitive.Portal>
-));
-SelectContent.displayName = SelectPrimitive.Content.displayName;
-
-const SelectLabel = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.Label
-    className={cn('px-2 py-1.5 text-sm font-semibold', className)}
-    ref={ref}
-    {...props}
-  />
-));
-SelectLabel.displayName = SelectPrimitive.Label.displayName;
-
-const SelectItem = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
->(({ className, children, ...props }, ref) => (
-  <SelectPrimitive.Item
-    className={cn(
-      'focus:bg-accent focus:text-accent-foreground relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-      className,
-    )}
-    ref={ref}
-    {...props}
-  >
-    <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
-      <SelectPrimitive.ItemIndicator>
-        <CheckIcon className="h-4 w-4" />
-      </SelectPrimitive.ItemIndicator>
-    </span>
-    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
-  </SelectPrimitive.Item>
-));
-SelectItem.displayName = SelectPrimitive.Item.displayName;
-
-const SelectSeparator = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.Separator
-    className={cn('bg-muted -mx-1 my-1 h-px', className)}
-    ref={ref}
-    {...props}
-  />
-));
-SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
-
-export {
-  Select,
-  SelectGroup,
-  SelectValue,
-  SelectTrigger,
-  SelectContent,
-  SelectLabel,
-  SelectItem,
-  SelectSeparator,
-};
diff --git a/apps/shinkai-tray/src/components/ui/separator.tsx b/apps/shinkai-tray/src/components/ui/separator.tsx
deleted file mode 100644
index b668ab98a..000000000
--- a/apps/shinkai-tray/src/components/ui/separator.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import * as SeparatorPrimitive from '@radix-ui/react-separator';
-import * as React from 'react';
-
-import { cn } from '../../lib/utils';
-
-const Separator = React.forwardRef<
-  React.ElementRef<typeof SeparatorPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
->(
-  (
-    { className, orientation = 'horizontal', decorative = true, ...props },
-    ref,
-  ) => (
-    <SeparatorPrimitive.Root
-      className={cn(
-        'shrink-0 bg-slate-800 dark:bg-gray-800',
-        orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
-        className,
-      )}
-      decorative={decorative}
-      orientation={orientation}
-      ref={ref}
-      {...props}
-    />
-  ),
-);
-Separator.displayName = SeparatorPrimitive.Root.displayName;
-
-export { Separator };
diff --git a/apps/shinkai-tray/src/components/ui/skeleton.tsx b/apps/shinkai-tray/src/components/ui/skeleton.tsx
deleted file mode 100644
index 25372ee8c..000000000
--- a/apps/shinkai-tray/src/components/ui/skeleton.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { cn } from '../../lib/utils';
-
-function Skeleton({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) {
-  return (
-    <div
-      className={cn(
-        'animate-pulse rounded-md bg-gray-300/10 dark:bg-gray-50/10',
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-export { Skeleton };
diff --git a/apps/shinkai-tray/src/components/ui/switch.tsx b/apps/shinkai-tray/src/components/ui/switch.tsx
deleted file mode 100644
index e997aa9db..000000000
--- a/apps/shinkai-tray/src/components/ui/switch.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import * as SwitchPrimitives from '@radix-ui/react-switch';
-import * as React from 'react';
-
-import { cn } from '../../lib/utils';
-
-const Switch = React.forwardRef<
-  React.ElementRef<typeof SwitchPrimitives.Root>,
-  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
->(({ className, ...props }, ref) => (
-  <SwitchPrimitives.Root
-    className={cn(
-      'peer inline-flex h-[20px] w-[36px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-950 focus-visible:ring-offset-2 focus-visible:ring-offset-white disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-gray-900 data-[state=unchecked]:bg-gray-200 dark:focus-visible:ring-gray-300 dark:focus-visible:ring-offset-gray-950 dark:data-[state=checked]:bg-gray-50 dark:data-[state=unchecked]:bg-gray-800',
-      className,
-    )}
-    {...props}
-    ref={ref}
-  >
-    <SwitchPrimitives.Thumb
-      className={cn(
-        'pointer-events-none block h-4 w-4 rounded-full bg-white shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0 dark:bg-gray-950',
-      )}
-    />
-  </SwitchPrimitives.Root>
-));
-Switch.displayName = SwitchPrimitives.Root.displayName;
-
-export { Switch };
diff --git a/apps/shinkai-tray/src/components/ui/textarea.tsx b/apps/shinkai-tray/src/components/ui/textarea.tsx
deleted file mode 100644
index eacfc300a..000000000
--- a/apps/shinkai-tray/src/components/ui/textarea.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import * as React from 'react';
-
-import { cn } from '../../lib/utils';
-
-const MIN_TEXTAREA_HEIGHT = 32;
-export interface TextareaProps
-  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
-
-const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
-  ({ className, ...props }) => {
-    const textareaRef = React.useRef<HTMLTextAreaElement>(null);
-
-    React.useLayoutEffect(() => {
-      // Reset height - important to shrink on delete
-      if (!textareaRef.current) return;
-      textareaRef.current.style.height = 'inherit';
-      // Set height
-      textareaRef.current.style.height = `${Math.max(
-        textareaRef.current.scrollHeight,
-        MIN_TEXTAREA_HEIGHT,
-      )}px`;
-
-      if (props.autoFocus !== undefined && props.autoFocus) {
-        textareaRef.current.focus();
-      }
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [props.value]);
-
-    return (
-      <textarea
-        className={cn(
-          'flex min-h-[60px] w-full rounded-md border border-gray-500 bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-gray-500 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-gray-950 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-800 dark:placeholder:text-gray-400 dark:focus-visible:ring-gray-300',
-          className,
-        )}
-        ref={textareaRef}
-        style={{
-          minHeight: MIN_TEXTAREA_HEIGHT,
-          resize: 'none',
-          maxHeight: '300px',
-        }}
-        {...props}
-      />
-    );
-  },
-);
-Textarea.displayName = 'Textarea';
-
-export { Textarea };
diff --git a/apps/shinkai-tray/src/components/ui/tooltip.tsx b/apps/shinkai-tray/src/components/ui/tooltip.tsx
deleted file mode 100644
index 4c3c7a348..000000000
--- a/apps/shinkai-tray/src/components/ui/tooltip.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import * as TooltipPrimitive from '@radix-ui/react-tooltip';
-import * as React from 'react';
-
-import { cn } from '../../lib/utils';
-
-const TooltipProvider = TooltipPrimitive.Provider;
-
-const Tooltip = TooltipPrimitive.Root;
-
-const TooltipTrigger = TooltipPrimitive.Trigger;
-
-const TooltipContent = React.forwardRef<
-  React.ElementRef<typeof TooltipPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
-  <TooltipPrimitive.Content
-    className={cn(
-      'animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 overflow-hidden rounded-md bg-gray-900 px-3 py-1.5 text-xs text-gray-50 dark:bg-gray-50 dark:text-gray-900',
-      className,
-    )}
-    ref={ref}
-    sideOffset={sideOffset}
-    {...props}
-  />
-));
-TooltipContent.displayName = TooltipPrimitive.Content.displayName;
-
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
diff --git a/apps/shinkai-tray/src/globals.css b/apps/shinkai-tray/src/globals.css
index af68d01c1..caf71f87d 100644
--- a/apps/shinkai-tray/src/globals.css
+++ b/apps/shinkai-tray/src/globals.css
@@ -49,12 +49,4 @@ body,
   @apply grid;
 }
 
-@keyframes loaderDots {
-  0% {
-    opacity: 1;
-  }
-  50%,
-  100% {
-    opacity: 0.15;
-  }
-}
+
diff --git a/apps/shinkai-tray/src/pages/chat/chat-conversation.tsx b/apps/shinkai-tray/src/pages/chat/chat-conversation.tsx
index f9d133265..24cb4c84a 100644
--- a/apps/shinkai-tray/src/pages/chat/chat-conversation.tsx
+++ b/apps/shinkai-tray/src/pages/chat/chat-conversation.tsx
@@ -9,6 +9,17 @@ import { useSendMessageToJob } from '@shinkai_network/shinkai-node-state/lib/mut
 import { useSendMessageToInbox } from '@shinkai_network/shinkai-node-state/lib/mutations/sendMesssageToInbox/useSendMessageToInbox';
 import { useSendMessageWithFilesToInbox } from '@shinkai_network/shinkai-node-state/lib/mutations/sendMesssageWithFilesToInbox/useSendMessageWithFilesToInbox';
 import { useGetChatConversationWithPagination } from '@shinkai_network/shinkai-node-state/lib/queries/getChatConversation/useGetChatConversationWithPagination';
+import {
+  Button,
+  DotsLoader,
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  ScrollArea,
+  Skeleton,
+} from '@shinkai_network/shinkai-ui';
 import { Placeholder } from '@tiptap/extension-placeholder';
 import { EditorContent, Extension, useEditor } from '@tiptap/react';
 import { StarterKit } from '@tiptap/starter-kit';
@@ -24,21 +35,12 @@ import {
 import { useDropzone } from 'react-dropzone';
 import { useForm } from 'react-hook-form';
 import { useParams } from 'react-router-dom';
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-expect-error
 import { Markdown } from 'tiptap-markdown';
 import { z } from 'zod';
 
 import Message from '../../components/chat/message';
-import { Button } from '../../components/ui/button';
-import DotsLoader from '../../components/ui/dots-loader';
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-} from '../../components/ui/form';
-import { ScrollArea } from '../../components/ui/scroll-area';
-import { Skeleton } from '../../components/ui/skeleton';
 import { formatDate, groupMessagesByDate } from '../../lib/chat-conversation';
 import { cn } from '../../lib/utils';
 import { useAuth } from '../../store/auth';
@@ -336,7 +338,7 @@ const ChatConversation = () => {
                   )}
                   {!isImageOrPdf(file) && (
                     <div className="flex flex-col items-center gap-2">
-                      <FileCheck2 className="text-muted-foreground h-4 w-4 " />
+                      <FileCheck2 className="text-gray-80 h-4 w-4 " />
                       <span className="line-clamp-2 break-all px-2 text-center text-xs ">
                         {file?.name}
                       </span>
diff --git a/apps/shinkai-tray/src/pages/chat/empty-message.tsx b/apps/shinkai-tray/src/pages/chat/empty-message.tsx
index b15909484..b9e9aedba 100644
--- a/apps/shinkai-tray/src/pages/chat/empty-message.tsx
+++ b/apps/shinkai-tray/src/pages/chat/empty-message.tsx
@@ -1,5 +1,5 @@
-import { LightningBoltIcon } from '@radix-ui/react-icons';
 import { useAgents } from '@shinkai_network/shinkai-node-state/lib/queries/getAgents/useGetAgents';
+import { buttonVariants } from '@shinkai_network/shinkai-ui';
 import { Link } from 'react-router-dom';
 
 import { ADD_AGENT_PATH, CREATE_JOB_PATH } from '../../routes/name';
@@ -38,8 +38,8 @@ const EmptyMessage = () => {
           />
         </svg>
 
-        <h1 className="text-foreground text-2xl font-bold">Ask Shinkai AI</h1>
-        <p className="text-muted-foreground text-sm">
+        <h1 className="text-2xl font-bold text-white">Ask Shinkai AI</h1>
+        <p className="text-gray-80 text-sm">
           Try “How to make a HTTP request in JavaScript” , “Give me the top 10
           rock music in the 80s”, “Explain me how internet works”
         </p>
@@ -47,18 +47,20 @@ const EmptyMessage = () => {
         <div className="mt-4">
           {agents.length === 0 ? (
             <Link
-              className="bg-primary-600 hover:bg-primary-700 flex h-9 items-center rounded-md px-6 py-2 font-medium text-white shadow transition-colors duration-150 "
+              className={buttonVariants({
+                variant: 'default',
+              })}
               to={ADD_AGENT_PATH}
             >
-              <LightningBoltIcon className="mr-2" />
               <span>Add Agent</span>
             </Link>
           ) : (
             <Link
-              className="bg-primary-600 hover:bg-primary-700 flex h-9 items-center rounded-md px-6 py-2 font-medium text-white shadow transition-colors duration-150 "
+              className={buttonVariants({
+                variant: 'default',
+              })}
               to={CREATE_JOB_PATH}
             >
-              <LightningBoltIcon className="mr-2" />
               <span>Create Job</span>
             </Link>
           )}
diff --git a/apps/shinkai-tray/src/pages/chat/layout.tsx b/apps/shinkai-tray/src/pages/chat/layout.tsx
index 24be63bad..c59b2e3ba 100644
--- a/apps/shinkai-tray/src/pages/chat/layout.tsx
+++ b/apps/shinkai-tray/src/pages/chat/layout.tsx
@@ -7,6 +7,17 @@ import {
 import { useUpdateInboxName } from '@shinkai_network/shinkai-node-state/lib/mutations/updateInboxName/useUpdateInboxName';
 import { GetInboxesOutput } from '@shinkai_network/shinkai-node-state/lib/queries/getInboxes/types';
 import { useGetInboxes } from '@shinkai_network/shinkai-node-state/lib/queries/getInboxes/useGetInboxes';
+import {
+  Button,
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  Input,
+  ScrollArea,
+  Separator,
+} from '@shinkai_network/shinkai-ui';
 import { Query } from '@tanstack/react-query';
 import { Edit3, MessageCircleIcon, Workflow } from 'lucide-react';
 import { useEffect, useRef, useState } from 'react';
@@ -14,17 +25,6 @@ import { useForm } from 'react-hook-form';
 import { Link, Outlet, useMatch } from 'react-router-dom';
 import { z } from 'zod';
 
-import { Button } from '../../components/ui/button';
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-} from '../../components/ui/form';
-import { Input } from '../../components/ui/input';
-import { ScrollArea } from '../../components/ui/scroll-area';
-import { Separator } from '../../components/ui/separator';
 import { handleSendNotification } from '../../lib/notifications';
 import { cn } from '../../lib/utils';
 import { useAuth } from '../../store/auth';
@@ -173,7 +173,7 @@ const MessageButton = ({
   ) : (
     <Link
       className={cn(
-        'text-muted-foreground group flex h-[46px] w-full items-center gap-2 rounded-lg px-2 py-2 hover:bg-slate-800',
+        'text-gray-80 group flex h-[46px] w-full items-center gap-2 rounded-lg px-2 py-2 hover:bg-slate-800',
         match && 'text-foreground bg-slate-800',
       )}
       key={inboxId}
@@ -193,7 +193,7 @@ const MessageButton = ({
         size="icon"
         variant="ghost"
       >
-        <Edit3 className="text-muted-foreground h-4 w-4" />
+        <Edit3 className="text-gray-80 h-4 w-4" />
       </Button>
     </Link>
   );
diff --git a/apps/shinkai-tray/src/pages/create-agent.tsx b/apps/shinkai-tray/src/pages/create-agent.tsx
index b1c147b98..e8936b93a 100644
--- a/apps/shinkai-tray/src/pages/create-agent.tsx
+++ b/apps/shinkai-tray/src/pages/create-agent.tsx
@@ -1,27 +1,24 @@
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useCreateAgent } from '@shinkai_network/shinkai-node-state/lib/mutations/createAgent/useCreateAgent';
-import { useForm } from 'react-hook-form';
-import { useNavigate } from 'react-router-dom';
-import { z } from 'zod';
-
-import { Button } from '../components/ui/button';
-import ErrorMessage from '../components/ui/error-message';
 import {
+  Button,
+  ErrorMessage,
   Form,
   FormControl,
-  FormDescription,
   FormField,
   FormItem,
   FormLabel,
-} from '../components/ui/form';
-import { Input } from '../components/ui/input';
-import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from '../components/ui/select';
+  TextField,
+} from '@shinkai_network/shinkai-ui';
+import { useForm } from 'react-hook-form';
+import { useNavigate } from 'react-router-dom';
+import { z } from 'zod';
+
 import { CREATE_JOB_PATH } from '../routes/name';
 import { useAuth } from '../store/auth';
 import SimpleLayout from './layout/simple-layout';
@@ -102,42 +99,25 @@ const CreateAgentPage = () => {
               control={addAgentForm.control}
               name="agentName"
               render={({ field }) => (
-                <FormItem>
-                  <FormLabel>Agent Name</FormLabel>
-                  <FormControl>
-                    <Input placeholder="Eg: Personal AI Agent" {...field} />
-                  </FormControl>
-                </FormItem>
+                <TextField field={field} label="Agent Name" />
               )}
             />
             <FormField
               control={addAgentForm.control}
               name="externalUrl"
               render={({ field }) => (
-                <FormItem>
-                  <FormLabel>External URL</FormLabel>
-                  <FormControl>
-                    <Input
-                      placeholder="Eg: https://api.openai.com"
-                      {...field}
-                    />
-                  </FormControl>
-                </FormItem>
+                <TextField field={field} label="External URL" />
               )}
             />
             <FormField
               control={addAgentForm.control}
               name="apikey"
               render={({ field }) => (
-                <FormItem>
-                  <FormLabel>Api Key</FormLabel>
-                  <FormControl>
-                    <Input {...field} placeholder="Eg: xYz1DFa..." />
-                  </FormControl>
-                  <FormDescription className="pt-1 text-left text-xs">
-                    Enter the API key for your agent
-                  </FormDescription>
-                </FormItem>
+                <TextField
+                  field={field}
+                  helperMessage="Enter the API key for your agent"
+                  label="Api Key"
+                />
               )}
             />
 
@@ -169,12 +149,7 @@ const CreateAgentPage = () => {
                 control={addAgentForm.control}
                 name="modelType"
                 render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>{model} Model Type</FormLabel>
-                    <FormControl>
-                      <Input placeholder="Eg: gpt-3.5-turbo" {...field} />
-                    </FormControl>
-                  </FormItem>
+                  <TextField field={field} label={`${model} Model Type`} />
                 )}
               />
             )}
diff --git a/apps/shinkai-tray/src/pages/create-chat.tsx b/apps/shinkai-tray/src/pages/create-chat.tsx
index 971bc7af9..74e7d88bc 100644
--- a/apps/shinkai-tray/src/pages/create-chat.tsx
+++ b/apps/shinkai-tray/src/pages/create-chat.tsx
@@ -1,20 +1,20 @@
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useCreateChat } from '@shinkai_network/shinkai-node-state/lib/mutations/createChat/useCreateChat';
-import { useForm } from 'react-hook-form';
-import { useNavigate } from 'react-router-dom';
-import { z } from 'zod';
-
-import { Button } from '../components/ui/button';
 import {
+  Button,
   Form,
   FormControl,
   FormField,
   FormItem,
   FormLabel,
   FormMessage,
-} from '../components/ui/form';
-import { Input } from '../components/ui/input';
-import { Textarea } from '../components/ui/textarea';
+  Input,
+  Textarea,
+} from '@shinkai_network/shinkai-ui';
+import { useForm } from 'react-hook-form';
+import { useNavigate } from 'react-router-dom';
+import { z } from 'zod';
+
 import { useAuth } from '../store/auth';
 import SimpleLayout from './layout/simple-layout';
 
@@ -86,7 +86,7 @@ const CreateChatPage = () => {
                   <FormLabel>Message</FormLabel>
                   <FormControl>
                     <Textarea
-                      className="resize-none border-white"
+                      className="resize-nonee"
                       onKeyDown={(event) => {
                         if (
                           event.key === 'Enter' &&
diff --git a/apps/shinkai-tray/src/pages/create-job.tsx b/apps/shinkai-tray/src/pages/create-job.tsx
index a979fd51c..4bf59ab54 100644
--- a/apps/shinkai-tray/src/pages/create-job.tsx
+++ b/apps/shinkai-tray/src/pages/create-job.tsx
@@ -2,30 +2,28 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { buildInboxIdFromJobId } from '@shinkai_network/shinkai-message-ts/utils/inbox_name_handler';
 import { useCreateJob } from '@shinkai_network/shinkai-node-state/lib/mutations/createJob/useCreateJob';
 import { useAgents } from '@shinkai_network/shinkai-node-state/lib/queries/getAgents/useGetAgents';
-import { FileCheck2, ImagePlusIcon, PlusIcon, X } from 'lucide-react';
-import { useEffect } from 'react';
-import { useDropzone } from 'react-dropzone';
-import { useForm } from 'react-hook-form';
-import { useNavigate } from 'react-router-dom';
-import { z } from 'zod';
-
-import { Button } from '../components/ui/button';
 import {
+  Button,
   Form,
   FormControl,
   FormField,
   FormItem,
   FormLabel,
   FormMessage,
-} from '../components/ui/form';
-import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from '../components/ui/select';
-import { Textarea } from '../components/ui/textarea';
+  Textarea,
+} from '@shinkai_network/shinkai-ui';
+import { FileCheck2, ImagePlusIcon, PlusIcon, X } from 'lucide-react';
+import { useEffect } from 'react';
+import { useDropzone } from 'react-dropzone';
+import { useForm } from 'react-hook-form';
+import { useNavigate } from 'react-router-dom';
+import { z } from 'zod';
+
 import { cn } from '../lib/utils';
 import { ADD_AGENT_PATH } from '../routes/name';
 import { useAuth } from '../store/auth';
@@ -157,7 +155,7 @@ const CreateJobPage = () => {
                   <FormControl>
                     <Textarea
                       autoFocus={true}
-                      className="resize-none border-white"
+                      className="resize-none"
                       onKeyDown={(event) => {
                         if (
                           event.key === 'Enter' &&
@@ -214,7 +212,7 @@ const CreateJobPage = () => {
             <div>
               <FormLabel>
                 Upload a file
-                <span className="text-muted-foreground ml-1">(optional)</span>
+                <span className="text-gray-80 ml-1">(optional)</span>
               </FormLabel>
               <div className="flex gap-5">
                 <div
@@ -251,7 +249,7 @@ const CreateJobPage = () => {
                       )}
                       {!isImageOrPdf(file) && (
                         <div className="flex flex-col items-center gap-2">
-                          <FileCheck2 className="text-muted-foreground h-6 w-6 " />
+                          <FileCheck2 className="text-gray-80 h-6 w-6 " />
                           <span className="line-clamp-3 break-all px-2 text-center text-xs ">
                             {file?.name}
                           </span>
@@ -276,7 +274,7 @@ const CreateJobPage = () => {
                     </button>
                   )}
                 </div>
-                <span className="text-muted-foreground pt-4 text-xs font-bold">
+                <span className="text-gray-80 pt-4 text-xs font-bold">
                   Supported formats
                   <p className="mt-2">
                     Plain Text
@@ -295,7 +293,7 @@ const CreateJobPage = () => {
                       ].join(' • ')}
                     </span>
                   </p>
-                  <p className="text-muted-foreground mt-1 font-bold">
+                  <p className="text-gray-80 mt-1 font-bold">
                     Documents
                     <span className="block font-normal">
                       {[
diff --git a/apps/shinkai-tray/src/pages/generate-code.tsx b/apps/shinkai-tray/src/pages/generate-code.tsx
index 5ca9adf79..65437c564 100644
--- a/apps/shinkai-tray/src/pages/generate-code.tsx
+++ b/apps/shinkai-tray/src/pages/generate-code.tsx
@@ -1,32 +1,31 @@
 import { zodResolver } from '@hookform/resolvers/zod';
 import { DownloadIcon } from '@radix-ui/react-icons';
 import { useCreateRegistrationCode } from '@shinkai_network/shinkai-node-state/lib/mutations/createRegistrationCode/useCreateRegistrationCode';
-import { save } from '@tauri-apps/api/dialog';
-import { BaseDirectory, writeBinaryFile } from '@tauri-apps/api/fs';
-import { Check } from 'lucide-react';
-import { useState } from 'react';
-import { useForm } from 'react-hook-form';
-import { z } from 'zod';
-
-import { Button } from '../components/ui/button';
-import { Dialog, DialogContent } from '../components/ui/dialog';
 import {
+  Button,
+  Dialog,
+  DialogContent,
   Form,
   FormControl,
   FormField,
   FormItem,
   FormLabel,
   FormMessage,
-} from '../components/ui/form';
-import { Input } from '../components/ui/input';
-import QRCode from '../components/ui/qr-code';
-import {
+  QRCode,
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from '../components/ui/select';
+  TextField,
+} from '@shinkai_network/shinkai-ui';
+import { save } from '@tauri-apps/api/dialog';
+import { BaseDirectory, writeBinaryFile } from '@tauri-apps/api/fs';
+import { Check } from 'lucide-react';
+import { useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
 import { SetupData, useAuth } from '../store/auth';
 import SimpleLayout from './layout/simple-layout';
 
@@ -173,13 +172,7 @@ const GenerateCodePage = () => {
                 control={form.control}
                 name="profile"
                 render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Profile</FormLabel>
-                    <FormControl>
-                      <Input {...field} />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
+                  <TextField field={field} label="Profile" />
                 )}
               />
             )}
diff --git a/apps/shinkai-tray/src/pages/layout/main-layout.tsx b/apps/shinkai-tray/src/pages/layout/main-layout.tsx
index 5216e1a14..df1ff7489 100644
--- a/apps/shinkai-tray/src/pages/layout/main-layout.tsx
+++ b/apps/shinkai-tray/src/pages/layout/main-layout.tsx
@@ -4,12 +4,6 @@ import {
   PersonIcon,
   TokensIcon,
 } from '@radix-ui/react-icons';
-import { listen } from '@tauri-apps/api/event';
-import { BotIcon, BoxesIcon, MessageCircleIcon } from 'lucide-react';
-import * as React from 'react';
-import { useCallback } from 'react';
-import { Outlet, useNavigate } from 'react-router-dom';
-
 import {
   Command,
   CommandGroup,
@@ -17,13 +11,17 @@ import {
   CommandList,
   CommandSeparator,
   CommandShortcut,
-} from '../../components/ui/command';
-import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from '../../components/ui/popover';
-import { Separator } from '../../components/ui/separator';
+  Separator,
+} from '@shinkai_network/shinkai-ui';
+import { listen } from '@tauri-apps/api/event';
+import { BotIcon, BoxesIcon, MessageCircleIcon } from 'lucide-react';
+import * as React from 'react';
+import { useCallback } from 'react';
+import { Outlet, useNavigate } from 'react-router-dom';
+
 import {
   ADD_AGENT_PATH,
   CREATE_CHAT_PATH,
@@ -129,16 +127,16 @@ export function Footer() {
   };
 
   return (
-    <div className="text-muted-foreground absolute bottom-2 left-2 text-sm">
+    <div className="text-gray-80 absolute bottom-2 left-2 text-sm">
       <Popover modal onOpenChange={setOpen} open={open}>
         <PopoverTrigger
           aria-expanded={open}
-          className="bg-app-gradient rounded-lg px-2.5 py-2 shadow-lg transition-colors duration-150 hover:bg-gray-700/40"
+          className="rounded-lg bg-gray-400 px-2.5 py-2 shadow-lg transition-colors duration-150 hover:bg-gray-500/40"
           onClick={() => setOpen(true)}
         >
           <span className="text-xs">
             Actions
-            <kbd className="bg-muted text-muted-foreground pointer-events-none ml-2 inline-flex h-5 select-none items-center gap-1 rounded border px-1.5 font-mono text-[10px] font-medium opacity-100">
+            <kbd className="pointer-events-none ml-2 inline-flex h-5 select-none items-center gap-1 rounded border bg-gray-500 px-1.5 font-mono text-[10px] font-medium text-gray-100 opacity-100">
               <span className="text-xs">⌘</span>K
             </kbd>
           </span>
@@ -147,7 +145,7 @@ export function Footer() {
           align="start"
           alignOffset={0}
           asChild
-          className="rounded-md border-0 bg-black bg-gradient-to-r from-[#19242D] to-[#19242D]/90 p-4 shadow-xl"
+          className="rounded-md border-0 bg-gray-500 p-4 shadow-xl"
           side="top"
           sideOffset={2}
         >
@@ -207,7 +205,7 @@ export function Footer() {
 const MainLayout = () => {
   const auth = useAuth((state) => state.auth);
   return (
-    <div className="bg-app-gradient relative flex h-full flex-col bg-cover text-white">
+    <div className="bg-app-gradient relative flex h-full flex-col bg-gray-500 text-white">
       <div
         className="flex h-9 shrink-0 cursor-default select-none items-center justify-center text-xs"
         data-tauri-drag-region
diff --git a/apps/shinkai-tray/src/pages/layout/simple-layout.tsx b/apps/shinkai-tray/src/pages/layout/simple-layout.tsx
index a657cba58..e3c9567a5 100644
--- a/apps/shinkai-tray/src/pages/layout/simple-layout.tsx
+++ b/apps/shinkai-tray/src/pages/layout/simple-layout.tsx
@@ -1,4 +1,5 @@
 import { LucideArrowLeft } from 'lucide-react';
+import React from 'react';
 import { Link } from 'react-router-dom';
 
 import { HOME_PATH } from '../../routes/name';
diff --git a/apps/shinkai-tray/src/pages/onboarding.tsx b/apps/shinkai-tray/src/pages/onboarding.tsx
index 529947dcd..d0eef77a6 100644
--- a/apps/shinkai-tray/src/pages/onboarding.tsx
+++ b/apps/shinkai-tray/src/pages/onboarding.tsx
@@ -5,22 +5,18 @@ import {
 } from '@shinkai_network/shinkai-message-ts/utils';
 import { queryClient } from '@shinkai_network/shinkai-node-state/lib/constants';
 import { useSubmitRegistrationNoCode } from '@shinkai_network/shinkai-node-state/lib/mutations/submitRegistation/useSubmitRegistrationNoCode';
+import {
+  Button,
+  ErrorMessage,
+  Form,
+  FormField,
+  TextField,
+} from '@shinkai_network/shinkai-ui';
 import { useEffect } from 'react';
 import { useForm } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
 import { z } from 'zod';
 
-import { Button } from '../components/ui/button';
-import ErrorMessage from '../components/ui/error-message';
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '../components/ui/form';
-import { Input } from '../components/ui/input';
 import { HOME_PATH } from '../routes/name';
 import { useAuth } from '../store/auth';
 
@@ -175,13 +171,7 @@ const OnboardingPage = () => {
             control={setupDataForm.control}
             name="node_address"
             render={({ field }) => (
-              <FormItem>
-                <FormLabel>Node Address</FormLabel>
-                <FormControl>
-                  <Input placeholder="Eg: http://localhost:9550" {...field} />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
+              <TextField field={field} label={'Node Address'} />
             )}
           />
           {isError && <ErrorMessage message={error.message} />}
diff --git a/apps/shinkai-tray/tailwind.config.js b/apps/shinkai-tray/tailwind.config.js
index 9cdcdb4f9..a971f97fd 100644
--- a/apps/shinkai-tray/tailwind.config.js
+++ b/apps/shinkai-tray/tailwind.config.js
@@ -1,12 +1,16 @@
+/** @type {import('tailwindcss').Config} */
+
+const { join } = require('path');
+const { createGlobPatternsForDependencies } = require('@nx/react/tailwind');
 const sharedTailwindConfig = require('../../libs/shinkai-ui/src/shinkai-preset.js');
 
 module.exports = {
   presets: [sharedTailwindConfig],
-  darkMode: ['class'],
   content: [
-    './pages/**/*.{ts,tsx}',
-    './components/**/*.{ts,tsx}',
-    './app/**/*.{ts,tsx}',
-    './src/**/*.{ts,tsx}',
+    join(
+      __dirname,
+      '{src,pages,components,app}/**/*!(*.stories|*.spec).{ts,tsx,html,css}',
+    ),
+    ...createGlobPatternsForDependencies(__dirname),
   ],
 };
diff --git a/libs/shinkai-ui/src/components/command.tsx b/libs/shinkai-ui/src/components/command.tsx
index 7b50f5019..4e40cead2 100644
--- a/libs/shinkai-ui/src/components/command.tsx
+++ b/libs/shinkai-ui/src/components/command.tsx
@@ -86,7 +86,7 @@ const CommandGroup = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <CommandPrimitive.Group
     className={cn(
-      'text-foreground overflow-hidden p-1 dark:text-gray-50 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-gray-500 dark:[&_[cmdk-group-heading]]:text-gray-400',
+      '[&_[cmdk-group-heading]]:text-gray-80 overflow-hidden p-1 text-white [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium dark:[&_[cmdk-group-heading]]:text-gray-400',
       className,
     )}
     ref={ref}
@@ -114,7 +114,7 @@ const CommandItem = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <CommandPrimitive.Item
     className={cn(
-      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-gray-800 aria-selected:text-gray-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:aria-selected:bg-gray-800 dark:aria-selected:text-gray-50',
+      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-gray-300 aria-selected:text-white data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       className,
     )}
     ref={ref}
@@ -130,10 +130,7 @@ const CommandShortcut = ({
 }: React.HTMLAttributes<HTMLSpanElement>) => {
   return (
     <span
-      className={cn(
-        'ml-auto text-xs tracking-widest text-gray-500 dark:text-gray-400',
-        className,
-      )}
+      className={cn('text-gray-80 ml-auto text-xs tracking-widest', className)}
       {...props}
     />
   );
diff --git a/libs/shinkai-ui/src/components/textfield.tsx b/libs/shinkai-ui/src/components/textfield.tsx
index 85242fbf4..1d84632e1 100644
--- a/libs/shinkai-ui/src/components/textfield.tsx
+++ b/libs/shinkai-ui/src/components/textfield.tsx
@@ -2,7 +2,13 @@
 import React from 'react';
 
 import { cn } from '../utils';
-import { FormControl, FormItem, FormLabel, FormMessage } from './form';
+import {
+  FormControl,
+  FormDescription,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from './form';
 import { Input } from './input';
 
 const TextField = ({
@@ -10,6 +16,7 @@ const TextField = ({
   field,
   label,
   type = 'text',
+  helperMessage,
 }: {
   classes?: {
     formItem?: string;
@@ -26,6 +33,7 @@ const TextField = ({
     ref: (instance: any) => void;
   };
   label: React.ReactNode;
+  helperMessage?: React.ReactNode;
   type?: 'text' | 'password';
 }) => {
   return (
@@ -34,6 +42,7 @@ const TextField = ({
         <Input {...field} className={cn(classes?.input)} type={type} />
       </FormControl>
       <FormLabel className={cn(classes?.label)}>{label}</FormLabel>
+      <FormDescription>{helperMessage}</FormDescription>
       <FormMessage className={cn(classes?.helperMessage)} />
     </FormItem>
   );

From 9169ec0695171575c0b47a5b37cd48bad234b855 Mon Sep 17 00:00:00 2001
From: paulclindo <paulclindo@gmail.com>
Date: Wed, 29 Nov 2023 19:56:23 -0500
Subject: [PATCH 2/9] refactor: onboarding pages

---
 apps/shinkai-tray/src/globals.css             |  2 +-
 .../src/pages/chat/chat-conversation.tsx      |  2 +-
 apps/shinkai-tray/src/pages/chat/layout.tsx   | 52 ++++++------
 apps/shinkai-tray/src/pages/create-job.tsx    |  2 +-
 .../src/pages/layout/main-layout.tsx          |  4 +-
 apps/shinkai-tray/src/pages/onboarding.tsx    | 80 +++++++++++++++----
 apps/shinkai-tray/src/routes/index.tsx        | 28 ++-----
 libs/shinkai-ui/src/components/separator.tsx  |  2 +-
 8 files changed, 105 insertions(+), 67 deletions(-)

diff --git a/apps/shinkai-tray/src/globals.css b/apps/shinkai-tray/src/globals.css
index caf71f87d..82a951a8f 100644
--- a/apps/shinkai-tray/src/globals.css
+++ b/apps/shinkai-tray/src/globals.css
@@ -24,7 +24,7 @@
 html,
 body,
 #root {
-  @apply font-inter h-full overflow-hidden rounded-lg border-0 bg-[#19242D] text-white  shadow-2xl;
+  @apply font-inter h-full overflow-hidden rounded-lg border-0 bg-gray-500 text-white shadow-2xl;
 }
 
 /* prose styling for chat editor */
diff --git a/apps/shinkai-tray/src/pages/chat/chat-conversation.tsx b/apps/shinkai-tray/src/pages/chat/chat-conversation.tsx
index 24cb4c84a..ce7dd51b9 100644
--- a/apps/shinkai-tray/src/pages/chat/chat-conversation.tsx
+++ b/apps/shinkai-tray/src/pages/chat/chat-conversation.tsx
@@ -138,7 +138,7 @@ const ChatConversation = () => {
         receiver: auth.shinkai_identity,
         message: data.message,
         inboxId: inboxId,
-        file: file,
+        files: [file],
         my_device_encryption_sk: auth.my_device_encryption_sk,
         my_device_identity_sk: auth.my_device_identity_sk,
         node_encryption_pk: auth.node_encryption_pk,
diff --git a/apps/shinkai-tray/src/pages/chat/layout.tsx b/apps/shinkai-tray/src/pages/chat/layout.tsx
index c59b2e3ba..c2043c6f5 100644
--- a/apps/shinkai-tray/src/pages/chat/layout.tsx
+++ b/apps/shinkai-tray/src/pages/chat/layout.tsx
@@ -9,14 +9,17 @@ import { GetInboxesOutput } from '@shinkai_network/shinkai-node-state/lib/querie
 import { useGetInboxes } from '@shinkai_network/shinkai-node-state/lib/queries/getInboxes/useGetInboxes';
 import {
   Button,
+  ChatBubbleIcon,
   Form,
   FormControl,
   FormField,
   FormItem,
   FormLabel,
   Input,
+  JobBubbleIcon,
   ScrollArea,
   Separator,
+  TextField,
 } from '@shinkai_network/shinkai-ui';
 import { Query } from '@tanstack/react-query';
 import { Edit3, MessageCircleIcon, Workflow } from 'lucide-react';
@@ -48,13 +51,13 @@ const InboxNameInput = ({
   });
   const { inboxName: inboxNameValue } = updateInboxNameForm.watch();
   const { mutateAsync: updateInboxName } = useUpdateInboxName();
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  useEffect(() => {
-    if (inputRef.current) {
-      inputRef.current?.focus();
-    }
-  }, []);
+  // const inputRef = useRef<HTMLInputElement>(null);
+  //
+  // useEffect(() => {
+  //   if (inputRef.current) {
+  //     inputRef.current?.focus();
+  //   }
+  // }, []);
   const onSubmit = async (data: z.infer<typeof updateInboxNameSchema>) => {
     if (!auth) return;
 
@@ -84,19 +87,20 @@ const InboxNameInput = ({
             control={updateInboxNameForm.control}
             name="inboxName"
             render={({ field }) => (
-              <div className="bg-app-gradient flex h-[46px]  items-center rounded-lg">
+              <div className=" flex h-[46px]  items-center rounded-lg">
                 <Edit3 className="absolute left-2 top-1/2 h-4 w-4 -translate-y-1/2 transform text-white" />
-                <FormItem className="space-y-0 pl-7 text-xs">
-                  <FormLabel className="sr-only">Update inbox name</FormLabel>
-                  <FormControl>
-                    <Input
-                      className="border-none pr-16 text-xs caret-white placeholder:text-gray-600 focus-visible:ring-0 focus-visible:ring-white"
-                      placeholder={inboxName}
-                      {...field}
-                      ref={inputRef}
-                    />
-                  </FormControl>
-                </FormItem>
+                <TextField field={field} label="Update inbox name" />
+                {/*<FormItem className="space-y-0 pl-7 text-xs">*/}
+                {/*  <FormLabel className="sr-only">Update inbox name</FormLabel>*/}
+                {/*  <FormControl>*/}
+                {/*    <Input*/}
+                {/*      className="border-none pr-16 text-xs caret-white placeholder:text-gray-600 focus-visible:ring-0 focus-visible:ring-white"*/}
+                {/*      placeholder={inboxName}*/}
+                {/*      {...field}*/}
+                {/*      ref={inputRef}*/}
+                {/*    />*/}
+                {/*  </FormControl>*/}
+                {/*</FormItem>*/}
               </div>
             )}
           />
@@ -104,7 +108,7 @@ const InboxNameInput = ({
 
         {inboxNameValue ? (
           <Button
-            className="transformtext-xs absolute right-1 top-1/2 h-8 -translate-y-1/2 text-white"
+            className="absolute right-1 top-1/2 h-8 -translate-y-1/2 transform text-xs text-white"
             size="sm"
             type="submit"
             variant="default"
@@ -173,16 +177,16 @@ const MessageButton = ({
   ) : (
     <Link
       className={cn(
-        'text-gray-80 group flex h-[46px] w-full items-center gap-2 rounded-lg px-2 py-2 hover:bg-slate-800',
-        match && 'text-foreground bg-slate-800',
+        'text-gray-80 group flex h-[46px] w-full items-center gap-2 rounded-lg px-2 py-2 hover:bg-gray-500',
+        match && 'bg-gray-400 text-white',
       )}
       key={inboxId}
       to={to}
     >
       {isJobInbox(inboxId) ? (
-        <Workflow className="mr-2 h-4 w-4 shrink-0" />
+        <JobBubbleIcon className="mr-2 h-4 w-4 shrink-0" />
       ) : (
-        <MessageCircleIcon className="mr-2 h-4 w-4 shrink-0" />
+        <ChatBubbleIcon className="mr-2 h-4 w-4 shrink-0" />
       )}
       <span className="line-clamp-1 flex-1 break-all text-left text-xs">
         {inboxName}
diff --git a/apps/shinkai-tray/src/pages/create-job.tsx b/apps/shinkai-tray/src/pages/create-job.tsx
index 4bf59ab54..fc556f401 100644
--- a/apps/shinkai-tray/src/pages/create-job.tsx
+++ b/apps/shinkai-tray/src/pages/create-job.tsx
@@ -117,7 +117,7 @@ const CreateJobPage = () => {
       agentId: data.model,
       content: data.description,
       files_inbox: '',
-      file: data.file,
+      files: [data.file],
       my_device_encryption_sk: auth.my_device_encryption_sk,
       my_device_identity_sk: auth.my_device_identity_sk,
       node_encryption_pk: auth.node_encryption_pk,
diff --git a/apps/shinkai-tray/src/pages/layout/main-layout.tsx b/apps/shinkai-tray/src/pages/layout/main-layout.tsx
index df1ff7489..271830cbc 100644
--- a/apps/shinkai-tray/src/pages/layout/main-layout.tsx
+++ b/apps/shinkai-tray/src/pages/layout/main-layout.tsx
@@ -205,10 +205,10 @@ export function Footer() {
 const MainLayout = () => {
   const auth = useAuth((state) => state.auth);
   return (
-    <div className="bg-app-gradient relative flex h-full flex-col bg-gray-500 text-white">
+    <div className="relative flex h-full flex-col bg-gray-500 text-white">
       <div
         className="flex h-9 shrink-0 cursor-default select-none items-center justify-center text-xs"
-        data-tauri-drag-region
+        data-tauri-drag-region={true}
       >
         Shinkai AI
       </div>
diff --git a/apps/shinkai-tray/src/pages/onboarding.tsx b/apps/shinkai-tray/src/pages/onboarding.tsx
index d0eef77a6..3f34e83b4 100644
--- a/apps/shinkai-tray/src/pages/onboarding.tsx
+++ b/apps/shinkai-tray/src/pages/onboarding.tsx
@@ -12,13 +12,15 @@ import {
   FormField,
   TextField,
 } from '@shinkai_network/shinkai-ui';
-import { useEffect } from 'react';
+import { QrCode } from 'lucide-react';
+import React, { useEffect } from 'react';
 import { useForm } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
 import { z } from 'zod';
 
 import { HOME_PATH } from '../routes/name';
 import { useAuth } from '../store/auth';
+import OnboardingLayout from './layout/onboarding-layout';
 
 const formSchema = z.object({
   registration_code: z.string(),
@@ -42,6 +44,31 @@ const formSchema = z.object({
   my_device_identity_pk: z.string(),
 });
 
+const ConnectionOptionButton = ({
+  onClick,
+  description,
+  icon,
+  title,
+}: {
+  onClick: () => void;
+  title: string;
+  description: string;
+  icon: React.ReactNode;
+}) => {
+  return (
+    <Button
+      className="flex flex-1 cursor-pointer flex-col items-start gap-1 rounded-lg p-4 text-left"
+      onClick={() => onClick()}
+      size="auto"
+      variant="ghost"
+    >
+      <div className="">{icon}</div>
+      <p className="text-[15px] font-medium leading-none">{title}</p>
+      <p className="text-xs text-gray-100">{description}</p>
+    </Button>
+  );
+};
+
 const OnboardingPage = () => {
   const navigate = useNavigate();
   const setAuth = useAuth((state) => state.setAuth);
@@ -156,25 +183,29 @@ const OnboardingPage = () => {
   }, []);
 
   async function onSubmit(currentValues: z.infer<typeof formSchema>) {
-    submitRegistration(currentValues);
+    await submitRegistration(currentValues);
   }
 
   return (
-    <div className="mx-auto max-w-lg p-10">
-      <h1 className="mb-4 text-center text-3xl font-semibold">Register</h1>
+    <OnboardingLayout>
+      <h1 className="mb-4 text-left text-2xl font-semibold">
+        Quick Connection ⚡
+      </h1>
       <Form {...setupDataForm}>
         <form
-          className="space-y-8"
+          className="space-y-6"
           onSubmit={setupDataForm.handleSubmit(onSubmit)}
         >
-          <FormField
-            control={setupDataForm.control}
-            name="node_address"
-            render={({ field }) => (
-              <TextField field={field} label={'Node Address'} />
-            )}
-          />
-          {isError && <ErrorMessage message={error.message} />}
+          <div className="space-y-4">
+            <FormField
+              control={setupDataForm.control}
+              name="node_address"
+              render={({ field }) => (
+                <TextField field={field} label={'Node Address'} />
+              )}
+            />
+            {isError && <ErrorMessage message={error.message} />}
+          </div>
           <Button
             className="w-full"
             disabled={isPending}
@@ -182,11 +213,30 @@ const OnboardingPage = () => {
             type="submit"
             variant="default"
           >
-            Submit
+            Connect
           </Button>
         </form>
       </Form>
-    </div>
+      <div className="mt-8 flex gap-4">
+        <ConnectionOptionButton
+          description={'Use the QR code to connect'}
+          icon={<QrCode className="text-gray-100" />}
+          onClick={() => {}}
+          title={'QR Code'}
+        />
+
+        <ConnectionOptionButton
+          description={'Use a connection file and passphrase'}
+          icon={
+            <span aria-hidden className="text-base">
+              🔑
+            </span>
+          }
+          onClick={() => {}}
+          title={'Restore'}
+        />
+      </div>
+    </OnboardingLayout>
   );
 };
 
diff --git a/apps/shinkai-tray/src/routes/index.tsx b/apps/shinkai-tray/src/routes/index.tsx
index 8ae08fc3b..ce2838986 100644
--- a/apps/shinkai-tray/src/routes/index.tsx
+++ b/apps/shinkai-tray/src/routes/index.tsx
@@ -1,6 +1,5 @@
 import { ApiConfig } from '@shinkai_network/shinkai-message-ts/api';
-import { invoke } from '@tauri-apps/api/tauri';
-import { useEffect } from 'react';
+import React, { useEffect } from 'react';
 import { Navigate, Route, Routes } from 'react-router-dom';
 
 import ChatConversation from '../pages/chat/chat-conversation';
@@ -9,10 +8,11 @@ import ChatLayout from '../pages/chat/layout';
 import CreateAgentPage from '../pages/create-agent';
 import CreateChatPage from '../pages/create-chat';
 import CreateJobPage from '../pages/create-job';
-import GenerateCodePage from '../pages/generate-code.tsx';
+import GenerateCodePage from '../pages/generate-code';
 import MainLayout from '../pages/layout/main-layout';
-import OnboardingPage from '../pages/onboarding.tsx';
+import OnboardingPage from '../pages/onboarding';
 import SettingsPage from '../pages/settings';
+import WelcomePage from '../pages/welcome';
 import { useAuth } from '../store/auth';
 import {
   ADD_AGENT_PATH,
@@ -31,32 +31,16 @@ const ProtectedRoute = ({ children }: { children: React.ReactNode }) => {
   }, [auth?.node_address]);
 
   if (!auth) {
-    return <Navigate replace to={ONBOARDING_PATH} />;
+    return <Navigate replace to={'/welcome'} />;
   }
   return children;
 };
 
 const AppRoutes = () => {
-  useEffect(() => {
-    console.log('Registering hotkey');
-    // Register the global shortcut
-    // register("Alt+Shift+Enter", async () => {
-    //   console.log("Hotkey activated");
-    // });
-
-    // Check if setup data is valid
-    (invoke('validate_setup_data') as Promise<boolean>)
-      .then((isValid: boolean) => {
-        console.log('is already', isValid);
-      })
-      .catch((error: string) => {
-        console.error('Failed to validate setup data:', error);
-      });
-  }, []);
-
   return (
     <Routes>
       <Route element={<MainLayout />}>
+        <Route element={<WelcomePage />} path={'/welcome'} />
         <Route element={<OnboardingPage />} path={ONBOARDING_PATH} />
         <Route
           element={
diff --git a/libs/shinkai-ui/src/components/separator.tsx b/libs/shinkai-ui/src/components/separator.tsx
index 9d2707e71..c0c8e3569 100644
--- a/libs/shinkai-ui/src/components/separator.tsx
+++ b/libs/shinkai-ui/src/components/separator.tsx
@@ -13,7 +13,7 @@ const Separator = React.forwardRef<
   ) => (
     <SeparatorPrimitive.Root
       className={cn(
-        'shrink-0 bg-slate-800 dark:bg-gray-800',
+        'shrink-0 bg-gray-300',
         orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
         className,
       )}

From 04364d9d2da1e2b6ce61cc14945512f642061e85 Mon Sep 17 00:00:00 2001
From: paulclindo <paulclindo@gmail.com>
Date: Wed, 29 Nov 2023 19:56:28 -0500
Subject: [PATCH 3/9] refactor: onboarding pages

---
 apps/shinkai-tray/public/visor.svg            |  11 +++
 apps/shinkai-tray/public/welcome.jpg          | Bin 0 -> 18907 bytes
 .../src/pages/layout/onboarding-layout.tsx    |  26 +++++++
 apps/shinkai-tray/src/pages/welcome.tsx       |  72 ++++++++++++++++++
 4 files changed, 109 insertions(+)
 create mode 100644 apps/shinkai-tray/public/visor.svg
 create mode 100644 apps/shinkai-tray/public/welcome.jpg
 create mode 100644 apps/shinkai-tray/src/pages/layout/onboarding-layout.tsx
 create mode 100644 apps/shinkai-tray/src/pages/welcome.tsx

diff --git a/apps/shinkai-tray/public/visor.svg b/apps/shinkai-tray/public/visor.svg
new file mode 100644
index 000000000..abb7278fe
--- /dev/null
+++ b/apps/shinkai-tray/public/visor.svg
@@ -0,0 +1,11 @@
+<svg width="100" height="27" viewBox="0 0 100 27" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <circle cx="13.7615" cy="13.7617" r="10.0917" fill="white"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M26.5109 13.3204C26.5109 20.6412 20.5762 26.5758 13.2554 26.5758C5.93466 26.5758 0 20.6412 0 13.3204C0 5.99961 5.93466 0.0649414 13.2554 0.0649414C20.5762 0.0649414 26.5109 5.99961 26.5109 13.3204ZM21.3589 11.2285C21.9046 11.6625 22.3732 12.1838 22.7463 12.7703C22.8861 12.9901 22.798 13.2769 22.5684 13.3998L20.8697 14.3087C20.6401 14.4316 20.3568 14.3426 20.2034 14.1322C20.0784 13.9608 19.9377 13.8014 19.7828 13.6561C19.7827 13.656 19.7825 13.656 19.7824 13.6562C19.7823 13.6563 19.7821 13.6563 19.782 13.6562C19.4441 13.3392 19.0449 13.0946 18.609 12.9375C18.519 12.905 18.4278 12.8765 18.3357 12.8518C17.9782 12.7561 17.738 13.1517 17.8767 13.4948C18.0025 13.8063 18.0988 14.1305 18.1633 14.4632C18.3474 15.4122 18.2664 16.3935 17.9292 17.2994C17.5919 18.2053 17.0115 19.0008 16.2517 19.5983C15.6158 20.0985 14.8748 20.4438 14.0873 20.6101C13.8325 20.6639 13.5972 20.477 13.5665 20.2185L13.3366 18.2867C13.3058 18.0281 13.4931 17.798 13.7405 17.7167C14.0021 17.6308 14.2478 17.4996 14.4661 17.3279C14.8086 17.0586 15.0702 16.7 15.2222 16.2917C15.3742 15.8834 15.4107 15.4411 15.3277 15.0133C15.253 14.6281 15.0839 14.2681 14.8365 13.9652C14.8191 13.944 14.7995 13.9247 14.7784 13.9071L12.9999 12.4277C12.7997 12.2612 12.7712 11.9625 12.9523 11.7753C13.4357 11.2759 13.9996 10.8595 14.6215 10.5442C14.8518 10.4274 15.0885 10.3252 15.3304 10.238C15.7282 10.0946 16.1406 9.99132 16.5613 9.93056C17.4072 9.80841 18.2692 9.86055 19.0943 10.0838C19.9193 10.307 20.69 10.6966 21.3589 11.2285ZM4.84231 15.4215L4.84233 15.4218L4.84235 15.4221C5.47869 15.9926 6.22497 16.4269 7.03532 16.6984C7.54145 16.868 8.06591 16.9718 8.59584 17.0083L8.65158 17.0119C9.12239 17.0402 9.59611 17.0153 10.0637 16.9369C10.9066 16.7957 11.7116 16.4835 12.4294 16.0197L12.4295 16.0194L12.4296 16.0191C12.8698 15.7346 13.2726 15.3959 13.6286 15.011C13.8054 14.8198 13.7701 14.5218 13.5662 14.3599L11.7582 12.924C11.7369 12.9071 11.7171 12.8885 11.6994 12.8679C11.4435 12.5699 11.2651 12.2125 11.1813 11.8275C11.0887 11.4017 11.1152 10.9587 11.2579 10.547C11.4006 10.1354 11.654 9.77101 11.9903 9.49397C12.2046 9.31739 12.4473 9.18065 12.7069 9.08883C12.9524 9.00198 13.1344 8.76766 13.0978 8.50983L12.8242 6.58378C12.7875 6.32595 12.5481 6.14451 12.2946 6.20407C11.5111 6.38816 10.7781 6.7502 10.1537 7.26461C9.40761 7.87925 8.84538 8.68763 8.52876 9.60096C8.21214 10.5143 8.15339 11.4972 8.35896 12.4417C8.47319 12.9666 8.66656 13.4683 8.93039 13.9304C8.98662 14.0289 8.91802 14.1536 8.80482 14.1462C8.60622 14.1332 8.40864 14.1027 8.2144 14.0548C7.76443 13.944 7.34189 13.7422 6.97273 13.4621C6.72913 13.2772 6.51218 13.0608 6.32731 12.8189C6.16914 12.6121 5.88395 12.5295 5.65718 12.6575L3.97948 13.6048C3.75271 13.7328 3.67121 14.0216 3.81592 14.2381C4.10725 14.674 4.45209 15.0715 4.84231 15.4215Z" fill="#FE6162"/>
+    <path d="M97.3952 9.75192C96.4331 9.75192 95.6674 8.98618 95.6674 8.0241C95.6674 7.06202 96.4331 6.31592 97.3952 6.31592C98.3377 6.31592 99.1034 7.06202 99.1034 8.0241C99.1034 8.98618 98.3377 9.75192 97.3952 9.75192ZM95.903 21.1006V11.2834H98.9267V21.1006H95.903Z" fill="white"/>
+    <path d="M87.785 21.3558C85.7038 21.3558 84.4079 20.1385 84.4079 18.2143C84.4079 16.4079 85.6841 15.2888 88.0402 15.1121L90.7891 14.8961V14.739C90.7891 13.7769 90.2 13.2665 89.1201 13.2665C87.8439 13.2665 87.1567 13.7573 87.1567 14.6409H84.6435C84.6435 12.4222 86.4695 10.9692 89.2772 10.9692C92.1242 10.9692 93.7342 12.5596 93.7342 15.3673V21.1005H91.0639L90.8676 19.8047C90.5534 20.7079 89.2576 21.3558 87.785 21.3558ZM88.8453 19.1175C90.0037 19.1175 90.8087 18.5481 90.8087 17.4289V16.8988L89.2772 17.0362C87.9617 17.154 87.4905 17.4486 87.4905 18.0769C87.4905 18.7837 87.9224 19.1175 88.8453 19.1175Z" fill="white"/>
+    <path d="M76.9914 21.1007H73.9677V6.29639H76.9914V14.8177L80.1722 11.2835H83.9616L80.2704 15.1711L83.8438 21.1007H80.3489L78.1499 17.429L76.9914 18.6464V21.1007Z" fill="white"/>
+    <path d="M65.0843 21.1005H62.0606V11.2834H64.9076L65.1039 12.3044C65.7126 11.4601 66.8317 10.9692 68.1079 10.9692C70.4444 10.9692 71.7992 12.4614 71.7992 15.0335V21.1005H68.7755V15.76C68.7755 14.523 68.0883 13.718 67.0477 13.718C65.85 13.718 65.0843 14.5034 65.0843 15.7207V21.1005Z" fill="white"/>
+    <path d="M58.2608 9.75192C57.2987 9.75192 56.533 8.98618 56.533 8.0241C56.533 7.06202 57.2987 6.31592 58.2608 6.31592C59.2032 6.31592 59.969 7.06202 59.969 8.0241C59.969 8.98618 59.2032 9.75192 58.2608 9.75192ZM56.7686 21.1006V11.2834H59.7923V21.1006H56.7686Z" fill="white"/>
+    <path d="M47.8852 21.1007H44.8615V6.29639H47.9048V12.3045C48.5135 11.4602 49.6326 10.9694 50.9088 10.9694C53.2453 10.9694 54.6001 12.4616 54.6001 15.0337V21.1007H51.5764V15.7601C51.5764 14.5232 50.8892 13.7182 49.8486 13.7182C48.6509 13.7182 47.8852 14.5035 47.8852 15.7209V21.1007Z" fill="white"/>
+    <path d="M32.4648 10.7926C32.4648 8.16164 34.6835 6.29639 37.8053 6.29639C40.9272 6.29639 42.8906 8.02421 42.8906 10.773H39.7295C39.7295 9.75202 38.9637 9.12373 37.7661 9.12373C36.4702 9.12373 35.6455 9.71276 35.6455 10.6748C35.6455 11.5584 36.0971 11.9903 37.1181 12.2063L39.2975 12.6579C41.8893 13.188 43.1262 14.425 43.1262 16.7222C43.1262 19.5299 40.9272 21.3559 37.5893 21.3559C34.3497 21.3559 32.2488 19.6084 32.2488 16.8793H35.4099C35.4099 17.9395 36.1953 18.5286 37.609 18.5286C39.0423 18.5286 39.9455 17.9592 39.9455 17.0364C39.9455 16.2313 39.5724 15.819 38.6103 15.6227L36.3916 15.1711C33.7999 14.641 32.4648 13.1684 32.4648 10.7926Z" fill="white"/>
+</svg>
diff --git a/apps/shinkai-tray/public/welcome.jpg b/apps/shinkai-tray/public/welcome.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..a27daec5e537bdfbb51c2f00d73aabae1f6a8d20
GIT binary patch
literal 18907
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

literal 0
HcmV?d00001

diff --git a/apps/shinkai-tray/src/pages/layout/onboarding-layout.tsx b/apps/shinkai-tray/src/pages/layout/onboarding-layout.tsx
new file mode 100644
index 000000000..374c2d6ad
--- /dev/null
+++ b/apps/shinkai-tray/src/pages/layout/onboarding-layout.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+
+const OnboardingLayout = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <div className="mx-auto flex h-full">
+      <div className="bg-app-gradient grid flex-1 place-items-center">
+        <img
+          alt="shinkai logo"
+          className="w-full"
+          data-cy="shinkai-logo"
+          src={'/welcome.jpg'}
+        />
+      </div>
+      <div className="flex flex-1 flex-col justify-between">
+        <img
+          alt="shinkai logo"
+          className="w-30 mx-auto py-10"
+          data-cy="shinkai-logo"
+          src={'./visor.svg'}
+        />
+        <div className="flex-1 px-8 pb-10">{children}</div>
+      </div>
+    </div>
+  );
+};
+export default OnboardingLayout;
diff --git a/apps/shinkai-tray/src/pages/welcome.tsx b/apps/shinkai-tray/src/pages/welcome.tsx
new file mode 100644
index 000000000..c9c0db820
--- /dev/null
+++ b/apps/shinkai-tray/src/pages/welcome.tsx
@@ -0,0 +1,72 @@
+import { buttonVariants, Checkbox } from '@shinkai_network/shinkai-ui';
+import { cn } from '@shinkai_network/shinkai-ui/utils';
+import { useState } from 'react';
+import { Link } from 'react-router-dom';
+
+import OnboardingLayout from './layout/onboarding-layout';
+
+const WelcomePage = () => {
+  const [acceptedTermsAndContidions, setAcceptedTermsAndContidions] = useState<
+    boolean | 'indeterminate'
+  >(false);
+
+  return (
+    <OnboardingLayout>
+      <div className="flex h-full flex-col justify-between">
+        <p className="text-4xl font-semibold leading-[1.5] tracking-wide">
+          Transform your macOS experience using AI with Shinkai Tray ✨
+        </p>
+        <div className="">
+          <div className="flex flex-col gap-10">
+            <div className="flex gap-3">
+              <Checkbox
+                checked={acceptedTermsAndContidions}
+                id="terms"
+                onCheckedChange={setAcceptedTermsAndContidions}
+              />
+              <label
+                className="inline-block cursor-pointer text-xs leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                htmlFor="terms"
+              >
+                <span className={'leading-4 tracking-wide'}>
+                  By continuing, you agree to our{' '}
+                  <a
+                    className={'text-blue-400 underline'}
+                    href={'https://www.shinkai.com/terms-of-service'}
+                    rel="noreferrer"
+                    target={'_blank'}
+                  >
+                    Terms of Service{' '}
+                  </a>
+                  and{' '}
+                  <a
+                    className={'block text-blue-400 underline'}
+                    href={'https://www.shinkai.com/privacy-policy'}
+                    rel="noreferrer"
+                    target={'_blank'}
+                  >
+                    Privacy Policy
+                  </a>
+                </span>
+              </label>
+            </div>
+            <Link
+              className={cn(
+                buttonVariants({
+                  variant: 'default',
+                }),
+                !acceptedTermsAndContidions &&
+                  'pointer-events-none bg-gray-300 opacity-60',
+              )}
+              to={'/onboarding'}
+            >
+              Get Started
+            </Link>
+          </div>
+        </div>
+      </div>
+    </OnboardingLayout>
+  );
+};
+
+export default WelcomePage;

From ba2c8ad0e158d5f3878cb1fa076c86d3f504e78a Mon Sep 17 00:00:00 2001
From: paulclindo <paulclindo@gmail.com>
Date: Thu, 30 Nov 2023 12:07:39 -0500
Subject: [PATCH 4/9] wip

---
 .../src/pages/chat/empty-message.tsx          |  18 +-
 apps/shinkai-tray/src/pages/chat/layout.tsx   |   6 +-
 apps/shinkai-tray/src/pages/create-agent.tsx  |   8 +-
 apps/shinkai-tray/src/pages/create-job.tsx    | 342 ++++++++++--------
 .../src/pages/layout/main-layout.tsx          |   2 +-
 5 files changed, 196 insertions(+), 180 deletions(-)

diff --git a/apps/shinkai-tray/src/pages/chat/empty-message.tsx b/apps/shinkai-tray/src/pages/chat/empty-message.tsx
index b9e9aedba..82c5ff9ba 100644
--- a/apps/shinkai-tray/src/pages/chat/empty-message.tsx
+++ b/apps/shinkai-tray/src/pages/chat/empty-message.tsx
@@ -22,21 +22,9 @@ const EmptyMessage = () => {
   return (
     <div className="flex w-full items-center justify-center p-6">
       <div className="flex max-w-lg flex-col items-center gap-4 text-center">
-        <svg
-          className="shrink-0"
-          fill="none"
-          height="60"
-          viewBox="0 0 60 60"
-          width="60"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            clipRule="evenodd"
-            d="M60 30C60 46.5685 46.5685 60 30 60C13.4315 60 0 46.5685 0 30C0 13.4315 13.4315 0 30 0C46.5685 0 60 13.4315 60 30ZM49.2164 26.0225L49.2164 26.0224C47.8058 24.6988 46.1394 23.6777 44.3197 23.0218C42.4999 22.3658 40.5652 22.089 38.6345 22.2082C36.7038 22.3274 34.8179 22.8402 33.0927 23.7151C31.6853 24.4288 30.409 25.3711 29.315 26.5015C28.9051 26.925 28.9696 27.601 29.4227 27.978L33.4437 31.3228C33.4912 31.3623 33.5354 31.4058 33.5746 31.4536C34.1364 32.1399 34.5203 32.9562 34.6898 33.8298C34.8776 34.7979 34.795 35.799 34.451 36.7231C34.1069 37.6472 33.5149 38.4587 32.7398 39.0682C32.2457 39.4568 31.6895 39.7537 31.0976 39.9482C30.5376 40.1321 30.1138 40.6529 30.1834 41.2382L30.7037 45.6102C30.7733 46.1954 31.3057 46.6182 31.8824 46.4965C33.6646 46.1202 35.3417 45.3386 36.7809 44.2067C38.5006 42.8543 39.8142 41.054 40.5774 39.0037C41.3407 36.9534 41.524 34.7325 41.1073 32.5848C40.9612 31.8318 40.7434 31.0981 40.4585 30.393C40.1448 29.6165 40.6882 28.7212 41.4972 28.9376L41.5179 28.9432C42.5303 29.2171 43.4761 29.6952 44.2969 30.348C44.8386 30.7788 45.3184 31.2797 45.7243 31.8363C46.0716 32.3126 46.7126 32.514 47.2323 32.2359L51.0769 30.1787C51.5966 29.9007 51.7958 29.2514 51.4795 28.7541C50.8423 27.7525 50.082 26.8348 49.2164 26.0227L49.2164 26.0225ZM10.9594 34.7566L10.9594 34.7564L10.9594 34.7562C10.0755 33.9638 9.29446 33.0634 8.63467 32.0763C8.30715 31.5863 8.4916 30.9327 9.00483 30.643L12.8018 28.4992C13.3151 28.2094 13.9605 28.3962 14.3185 28.8645C14.7369 29.4118 15.2279 29.9017 15.7792 30.3201C16.6147 30.9541 17.571 31.4106 18.5894 31.6615L18.6094 31.6664C19.4231 31.8646 19.9461 30.9572 19.6149 30.188C19.3143 29.4898 19.08 28.7615 18.917 28.0123C18.4517 25.8746 18.5847 23.65 19.3013 21.583C20.0178 19.5159 21.2903 17.6864 22.9788 16.2953C24.392 15.1311 26.0509 14.3117 27.8242 13.8951C28.398 13.7603 28.9398 14.1709 29.0227 14.7544L29.6419 19.1135C29.7248 19.6971 29.3129 20.2274 28.7572 20.4239C28.1698 20.6317 27.6205 20.9412 27.1354 21.3408C26.3744 21.9678 25.8008 22.7925 25.4778 23.7242C25.1549 24.6559 25.0949 25.6586 25.3046 26.6221C25.4936 27.4903 25.8949 28.2965 26.4707 28.9693C26.511 29.0164 26.5564 29.059 26.605 29.0976L30.7037 32.3528C31.1652 32.7194 31.2451 33.3938 30.8449 33.8265C29.7767 34.9813 28.5222 35.9524 27.1313 36.6978C25.4263 37.6115 23.5525 38.1669 21.625 38.3299C19.6975 38.4929 17.7571 38.2599 15.9229 37.6454C14.0888 37.0309 12.3997 36.0478 10.9594 34.7566Z"
-            fill="white"
-            fillRule="evenodd"
-          />
-        </svg>
+        <span aria-hidden={true} className="text-4xl">
+          🤖
+        </span>
 
         <h1 className="text-2xl font-bold text-white">Ask Shinkai AI</h1>
         <p className="text-gray-80 text-sm">
diff --git a/apps/shinkai-tray/src/pages/chat/layout.tsx b/apps/shinkai-tray/src/pages/chat/layout.tsx
index c2043c6f5..f62ce6a9d 100644
--- a/apps/shinkai-tray/src/pages/chat/layout.tsx
+++ b/apps/shinkai-tray/src/pages/chat/layout.tsx
@@ -11,18 +11,14 @@ import {
   Button,
   ChatBubbleIcon,
   Form,
-  FormControl,
   FormField,
-  FormItem,
-  FormLabel,
-  Input,
   JobBubbleIcon,
   ScrollArea,
   Separator,
   TextField,
 } from '@shinkai_network/shinkai-ui';
 import { Query } from '@tanstack/react-query';
-import { Edit3, MessageCircleIcon, Workflow } from 'lucide-react';
+import { Edit3 } from 'lucide-react';
 import { useEffect, useRef, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { Link, Outlet, useMatch } from 'react-router-dom';
diff --git a/apps/shinkai-tray/src/pages/create-agent.tsx b/apps/shinkai-tray/src/pages/create-agent.tsx
index e8936b93a..ac5a369d2 100644
--- a/apps/shinkai-tray/src/pages/create-agent.tsx
+++ b/apps/shinkai-tray/src/pages/create-agent.tsx
@@ -113,11 +113,7 @@ const CreateAgentPage = () => {
               control={addAgentForm.control}
               name="apikey"
               render={({ field }) => (
-                <TextField
-                  field={field}
-                  helperMessage="Enter the API key for your agent"
-                  label="Api Key"
-                />
+                <TextField field={field} label="Api Key" />
               )}
             />
 
@@ -133,7 +129,7 @@ const CreateAgentPage = () => {
                   >
                     <FormControl>
                       <SelectTrigger>
-                        <SelectValue placeholder="Select your Model" />
+                        <SelectValue placeholder={' '} />
                       </SelectTrigger>
                     </FormControl>
                     <SelectContent>
diff --git a/apps/shinkai-tray/src/pages/create-job.tsx b/apps/shinkai-tray/src/pages/create-job.tsx
index fc556f401..050e6b745 100644
--- a/apps/shinkai-tray/src/pages/create-job.tsx
+++ b/apps/shinkai-tray/src/pages/create-job.tsx
@@ -32,9 +32,171 @@ import SimpleLayout from './layout/simple-layout';
 const createJobSchema = z.object({
   model: z.string(),
   description: z.string(),
-  file: z.any().optional(),
+  files: z.array(z.any()),
 });
 
+const FileInput = ({
+  value,
+  onChange,
+}: {
+  value: File[];
+  onChange: (files: File[]) => void;
+}) => {
+  const {
+    getRootProps: getRootFileProps,
+    getInputProps: getInputFileProps,
+    acceptedFiles,
+  } = useDropzone({
+    multiple: true,
+    maxFiles: 5,
+
+    // accept: {
+    //   "image/png": [".png"],
+    //   "text/html": [".html", ".htm"],
+    //   "application/pdf": [".pdf"],
+    // },
+    onDrop: (acceptedFiles) => {
+      onChange(acceptedFiles);
+      // if (isImageOrPdf(file)) {
+      //   const reader = new FileReader();
+      //   reader.addEventListener('abort', () =>
+      //     console.log('file reading was aborted'),
+      //   );
+      //   reader.addEventListener(
+      //     'load',
+      //     (event: ProgressEvent<FileReader>) => {
+      //       const binaryUrl = event.target?.result;
+      //       const image = new Image();
+      //       image.addEventListener('load', function () {
+      //         const imageInfo = Object.assign(file, {
+      //           preview: URL.createObjectURL(file),
+      //         });
+      //         createJobForm.setValue('file', imageInfo, {
+      //           shouldValidate: true,
+      //         });
+      //       });
+      //       image.src = binaryUrl as string;
+      //     },
+      //   );
+      //   reader.readAsDataURL(file);
+      // } else {
+      //   createJobForm.setValue('file', file, { shouldValidate: true });
+      // }
+    },
+  });
+
+  const removeFile = (file: File) => () => {
+    console.log('qweqweqweqw');
+    // const newFiles = [...value];
+    // console.log(newFiles, 'newFiles');
+    // newFiles.splice(newFiles.indexOf(file), 1);
+    // console.log(newFiles, 'newFiles2');
+    // onChange(newFiles);
+    // setValue("presentation-screens", newFiles);
+  };
+
+  return (
+    <>
+      <div className="flex gap-5">
+        <div
+          {...getRootFileProps({
+            className: cn(
+              'dropzone group relative relative mt-3 flex h-[6.375rem] w-[9.5rem] cursor-pointer items-center justify-center overflow-hidden rounded-lg border-2 border-dashed border-slate-500 border-slate-500 transition-colors hover:border-white',
+              // file && 'border border-solid border-slate-500',
+            ),
+          })}
+        >
+          <div className="flex flex-col items-center gap-2 p-4 text-xs">
+            <ImagePlusIcon className="stroke-slate-500 transition-colors group-hover:stroke-white" />
+            <span className="text-center  font-semibold text-slate-400">
+              Drag & drop your documents here
+            </span>
+            {/* <span className="text-foreground">Click here to Upload</span> */}
+          </div>
+          {/*{...createJobForm.register('file')}*/}
+          <input {...getInputFileProps({})} />
+          {/*{file && (*/}
+          {/*  <>*/}
+          {/*    {isImageOrPdf(file) && (*/}
+          {/*      <img*/}
+          {/*        alt=""*/}
+          {/*        className="absolute inset-0 h-full w-full rounded-lg bg-white object-cover"*/}
+          {/*        src={file.preview}*/}
+          {/*      />*/}
+          {/*    )}*/}
+          {/*    {!isImageOrPdf(file) && (*/}
+          {/*      <div className="flex flex-col items-center gap-2">*/}
+          {/*        <FileCheck2 className="text-gray-80 h-6 w-6 " />*/}
+          {/*        <span className="line-clamp-3 break-all px-2 text-center text-xs ">*/}
+          {/*          {file?.name}*/}
+          {/*        </span>*/}
+          {/*      </div>*/}
+          {/*    )}*/}
+          {/*  </>*/}
+          {/*)}*/}
+          {/*{file != null && (*/}
+        </div>
+        <span className="text-gray-80 pt-4 text-xs font-bold">
+          Supported formats
+          <p className="mt-2">
+            Plain Text
+            <span className="block font-normal">
+              {' '}
+              {[
+                'eml',
+                'html',
+                'json',
+                'md',
+                'msg',
+                'rst',
+                'rtf',
+                'txt',
+                'xml',
+              ].join(' • ')}
+            </span>
+          </p>
+          <p className="text-gray-80 mt-1 font-bold">
+            Documents
+            <span className="block font-normal">
+              {[
+                'csv',
+                'doc',
+                'epub',
+                'odt',
+                'pdf',
+                'ppt',
+                'pptx',
+                'tsv',
+                'xlsx',
+              ].join(' • ')}
+            </span>
+          </p>
+        </span>
+      </div>
+      <div className="flex flex-col gap-6 pt-8">
+        {acceptedFiles?.map((file, idx) => (
+          <div className="relative flex" key={idx}>
+            <span>
+              {file.path} - {file.type} bytes
+            </span>
+            <button
+              className="absolute right-1 top-1 h-6 w-6 cursor-pointer rounded-full bg-gray-400 p-1 transition-colors hover:bg-gray-300"
+              onClick={() => {
+                const newFiles = [...value];
+                newFiles.splice(newFiles.indexOf(file), 1);
+                onChange(newFiles);
+              }}
+              type={'button'}
+            >
+              <X className="h-full w-full text-gray-100" />
+            </button>
+          </div>
+        ))}
+      </div>
+    </>
+  );
+};
+
 export function isImageOrPdf(file: File): boolean {
   if (!file) return false;
   return (
@@ -49,46 +211,6 @@ const CreateJobPage = () => {
     resolver: zodResolver(createJobSchema),
   });
 
-  const { getRootProps: getRootFileProps, getInputProps: getInputFileProps } =
-    useDropzone({
-      multiple: false,
-      // accept: {
-      //   "image/png": [".png"],
-      //   "text/html": [".html", ".htm"],
-      //   "application/pdf": [".pdf"],
-      // },
-      onDrop: (acceptedFiles) => {
-        const file = acceptedFiles[0];
-        if (isImageOrPdf(file)) {
-          const reader = new FileReader();
-          reader.addEventListener('abort', () =>
-            console.log('file reading was aborted'),
-          );
-          reader.addEventListener(
-            'load',
-            (event: ProgressEvent<FileReader>) => {
-              const binaryUrl = event.target?.result;
-              const image = new Image();
-              image.addEventListener('load', function () {
-                const imageInfo = Object.assign(file, {
-                  preview: URL.createObjectURL(file),
-                });
-                createJobForm.setValue('file', imageInfo, {
-                  shouldValidate: true,
-                });
-              });
-              image.src = binaryUrl as string;
-            },
-          );
-          reader.readAsDataURL(file);
-        } else {
-          createJobForm.setValue('file', file, { shouldValidate: true });
-        }
-      },
-    });
-
-  const { file } = createJobForm.watch();
-
   const { agents, isSuccess } = useAgents({
     sender: auth?.shinkai_identity ?? '',
     senderSubidentity: `${auth?.profile}`,
@@ -117,7 +239,7 @@ const CreateJobPage = () => {
       agentId: data.model,
       content: data.description,
       files_inbox: '',
-      files: [data.file],
+      files: data.files,
       my_device_encryption_sk: auth.my_device_encryption_sk,
       my_device_identity_sk: auth.my_device_identity_sk,
       node_encryption_pk: auth.node_encryption_pk,
@@ -131,12 +253,12 @@ const CreateJobPage = () => {
       createJobForm.setValue('model', agents[0].id);
     }
   }, [agents, createJobForm, isSuccess]);
-  useEffect(() => {
-    return () => {
-      file && URL.revokeObjectURL(file.preview);
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  // useEffect(() => {
+  //   return () => {
+  //     file && URL.revokeObjectURL(file.preview);
+  //   };
+  //   // eslint-disable-next-line react-hooks/exhaustive-deps
+  // }, []);
 
   return (
     <SimpleLayout title="Create Job">
@@ -208,112 +330,26 @@ const CreateJobPage = () => {
                 </FormItem>
               )}
             />
-
-            <div>
-              <FormLabel>
-                Upload a file
-                <span className="text-gray-80 ml-1">(optional)</span>
-              </FormLabel>
-              <div className="flex gap-5">
-                <div
-                  {...getRootFileProps({
-                    className: cn(
-                      'dropzone group relative relative mt-3 flex h-[6.375rem] w-[9.5rem] cursor-pointer items-center justify-center overflow-hidden rounded-lg border-2 border-dashed border-slate-500 border-slate-500 transition-colors hover:border-white',
-                      file && 'border border-solid border-slate-500',
-                    ),
-                  })}
-                >
-                  {!file && (
-                    <div className="flex flex-col items-center gap-2 p-4 text-xs">
-                      <ImagePlusIcon className="stroke-slate-500 transition-colors group-hover:stroke-white" />
-                      <span className="text-center  font-semibold text-slate-400">
-                        Drag & drop your documents here
-                      </span>
-                      {/* <span className="text-foreground">Click here to Upload</span> */}
-                    </div>
-                  )}
-                  <input
-                    {...createJobForm.register('file')}
-                    {...getInputFileProps({
-                      onChange: createJobForm.register('file').onChange,
-                    })}
-                  />
-                  {file && (
-                    <>
-                      {isImageOrPdf(file) && (
-                        <img
-                          alt=""
-                          className="absolute inset-0 h-full w-full rounded-lg bg-white object-cover"
-                          src={file.preview}
-                        />
-                      )}
-                      {!isImageOrPdf(file) && (
-                        <div className="flex flex-col items-center gap-2">
-                          <FileCheck2 className="text-gray-80 h-6 w-6 " />
-                          <span className="line-clamp-3 break-all px-2 text-center text-xs ">
-                            {file?.name}
-                          </span>
-                        </div>
-                      )}
-                    </>
-                  )}
-                  {file != null && (
-                    <button
-                      className={cn(
-                        'absolute right-1 top-1 h-6 w-6 cursor-pointer rounded-full bg-slate-900 p-1 hover:bg-slate-800',
-                        file ? 'block' : 'hidden',
-                      )}
-                      onClick={(event) => {
-                        event.stopPropagation();
-                        createJobForm.setValue('file', undefined, {
-                          shouldValidate: true,
-                        });
-                      }}
-                    >
-                      <X className="h-full w-full text-slate-500" />
-                    </button>
-                  )}
-                </div>
-                <span className="text-gray-80 pt-4 text-xs font-bold">
-                  Supported formats
-                  <p className="mt-2">
-                    Plain Text
-                    <span className="block font-normal">
-                      {' '}
-                      {[
-                        'eml',
-                        'html',
-                        'json',
-                        'md',
-                        'msg',
-                        'rst',
-                        'rtf',
-                        'txt',
-                        'xml',
-                      ].join(' • ')}
-                    </span>
-                  </p>
-                  <p className="text-gray-80 mt-1 font-bold">
-                    Documents
-                    <span className="block font-normal">
-                      {[
-                        'csv',
-                        'doc',
-                        'epub',
-                        'odt',
-                        'pdf',
-                        'ppt',
-                        'pptx',
-                        'tsv',
-                        'xlsx',
-                      ].join(' • ')}
-                    </span>
-                  </p>
-                </span>
-              </div>
-            </div>
+            <FormField
+              control={createJobForm.control}
+              name="files"
+              render={({ field }) => (
+                <FormItem className="mt-3">
+                  {/*<FormLabel className="sr-only">*/}
+                  {/*  Upload a file (optional)*/}
+                  {/*</FormLabel>*/}
+                  <FormControl>
+                    <FileInput
+                      // multiple
+                      onChange={field.onChange}
+                      value={field.value}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
           </div>
-
           <Button
             className="w-full"
             disabled={isPending}
diff --git a/apps/shinkai-tray/src/pages/layout/main-layout.tsx b/apps/shinkai-tray/src/pages/layout/main-layout.tsx
index 271830cbc..4f11aebcb 100644
--- a/apps/shinkai-tray/src/pages/layout/main-layout.tsx
+++ b/apps/shinkai-tray/src/pages/layout/main-layout.tsx
@@ -210,7 +210,7 @@ const MainLayout = () => {
         className="flex h-9 shrink-0 cursor-default select-none items-center justify-center text-xs"
         data-tauri-drag-region={true}
       >
-        Shinkai AI
+        {/*Shinkai AI*/}
       </div>
       <Separator />
       <div className="flex-auto overflow-auto">

From 9fc5340242102cc28856ce64d543b90cba03c4da Mon Sep 17 00:00:00 2001
From: paulclindo <paulclindo@gmail.com>
Date: Thu, 30 Nov 2023 23:41:32 -0500
Subject: [PATCH 5/9] improve UI

---
 apps/shinkai-tray/public/onboarding.svg       |  61 ++++++
 .../src/components/chat/message.tsx           |  81 ++++----
 apps/shinkai-tray/src/globals.css             |   4 +-
 .../src/pages/chat/chat-conversation.tsx      |  13 +-
 apps/shinkai-tray/src/pages/chat/layout.tsx   |  58 +++---
 apps/shinkai-tray/src/pages/create-job.tsx    | 187 +++++++----------
 .../src/pages/layout/main-layout.tsx          |  10 +-
 .../src/pages/layout/onboarding-layout.tsx    |   8 +-
 apps/shinkai-tray/src/pages/onboarding.tsx    |   8 +-
 .../src/pages/restore-connection.tsx          | 193 ++++++++++++++++++
 apps/shinkai-tray/src/pages/welcome.tsx       |  10 +-
 apps/shinkai-tray/src/routes/index.tsx        |   2 +
 .../src/components/file-list/file-list.tsx    |   2 +-
 libs/shinkai-ui/src/assets/icons/index.tsx    |   2 +-
 libs/shinkai-ui/src/components/textfield.tsx  |   3 +-
 15 files changed, 438 insertions(+), 204 deletions(-)
 create mode 100644 apps/shinkai-tray/public/onboarding.svg
 create mode 100644 apps/shinkai-tray/src/pages/restore-connection.tsx

diff --git a/apps/shinkai-tray/public/onboarding.svg b/apps/shinkai-tray/public/onboarding.svg
new file mode 100644
index 000000000..d57845375
--- /dev/null
+++ b/apps/shinkai-tray/public/onboarding.svg
@@ -0,0 +1,61 @@
+<svg width="441" height="321" viewBox="0 0 441 321" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path opacity="0.4" d="M2.97721 137.364L0.47675 111.525C0.221224 108.885 2.29666 106.599 4.94943 106.599H26.8136C29.1277 106.599 31.0634 108.356 31.2863 110.66L33.7868 136.498C34.0423 139.138 31.9668 141.424 29.3141 141.424H7.44989C5.13581 141.424 3.20011 139.667 2.97721 137.364Z" fill="url(#paint0_linear_1208_1790)"/>
+    <path opacity="0.4" d="M72.4492 246.303L61.1048 120.483C60.8676 117.853 62.9392 115.586 65.5802 115.586H167.975C170.301 115.586 172.242 117.36 172.451 119.676L183.795 245.496C184.032 248.127 181.961 250.393 179.32 250.393H76.9247C74.5993 250.393 72.6581 248.619 72.4492 246.303Z" fill="url(#paint1_linear_1208_1790)"/>
+    <path opacity="0.4" d="M98.331 92.4348L91.4801 22.7844C91.2202 20.1416 93.2965 17.851 95.9521 17.851H157.824C160.136 17.851 162.07 19.6044 162.296 21.9047L169.147 91.5551C169.407 94.1979 167.331 96.4885 164.675 96.4885H102.803C100.492 96.4885 98.5572 94.7351 98.331 92.4348Z" fill="url(#paint2_linear_1208_1790)"/>
+    <path opacity="0.4" d="M239.835 315.954L228.49 190.134C228.253 187.503 230.325 185.237 232.966 185.237H335.361C337.686 185.237 339.627 187.011 339.836 189.327L351.181 315.147C351.418 317.777 349.346 320.044 346.705 320.044H244.31C241.985 320.044 240.044 318.27 239.835 315.954Z" fill="url(#paint3_linear_1208_1790)"/>
+    <path opacity="0.4" d="M281.579 31.7645L279.078 5.92645C278.823 3.28601 280.898 1.00003 283.551 1.00003H305.415C307.729 1.00003 309.665 2.75745 309.888 5.06077L312.388 30.8988C312.644 33.5393 310.569 35.8252 307.916 35.8252H286.052C283.737 35.8252 281.802 34.0678 281.579 31.7645Z" fill="url(#paint4_linear_1208_1790)"/>
+    <path opacity="0.4" d="M369.069 109.286L362.218 39.6353C361.958 36.9925 364.035 34.7018 366.69 34.7018H428.562C430.874 34.7018 432.808 36.4553 433.034 38.7555L439.885 108.406C440.145 111.049 438.069 113.339 435.413 113.339H373.541C371.23 113.339 369.295 111.586 369.069 109.286Z" fill="url(#paint5_linear_1208_1790)"/>
+    <rect x="128.909" y="22.0637" width="240.968" height="74.7057" rx="8.1446" fill="#2C2A30"/>
+    <rect x="128.909" y="22.0637" width="240.968" height="74.7057" rx="8.1446" stroke="url(#paint6_linear_1208_1790)" stroke-width="1.68509"/>
+    <circle cx="166.262" cy="59.4166" r="20.2211" fill="#3A3941"/>
+    <rect x="195.47" y="39.1954" width="117.956" height="15.7275" rx="4.49358" fill="#413F4A"/>
+    <rect x="195.47" y="63.9101" width="70.7738" height="15.7275" rx="4.49358" fill="#525059"/>
+    <rect x="70.4929" y="120.922" width="240.968" height="74.7057" rx="8.1446" fill="#2C2A30"/>
+    <rect x="70.4929" y="120.922" width="240.968" height="74.7057" rx="8.1446" stroke="url(#paint7_linear_1208_1790)" stroke-width="1.68509"/>
+    <circle cx="107.846" cy="158.275" r="20.2211" fill="#3A3941"/>
+    <rect x="137.054" y="138.054" width="117.956" height="15.7275" rx="4.49358" fill="#413F4A"/>
+    <rect x="137.054" y="162.769" width="70.7738" height="15.7275" rx="4.49358" fill="#525059"/>
+    <rect x="113.182" y="219.781" width="240.968" height="74.7057" rx="8.1446" fill="#2C2A30"/>
+    <rect x="113.182" y="219.781" width="240.968" height="74.7057" rx="8.1446" stroke="url(#paint8_linear_1208_1790)" stroke-width="1.68509"/>
+    <circle cx="150.535" cy="257.134" r="20.2211" fill="#3A3941"/>
+    <rect x="179.743" y="236.913" width="117.956" height="15.7275" rx="4.49358" fill="#413F4A"/>
+    <rect x="179.743" y="261.628" width="70.7738" height="15.7275" rx="4.49358" fill="#525059"/>
+    <defs>
+        <linearGradient id="paint0_linear_1208_1790" x1="3.42635" y1="117.772" x2="27.0147" y2="135.447" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#302D36"/>
+            <stop offset="1" stop-color="#2C2A30"/>
+        </linearGradient>
+        <linearGradient id="paint1_linear_1208_1790" x1="73.0206" y1="158.837" x2="162.33" y2="221.185" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#302D36"/>
+            <stop offset="1" stop-color="#2C2A30"/>
+        </linearGradient>
+        <linearGradient id="paint2_linear_1208_1790" x1="98.8586" y1="43.0805" x2="152.36" y2="83.8259" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#302D36"/>
+            <stop offset="1" stop-color="#2C2A30"/>
+        </linearGradient>
+        <linearGradient id="paint3_linear_1208_1790" x1="240.406" y1="228.487" x2="329.716" y2="290.836" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#302D36"/>
+            <stop offset="1" stop-color="#2C2A30"/>
+        </linearGradient>
+        <linearGradient id="paint4_linear_1208_1790" x1="282.028" y1="12.1731" x2="305.616" y2="29.8477" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#302D36"/>
+            <stop offset="1" stop-color="#2C2A30"/>
+        </linearGradient>
+        <linearGradient id="paint5_linear_1208_1790" x1="369.597" y1="59.9314" x2="423.098" y2="100.677" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#302D36"/>
+            <stop offset="1" stop-color="#2C2A30"/>
+        </linearGradient>
+        <linearGradient id="paint6_linear_1208_1790" x1="128.067" y1="66.7186" x2="376.337" y2="66.7186" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#3D4044"/>
+            <stop offset="1" stop-color="#403E4B"/>
+        </linearGradient>
+        <linearGradient id="paint7_linear_1208_1790" x1="69.6503" y1="165.577" x2="317.92" y2="165.577" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#3D4044"/>
+            <stop offset="1" stop-color="#403E4B"/>
+        </linearGradient>
+        <linearGradient id="paint8_linear_1208_1790" x1="112.339" y1="264.436" x2="360.609" y2="264.436" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#3D4044"/>
+            <stop offset="1" stop-color="#403E4B"/>
+        </linearGradient>
+    </defs>
+</svg>
diff --git a/apps/shinkai-tray/src/components/chat/message.tsx b/apps/shinkai-tray/src/components/chat/message.tsx
index 9d398b419..5cd0de2aa 100644
--- a/apps/shinkai-tray/src/components/chat/message.tsx
+++ b/apps/shinkai-tray/src/components/chat/message.tsx
@@ -6,14 +6,11 @@ import {
   AvatarFallback,
   AvatarImage,
   CopyToClipboardIcon,
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
 } from '@shinkai_network/shinkai-ui';
 import MarkdownPreview from '@uiw/react-markdown-preview';
 
 import { cn } from '../../lib/utils';
+import { FileList } from '../../pages/create-job';
 
 export const getMessageFilesInbox = (
   message: ShinkaiMessage,
@@ -42,63 +39,65 @@ export const getMessageFilesInbox = (
   return undefined;
 };
 
-const Message = ({
-  message,
-  inboxId,
-}: {
-  message: ChatConversationMessage;
-  inboxId: string;
-}) => {
+const Message = ({ message }: { message: ChatConversationMessage }) => {
   return (
     <div
       className={cn(
         'flex w-[95%] items-start gap-3',
         message.isLocal
-          ? 'ml-0 mr-auto flex-row'
-          : 'ml-auto mr-0 flex-row-reverse',
+          ? 'ml-auto mr-0 flex-row-reverse space-x-reverse'
+          : 'ml-0 mr-auto flex-row items-end',
       )}
       key={message.scheduledTime}
     >
-      <Avatar className="mt-1 h-8 w-8">
-        <AvatarImage
-          alt={message.isLocal ? inboxId : 'Shinkai AI'}
-          src={
-            message.isLocal
-              ? `https://ui-avatars.com/api/?name=${inboxId}&background=0b1115&color=c7c7c7`
-              : `https://ui-avatars.com/api/?name=S&background=FF5E5F&color=fff`
-          }
-        />
+      <Avatar className="h-8 w-8">
+        {message.isLocal ? (
+          <AvatarImage alt={''} src={message.sender.avatar} />
+        ) : (
+          <svg
+            className="h-8 w-8 shrink-0"
+            fill="none"
+            height="32"
+            viewBox="0 0 32 32"
+            width="32"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <circle cx="16.3099" cy="16.8099" fill="white" r="11.9606" />
+            <path
+              clipRule="evenodd"
+              d="M31.4203 16.2868C31.4203 24.9633 24.3866 31.997 15.7102 31.997C7.03368 31.997 0 24.9633 0 16.2868C0 7.61034 7.03368 0.57666 15.7102 0.57666C24.3866 0.57666 31.4203 7.61034 31.4203 16.2868ZM25.3145 13.8076C25.9613 14.322 26.5167 14.9398 26.9589 15.6349C27.1245 15.8953 27.0202 16.2353 26.748 16.3809L24.7347 17.4582C24.4626 17.6038 24.1269 17.4983 23.945 17.2489C23.797 17.0459 23.6301 16.8569 23.4466 16.6847C23.4464 16.6846 23.4462 16.6846 23.4461 16.6848L23.4459 16.6849L23.4456 16.6848C23.0451 16.3091 22.5721 16.0192 22.0555 15.833C21.9487 15.7945 21.8405 15.7606 21.7312 15.7314C21.3075 15.6179 21.0229 16.0868 21.1872 16.4935C21.3364 16.8627 21.4505 17.2469 21.527 17.6412C21.7452 18.7659 21.6492 19.9289 21.2495 21.0026C20.8498 22.0763 20.1619 23.019 19.2614 23.7273C18.5077 24.32 17.6294 24.7293 16.6961 24.9264C16.3942 24.9901 16.1153 24.7687 16.0789 24.4622L15.8064 22.1727C15.77 21.8663 15.9919 21.5935 16.2852 21.4972C16.5951 21.3954 16.8864 21.2399 17.1451 21.0364C17.551 20.7172 17.8611 20.2923 18.0412 19.8083C18.2214 19.3244 18.2646 18.8001 18.1663 18.2932C18.0777 17.8364 17.8771 17.4096 17.5837 17.0505C17.5631 17.0254 17.5399 17.0025 17.5149 16.9817L15.4076 15.2288C15.1704 15.0314 15.1365 14.6774 15.3512 14.4556C15.9241 13.8637 16.5925 13.3702 17.3295 12.9965C17.6236 12.8473 17.9266 12.7183 18.2364 12.6099C18.6872 12.4522 19.1533 12.3379 19.6285 12.2692C20.6311 12.1245 21.6527 12.1863 22.6305 12.4508C23.6083 12.7154 24.5217 13.1771 25.3145 13.8076ZM5.73919 18.777L5.73921 18.7774L5.73923 18.7777C6.49342 19.4538 7.3779 19.9686 8.33833 20.2904C9.03893 20.5251 9.76914 20.6535 10.5047 20.6727C10.9798 20.6852 11.4562 20.652 11.9274 20.573C12.9263 20.4056 13.8805 20.0357 14.7313 19.4859L14.7313 19.4856L14.7314 19.4853C15.2532 19.1481 15.7306 18.7467 16.1526 18.2905C16.3621 18.0639 16.3203 17.7108 16.0786 17.5188L13.9349 15.8163C13.9097 15.7962 13.8861 15.7741 13.8651 15.7496C13.5622 15.3967 13.3511 14.9734 13.2519 14.5175C13.1421 14.0129 13.1735 13.4878 13.3426 12.9999C13.5117 12.512 13.8121 12.0802 14.2106 11.7519C14.4647 11.5426 14.7523 11.3805 15.0599 11.2717C15.3509 11.1688 15.5666 10.8911 15.5232 10.5855L15.199 8.30275C15.1556 7.99717 14.8718 7.78213 14.5713 7.85273C13.6427 8.0709 12.774 8.49998 12.0339 9.10966C11.1497 9.83812 10.4834 10.7962 10.1081 11.8787C9.73285 12.9611 9.66322 14.1261 9.90686 15.2455C10.0534 15.9187 10.3098 16.5598 10.663 17.1442C10.6974 17.2011 10.6574 17.2745 10.5909 17.2727C10.3033 17.265 10.0165 17.2264 9.73563 17.1572C9.20233 17.0258 8.70154 16.7868 8.26403 16.4547C7.97532 16.2356 7.71818 15.9791 7.49908 15.6925C7.31162 15.4473 6.97362 15.3494 6.70485 15.5012L4.71647 16.6238C4.4477 16.7755 4.35111 17.1178 4.52262 17.3744C4.86793 17.891 5.27666 18.3622 5.73919 18.777Z"
+              fill="#FE6162"
+              fillRule="evenodd"
+            />
+          </svg>
+        )}
         <AvatarFallback className="h-8 w-8" />
       </Avatar>
       <div
         className={cn(
-          'group flex items-start gap-1 overflow-x-hidden break-words rounded-lg bg-transparent px-2.5 py-3',
+          'group relative mt-1 flex flex-col overflow-hidden rounded-lg bg-transparent px-2.5 py-3 text-sm text-white',
           message.isLocal
-            ? 'rounded-tl-none border border-slate-800'
-            : 'rounded-tr-none border-none bg-[rgba(217,217,217,0.04)]',
+            ? 'rounded-tr-none bg-gray-300'
+            : 'rounded-bl-none border-none bg-gray-200',
         )}
       >
         <MarkdownPreview
           className="!text-foreground !bg-transparent !text-sm"
-          source={`${
-            message.fileInbox?.files?.length
-              ? `<svg xmlns="http://www.w3.org/2000/svg" className="mb-2" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-text"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/><polyline points="14 2 14 8 20 8"/><line x1="16" x2="8" y1="13" y2="13"/><line x1="16" x2="8" y1="17" y2="17"/><line x1="10" x2="8" y1="9" y2="9"/></svg>`
-              : ''
-          } ${message.content}`}
+          source={message.content}
           wrapperElement={{ 'data-color-mode': 'dark' }}
         />
+
         {message.isLocal ? null : (
-          <TooltipProvider>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <CopyToClipboardIcon
-                  className="duration-30 -mr-1 -mt-1 opacity-0 group-hover:opacity-100 group-hover:transition-opacity"
-                  string={message.content}
-                />
-              </TooltipTrigger>
-              <TooltipContent>Copy</TooltipContent>
-            </Tooltip>
-          </TooltipProvider>
+          <CopyToClipboardIcon
+            className="duration-30 absolute right-2 top-2 bg-gray-300 opacity-0 group-hover:opacity-100 group-hover:transition-opacity"
+            string={message.content}
+          />
+        )}
+        {!!message.fileInbox?.files?.length && (
+          <FileList
+            className="mt-3 max-w-[280px]"
+            files={message.fileInbox?.files}
+          />
         )}
       </div>
     </div>
diff --git a/apps/shinkai-tray/src/globals.css b/apps/shinkai-tray/src/globals.css
index 82a951a8f..557a71862 100644
--- a/apps/shinkai-tray/src/globals.css
+++ b/apps/shinkai-tray/src/globals.css
@@ -37,10 +37,10 @@ body,
 }
 .tiptap p.is-editor-empty:first-child::before {
   content: attr(data-placeholder);
-  @apply pointer-events-none float-left h-0 text-gray-500;
+  @apply pointer-events-none float-left h-0 text-gray-100;
 }
 .tiptap {
-  @apply min-h-[60px] max-w-full rounded-md border border-gray-500 bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-gray-500 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-gray-950 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-800 dark:placeholder:text-gray-400 dark:focus-visible:ring-gray-300;
+  @apply min-h-[60px] max-w-full rounded-md border border-gray-200 bg-gray-400 px-3 py-2 text-sm shadow-sm placeholder:text-gray-80 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-gray-950 disabled:cursor-not-allowed disabled:opacity-50;
 }
 .tiptap[contenteditable='false'] {
   @apply opacity-40;
diff --git a/apps/shinkai-tray/src/pages/chat/chat-conversation.tsx b/apps/shinkai-tray/src/pages/chat/chat-conversation.tsx
index ce7dd51b9..4b022c7b4 100644
--- a/apps/shinkai-tray/src/pages/chat/chat-conversation.tsx
+++ b/apps/shinkai-tray/src/pages/chat/chat-conversation.tsx
@@ -274,19 +274,20 @@ const ChatConversation = () => {
                       <div key={date}>
                         <div
                           className={cn(
-                            'relative z-10 m-auto flex w-[140px] items-center justify-center rounded-xl border border-slate-800 bg-[#131B23] transition-opacity',
+                            'relative z-10 m-auto flex h-[30px] w-[150px] items-center justify-center rounded-xl bg-gray-400',
                             true && 'sticky top-5',
                           )}
                         >
-                          <span className="text-foreground px-2.5 py-2 text-xs capitalize">
-                            {formatDate(new Date(date))}
+                          <span className="text-sm font-medium capitalize text-gray-100">
+                            {formatDate(
+                              new Date(messages[0].scheduledTime || ''),
+                            )}
                           </span>
                         </div>
                         <div className="flex flex-col gap-4">
                           {messages.map((message) => {
                             return (
                               <Message
-                                inboxId={inboxId}
                                 key={message.scheduledTime}
                                 message={message}
                               />
@@ -303,7 +304,7 @@ const ChatConversation = () => {
       </ScrollArea>
 
       <div className="flex flex-col justify-start">
-        <div className="bg-app-gradient relative flex items-start gap-2 p-2 pb-3">
+        <div className="relative flex items-start gap-2 p-2 pb-3">
           {isLoading ? (
             <DotsLoader className="absolute left-8 top-10 flex items-center justify-center" />
           ) : null}
@@ -312,7 +313,7 @@ const ChatConversation = () => {
             <div
               {...getRootFileProps({
                 className: cn(
-                  'dropzone group relative relative flex h-12 w-12 flex-shrink-0 cursor-pointer items-center justify-center rounded border-2 border-dashed border-slate-500 border-slate-500 transition-colors hover:border-white',
+                  'dropzone group relative flex h-12 w-12 flex-shrink-0 cursor-pointer items-center justify-center rounded border-2 border-dashed border-slate-500 border-slate-500 transition-colors hover:border-white',
                   file && 'border-0',
                   isLoading && 'hidden',
                 ),
diff --git a/apps/shinkai-tray/src/pages/chat/layout.tsx b/apps/shinkai-tray/src/pages/chat/layout.tsx
index f62ce6a9d..19af0e3b9 100644
--- a/apps/shinkai-tray/src/pages/chat/layout.tsx
+++ b/apps/shinkai-tray/src/pages/chat/layout.tsx
@@ -11,11 +11,14 @@ import {
   Button,
   ChatBubbleIcon,
   Form,
+  FormControl,
   FormField,
+  FormItem,
+  FormLabel,
+  Input,
   JobBubbleIcon,
   ScrollArea,
   Separator,
-  TextField,
 } from '@shinkai_network/shinkai-ui';
 import { Query } from '@tanstack/react-query';
 import { Edit3 } from 'lucide-react';
@@ -47,13 +50,13 @@ const InboxNameInput = ({
   });
   const { inboxName: inboxNameValue } = updateInboxNameForm.watch();
   const { mutateAsync: updateInboxName } = useUpdateInboxName();
-  // const inputRef = useRef<HTMLInputElement>(null);
-  //
-  // useEffect(() => {
-  //   if (inputRef.current) {
-  //     inputRef.current?.focus();
-  //   }
-  // }, []);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current?.focus();
+    }
+  }, []);
   const onSubmit = async (data: z.infer<typeof updateInboxNameSchema>) => {
     if (!auth) return;
 
@@ -83,20 +86,22 @@ const InboxNameInput = ({
             control={updateInboxNameForm.control}
             name="inboxName"
             render={({ field }) => (
-              <div className=" flex h-[46px]  items-center rounded-lg">
+              <div className="flex h-[46px] items-center rounded-lg bg-gray-300">
                 <Edit3 className="absolute left-2 top-1/2 h-4 w-4 -translate-y-1/2 transform text-white" />
-                <TextField field={field} label="Update inbox name" />
-                {/*<FormItem className="space-y-0 pl-7 text-xs">*/}
-                {/*  <FormLabel className="sr-only">Update inbox name</FormLabel>*/}
-                {/*  <FormControl>*/}
-                {/*    <Input*/}
-                {/*      className="border-none pr-16 text-xs caret-white placeholder:text-gray-600 focus-visible:ring-0 focus-visible:ring-white"*/}
-                {/*      placeholder={inboxName}*/}
-                {/*      {...field}*/}
-                {/*      ref={inputRef}*/}
-                {/*    />*/}
-                {/*  </FormControl>*/}
-                {/*</FormItem>*/}
+
+                <FormItem className="space-y-0 pl-7 text-xs">
+                  <FormLabel className="sr-only static">
+                    Update inbox name
+                  </FormLabel>
+                  <FormControl>
+                    <Input
+                      className="h-full border-none bg-transparent py-2 pr-16 text-xs caret-white placeholder:text-gray-100 focus-visible:ring-0 focus-visible:ring-white"
+                      placeholder={inboxName}
+                      {...field}
+                      ref={inputRef}
+                    />
+                  </FormControl>
+                </FormItem>
               </div>
             )}
           />
@@ -173,8 +178,8 @@ const MessageButton = ({
   ) : (
     <Link
       className={cn(
-        'text-gray-80 group flex h-[46px] w-full items-center gap-2 rounded-lg px-2 py-2 hover:bg-gray-500',
-        match && 'bg-gray-400 text-white',
+        'text-gray-80 group flex h-[46px] w-full items-center gap-2 rounded-lg px-2 py-2 hover:bg-gray-300',
+        match && 'bg-gray-300 text-white',
       )}
       key={inboxId}
       to={to}
@@ -188,12 +193,15 @@ const MessageButton = ({
         {inboxName}
       </span>
       <Button
-        className={cn('hidden justify-self-end', match && 'flex')}
+        className={cn(
+          'hidden justify-self-end bg-transparent',
+          match && 'flex',
+        )}
         onClick={() => setIsEditable(true)}
         size="icon"
         variant="ghost"
       >
-        <Edit3 className="text-gray-80 h-4 w-4" />
+        <Edit3 className="h-4 w-4 text-gray-100" />
       </Button>
     </Link>
   );
diff --git a/apps/shinkai-tray/src/pages/create-job.tsx b/apps/shinkai-tray/src/pages/create-job.tsx
index 050e6b745..0314066f9 100644
--- a/apps/shinkai-tray/src/pages/create-job.tsx
+++ b/apps/shinkai-tray/src/pages/create-job.tsx
@@ -10,6 +10,7 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
+  PaperClipIcon,
   Select,
   SelectContent,
   SelectItem,
@@ -17,14 +18,14 @@ import {
   SelectValue,
   Textarea,
 } from '@shinkai_network/shinkai-ui';
-import { FileCheck2, ImagePlusIcon, PlusIcon, X } from 'lucide-react';
+import { cn } from '@shinkai_network/shinkai-ui/utils';
+import { ImagePlusIcon, PlusIcon, X } from 'lucide-react';
 import { useEffect } from 'react';
-import { useDropzone } from 'react-dropzone';
+import { Accept, useDropzone } from 'react-dropzone';
 import { useForm } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
 import { z } from 'zod';
 
-import { cn } from '../lib/utils';
 import { ADD_AGENT_PATH } from '../routes/name';
 import { useAuth } from '../store/auth';
 import SimpleLayout from './layout/simple-layout';
@@ -32,109 +33,71 @@ import SimpleLayout from './layout/simple-layout';
 const createJobSchema = z.object({
   model: z.string(),
   description: z.string(),
-  files: z.array(z.any()),
+  files: z.array(z.any()).optional(),
 });
 
+export const FileList = ({
+  files,
+  className,
+}: {
+  files: ({ name: string; size?: number } | File)[];
+  className?: string;
+}) => {
+  if (!files) return null;
+  return (
+    <div className={cn('flex w-full flex-col', className)}>
+      {files?.map((file, idx) => (
+        <div
+          className="relative flex items-center gap-2 rounded-lg border border-gray-200 px-4 py-3"
+          key={idx}
+        >
+          <PaperClipIcon className="text-gray-100" />
+          <span className="text-gray-80 flex-1 truncate text-sm">
+            {file.name}
+          </span>
+        </div>
+      ))}
+    </div>
+  );
+};
+
 const FileInput = ({
   value,
   onChange,
+  maxFiles,
+  accept,
 }: {
   value: File[];
   onChange: (files: File[]) => void;
+  maxFiles?: number;
+  accept?: Accept;
 }) => {
-  const {
-    getRootProps: getRootFileProps,
-    getInputProps: getInputFileProps,
-    acceptedFiles,
-  } = useDropzone({
-    multiple: true,
-    maxFiles: 5,
-
-    // accept: {
-    //   "image/png": [".png"],
-    //   "text/html": [".html", ".htm"],
-    //   "application/pdf": [".pdf"],
-    // },
-    onDrop: (acceptedFiles) => {
-      onChange(acceptedFiles);
-      // if (isImageOrPdf(file)) {
-      //   const reader = new FileReader();
-      //   reader.addEventListener('abort', () =>
-      //     console.log('file reading was aborted'),
-      //   );
-      //   reader.addEventListener(
-      //     'load',
-      //     (event: ProgressEvent<FileReader>) => {
-      //       const binaryUrl = event.target?.result;
-      //       const image = new Image();
-      //       image.addEventListener('load', function () {
-      //         const imageInfo = Object.assign(file, {
-      //           preview: URL.createObjectURL(file),
-      //         });
-      //         createJobForm.setValue('file', imageInfo, {
-      //           shouldValidate: true,
-      //         });
-      //       });
-      //       image.src = binaryUrl as string;
-      //     },
-      //   );
-      //   reader.readAsDataURL(file);
-      // } else {
-      //   createJobForm.setValue('file', file, { shouldValidate: true });
-      // }
-    },
-  });
-
-  const removeFile = (file: File) => () => {
-    console.log('qweqweqweqw');
-    // const newFiles = [...value];
-    // console.log(newFiles, 'newFiles');
-    // newFiles.splice(newFiles.indexOf(file), 1);
-    // console.log(newFiles, 'newFiles2');
-    // onChange(newFiles);
-    // setValue("presentation-screens", newFiles);
-  };
+  const { getRootProps: getRootFileProps, getInputProps: getInputFileProps } =
+    useDropzone({
+      multiple: true,
+      maxFiles: maxFiles ?? 5,
+      accept,
+      onDrop: (acceptedFiles) => {
+        onChange(acceptedFiles);
+      },
+    });
 
   return (
     <>
       <div className="flex gap-5">
         <div
           {...getRootFileProps({
-            className: cn(
-              'dropzone group relative relative mt-3 flex h-[6.375rem] w-[9.5rem] cursor-pointer items-center justify-center overflow-hidden rounded-lg border-2 border-dashed border-slate-500 border-slate-500 transition-colors hover:border-white',
-              // file && 'border border-solid border-slate-500',
-            ),
+            className:
+              'dropzone group relative mt-3 flex h-[6.375rem] w-[9.5rem] cursor-pointer items-center justify-center overflow-hidden rounded-lg border-2 border-dashed border-gray-100 transition-colors hover:border-white',
           })}
         >
           <div className="flex flex-col items-center gap-2 p-4 text-xs">
-            <ImagePlusIcon className="stroke-slate-500 transition-colors group-hover:stroke-white" />
-            <span className="text-center  font-semibold text-slate-400">
+            <ImagePlusIcon className="stroke-gray-100 transition-colors group-hover:stroke-white" />
+            <span className="text-center font-semibold text-gray-100">
               Drag & drop your documents here
             </span>
-            {/* <span className="text-foreground">Click here to Upload</span> */}
           </div>
-          {/*{...createJobForm.register('file')}*/}
           <input {...getInputFileProps({})} />
-          {/*{file && (*/}
-          {/*  <>*/}
-          {/*    {isImageOrPdf(file) && (*/}
-          {/*      <img*/}
-          {/*        alt=""*/}
-          {/*        className="absolute inset-0 h-full w-full rounded-lg bg-white object-cover"*/}
-          {/*        src={file.preview}*/}
-          {/*      />*/}
-          {/*    )}*/}
-          {/*    {!isImageOrPdf(file) && (*/}
-          {/*      <div className="flex flex-col items-center gap-2">*/}
-          {/*        <FileCheck2 className="text-gray-80 h-6 w-6 " />*/}
-          {/*        <span className="line-clamp-3 break-all px-2 text-center text-xs ">*/}
-          {/*          {file?.name}*/}
-          {/*        </span>*/}
-          {/*      </div>*/}
-          {/*    )}*/}
-          {/*  </>*/}
-          {/*)}*/}
-          {/*{file != null && (*/}
         </div>
         <span className="text-gray-80 pt-4 text-xs font-bold">
           Supported formats
@@ -173,26 +136,32 @@ const FileInput = ({
           </p>
         </span>
       </div>
-      <div className="flex flex-col gap-6 pt-8">
-        {acceptedFiles?.map((file, idx) => (
-          <div className="relative flex" key={idx}>
-            <span>
-              {file.path} - {file.type} bytes
-            </span>
-            <button
-              className="absolute right-1 top-1 h-6 w-6 cursor-pointer rounded-full bg-gray-400 p-1 transition-colors hover:bg-gray-300"
-              onClick={() => {
-                const newFiles = [...value];
-                newFiles.splice(newFiles.indexOf(file), 1);
-                onChange(newFiles);
-              }}
-              type={'button'}
+      {!!value?.length && (
+        <div className="flex flex-col gap-2 pt-8">
+          {value?.map((file, idx) => (
+            <div
+              className="relative flex items-center gap-2 rounded-lg border border-gray-200 px-4 py-3"
+              key={idx}
             >
-              <X className="h-full w-full text-gray-100" />
-            </button>
-          </div>
-        ))}
-      </div>
+              <PaperClipIcon className="text-gray-100" />
+              <span className="text-gray-80 flex-1 truncate text-sm">
+                {file.name}
+              </span>
+              <button
+                className="h-6 w-6 cursor-pointer rounded-full bg-gray-400 p-1 transition-colors hover:bg-gray-300"
+                onClick={() => {
+                  const newFiles = [...value];
+                  newFiles.splice(newFiles.indexOf(file), 1);
+                  onChange(newFiles);
+                }}
+                type={'button'}
+              >
+                <X className="h-full w-full text-gray-100" />
+              </button>
+            </div>
+          ))}
+        </div>
+      )}
     </>
   );
 };
@@ -335,15 +304,11 @@ const CreateJobPage = () => {
               name="files"
               render={({ field }) => (
                 <FormItem className="mt-3">
-                  {/*<FormLabel className="sr-only">*/}
-                  {/*  Upload a file (optional)*/}
-                  {/*</FormLabel>*/}
+                  <FormLabel className="sr-only">
+                    Upload a file (optional)
+                  </FormLabel>
                   <FormControl>
-                    <FileInput
-                      // multiple
-                      onChange={field.onChange}
-                      value={field.value}
-                    />
+                    <FileInput onChange={field.onChange} value={field.value} />
                   </FormControl>
                   <FormMessage />
                 </FormItem>
diff --git a/apps/shinkai-tray/src/pages/layout/main-layout.tsx b/apps/shinkai-tray/src/pages/layout/main-layout.tsx
index 4f11aebcb..e8eb70f69 100644
--- a/apps/shinkai-tray/src/pages/layout/main-layout.tsx
+++ b/apps/shinkai-tray/src/pages/layout/main-layout.tsx
@@ -127,16 +127,16 @@ export function Footer() {
   };
 
   return (
-    <div className="text-gray-80 absolute bottom-2 left-2 text-sm">
+    <div className="absolute bottom-2 left-2 text-sm text-white">
       <Popover modal onOpenChange={setOpen} open={open}>
         <PopoverTrigger
           aria-expanded={open}
-          className="rounded-lg bg-gray-400 px-2.5 py-2 shadow-lg transition-colors duration-150 hover:bg-gray-500/40"
+          className="rounded-lg bg-gray-300 px-2.5 py-2 shadow-lg transition-colors duration-150 hover:bg-gray-300/40"
           onClick={() => setOpen(true)}
         >
-          <span className="text-xs">
+          <span className="text-xs text-white">
             Actions
-            <kbd className="pointer-events-none ml-2 inline-flex h-5 select-none items-center gap-1 rounded border bg-gray-500 px-1.5 font-mono text-[10px] font-medium text-gray-100 opacity-100">
+            <kbd className="text-gray-80 pointer-events-none ml-2 inline-flex h-5 select-none items-center gap-1 rounded border bg-gray-300 px-1.5 font-mono text-[10px] font-medium opacity-100">
               <span className="text-xs">⌘</span>K
             </kbd>
           </span>
@@ -150,7 +150,7 @@ export function Footer() {
           sideOffset={2}
         >
           <Command
-            className="p-0 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-gray-500 dark:[&_[cmdk-group-heading]]:text-gray-400 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-3 [&_[cmdk-item]_svg]:w-3"
+            className="p-0 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-gray-500 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-3 [&_[cmdk-item]_svg]:w-3"
             onKeyDown={handleCommandCardKeyDown}
           >
             <CommandList className="p-0 pt-2">
diff --git a/apps/shinkai-tray/src/pages/layout/onboarding-layout.tsx b/apps/shinkai-tray/src/pages/layout/onboarding-layout.tsx
index 374c2d6ad..c86532efc 100644
--- a/apps/shinkai-tray/src/pages/layout/onboarding-layout.tsx
+++ b/apps/shinkai-tray/src/pages/layout/onboarding-layout.tsx
@@ -2,16 +2,16 @@ import React from 'react';
 
 const OnboardingLayout = ({ children }: { children: React.ReactNode }) => {
   return (
-    <div className="mx-auto flex h-full">
-      <div className="bg-app-gradient grid flex-1 place-items-center">
+    <div className="mx-auto grid h-full grid-cols-2">
+      <div className="grid place-items-center bg-gray-500 px-8">
         <img
           alt="shinkai logo"
           className="w-full"
           data-cy="shinkai-logo"
-          src={'/welcome.jpg'}
+          src={'/onboarding.svg'}
         />
       </div>
-      <div className="flex flex-1 flex-col justify-between">
+      <div className="flex flex-col justify-between">
         <img
           alt="shinkai logo"
           className="w-30 mx-auto py-10"
diff --git a/apps/shinkai-tray/src/pages/onboarding.tsx b/apps/shinkai-tray/src/pages/onboarding.tsx
index 3f34e83b4..74601c0fd 100644
--- a/apps/shinkai-tray/src/pages/onboarding.tsx
+++ b/apps/shinkai-tray/src/pages/onboarding.tsx
@@ -221,7 +221,9 @@ const OnboardingPage = () => {
         <ConnectionOptionButton
           description={'Use the QR code to connect'}
           icon={<QrCode className="text-gray-100" />}
-          onClick={() => {}}
+          onClick={() => {
+            navigate('/');
+          }}
           title={'QR Code'}
         />
 
@@ -232,7 +234,9 @@ const OnboardingPage = () => {
               🔑
             </span>
           }
-          onClick={() => {}}
+          onClick={() => {
+            navigate('/restore');
+          }}
           title={'Restore'}
         />
       </div>
diff --git a/apps/shinkai-tray/src/pages/restore-connection.tsx b/apps/shinkai-tray/src/pages/restore-connection.tsx
new file mode 100644
index 000000000..b6742b811
--- /dev/null
+++ b/apps/shinkai-tray/src/pages/restore-connection.tsx
@@ -0,0 +1,193 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import { decryptMessageWithPassphrase } from '@shinkai_network/shinkai-message-ts/cryptography/shinkai-encryption';
+import {
+  Button,
+  ErrorMessage,
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  TextField,
+} from '@shinkai_network/shinkai-ui';
+import { Trash, Upload } from 'lucide-react';
+import React, { useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { useNavigate } from 'react-router-dom';
+import { z } from 'zod';
+
+import { useAuth } from '../store/auth';
+import OnboardingLayout from './layout/onboarding-layout';
+
+const formSchema = z.object({
+  encryptedConnection: z.string().min(1),
+  passphrase: z.string().min(8),
+});
+
+const RestoreConnectionPage = () => {
+  const setAuth = useAuth((state) => state.setAuth);
+  const navigate = useNavigate();
+  const [error, setError] = useState<boolean>(false);
+  const [encryptedConnectionFile, setEncryptedConnectionFile] =
+    useState<File | null>(null);
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      encryptedConnection: '',
+      passphrase: '',
+    },
+  });
+
+  const restore = async (values: z.infer<typeof formSchema>) => {
+    try {
+      const decryptedValue = await decryptMessageWithPassphrase(
+        values.encryptedConnection,
+        values.passphrase,
+      );
+      if (decryptedValue) {
+        const decryptedSetupData = JSON.parse(decryptedValue);
+        setAuth(decryptedSetupData);
+        // TODO: Add logic to test if setup data is valid to create an authenticated connection with Shinkai Node
+        navigate('/');
+      }
+    } catch (_) {
+      setError(true);
+    }
+  };
+
+  const onConnectionFileSelected: React.ChangeEventHandler<
+    HTMLInputElement
+  > = async (event): Promise<void> => {
+    if (!event.target.files || !event.target.files[0]) {
+      return;
+    }
+    const file = event.target.files[0];
+    const reader = new FileReader();
+    reader.readAsText(file, 'UTF-8');
+    reader.onload = (event) => {
+      if (event?.target?.readyState !== event?.target?.DONE) {
+        return;
+      }
+      const encryptedConnection = event?.target?.result as string;
+      if (!encryptedConnection.startsWith('encrypted:')) {
+        return;
+      }
+      setEncryptedConnectionFile(file);
+      form.setValue('encryptedConnection', encryptedConnection);
+    };
+  };
+  const removeConnectionFile = () => {
+    form.setValue('encryptedConnection', '');
+    setEncryptedConnectionFile(null);
+  };
+
+  return (
+    <OnboardingLayout>
+      <div className="flex h-full flex-col space-y-3">
+        <h1 className="mb-4 text-left text-2xl font-semibold">
+          Restore connection 🔑
+        </h1>
+        <p>Use a connection file and passphrase</p>
+
+        <Form {...form}>
+          <form
+            className="flex h-full flex-col justify-between space-y-2"
+            onSubmit={form.handleSubmit(restore)}
+          >
+            <div className="flex grow flex-col space-y-3">
+              <FormField
+                control={form.control}
+                disabled={true}
+                name="encryptedConnection"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel className="sr-only">
+                      Encryption Connection
+                    </FormLabel>
+                    <FormControl>
+                      <div className="flex flex-col space-y-1">
+                        <div className="flex items-center justify-center">
+                          {encryptedConnectionFile ? (
+                            <div className="flex h-[100px] w-full flex-row items-center justify-center space-x-4 rounded-lg border border-dashed">
+                              <div className="flex flex-row items-center">
+                                <span className="text-gray-80 font-medium uppercase">
+                                  {encryptedConnectionFile.name}
+                                </span>
+                              </div>
+                              <Button
+                                className="h-6 w-6"
+                                onClick={() => removeConnectionFile()}
+                                size="icon"
+                                type="button"
+                                variant={'ghost'}
+                              >
+                                <Trash className="h-4 w-4" />
+                              </Button>
+                            </div>
+                          ) : (
+                            <label
+                              className="flex h-[100px] w-full cursor-pointer flex-col items-center justify-center rounded-lg border border-dashed border-gray-100 bg-gray-400"
+                              htmlFor="dropzone-file"
+                            >
+                              <div className="flex flex-col items-center justify-center space-y-1">
+                                <div>
+                                  <Upload className="h-4 w-4" />
+                                </div>
+                                <p className="text-sm text-white">
+                                  Click to upload or drag and drop
+                                </p>
+                                <p className="text-gray-80 text-xs">
+                                  Eg: shinkai.key
+                                </p>
+                              </div>
+                              <input
+                                accept=".key"
+                                alt="shinaki conection file input"
+                                className="hidden"
+                                id="dropzone-file"
+                                onChange={(event) =>
+                                  onConnectionFileSelected(event)
+                                }
+                                type="file"
+                              />
+                            </label>
+                          )}
+                        </div>
+                        {encryptedConnectionFile && (
+                          <div className="truncate rounded-lg bg-gray-400 px-2 py-2">
+                            {field.value}
+                          </div>
+                        )}
+                      </div>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="passphrase"
+                render={({ field }) => (
+                  <TextField
+                    field={field}
+                    label={'Passphrase'}
+                    type={'password'}
+                  />
+                )}
+              />
+              {error && <ErrorMessage message={'Invalid connection file'} />}
+            </div>
+
+            <Button className="w-full" type="submit">
+              Restore connection
+            </Button>
+          </form>
+        </Form>
+      </div>
+    </OnboardingLayout>
+  );
+};
+export default RestoreConnectionPage;
diff --git a/apps/shinkai-tray/src/pages/welcome.tsx b/apps/shinkai-tray/src/pages/welcome.tsx
index c9c0db820..0a24069bb 100644
--- a/apps/shinkai-tray/src/pages/welcome.tsx
+++ b/apps/shinkai-tray/src/pages/welcome.tsx
@@ -29,18 +29,18 @@ const WelcomePage = () => {
                 htmlFor="terms"
               >
                 <span className={'leading-4 tracking-wide'}>
-                  By continuing, you agree to our{' '}
+                  I agree to our{' '}
                   <a
-                    className={'text-blue-400 underline'}
+                    className={'text-white underline'}
                     href={'https://www.shinkai.com/terms-of-service'}
                     rel="noreferrer"
                     target={'_blank'}
                   >
-                    Terms of Service{' '}
-                  </a>
+                    Terms of Service
+                  </a>{' '}
                   and{' '}
                   <a
-                    className={'block text-blue-400 underline'}
+                    className={'text-white underline'}
                     href={'https://www.shinkai.com/privacy-policy'}
                     rel="noreferrer"
                     target={'_blank'}
diff --git a/apps/shinkai-tray/src/routes/index.tsx b/apps/shinkai-tray/src/routes/index.tsx
index ce2838986..ff0658d0a 100644
--- a/apps/shinkai-tray/src/routes/index.tsx
+++ b/apps/shinkai-tray/src/routes/index.tsx
@@ -11,6 +11,7 @@ import CreateJobPage from '../pages/create-job';
 import GenerateCodePage from '../pages/generate-code';
 import MainLayout from '../pages/layout/main-layout';
 import OnboardingPage from '../pages/onboarding';
+import RestoreConnectionPage from '../pages/restore-connection';
 import SettingsPage from '../pages/settings';
 import WelcomePage from '../pages/welcome';
 import { useAuth } from '../store/auth';
@@ -42,6 +43,7 @@ const AppRoutes = () => {
       <Route element={<MainLayout />}>
         <Route element={<WelcomePage />} path={'/welcome'} />
         <Route element={<OnboardingPage />} path={ONBOARDING_PATH} />
+        <Route element={<RestoreConnectionPage />} path={'/restore'} />
         <Route
           element={
             <ProtectedRoute>
diff --git a/apps/shinkai-visor/src/components/file-list/file-list.tsx b/apps/shinkai-visor/src/components/file-list/file-list.tsx
index 41786b8e6..d6c58dbe3 100644
--- a/apps/shinkai-visor/src/components/file-list/file-list.tsx
+++ b/apps/shinkai-visor/src/components/file-list/file-list.tsx
@@ -81,7 +81,7 @@ export const FileList = ({ files, actions, className }: FileListProps) => {
                 <div className="h-10 self-center">{getFilePreview(file)}</div>
               )}
               <div className="flex min-w-0 flex-1 flex-row items-center justify-between gap-2">
-                <PaperClipIcon className="h-4 w-4" />
+                <PaperClipIcon className="h-4 w-4 text-gray-100" />
 
                 <span className="text-gray-80 grow truncate font-medium">
                   {getFileName(decodeURIComponent(file.name))}
diff --git a/libs/shinkai-ui/src/assets/icons/index.tsx b/libs/shinkai-ui/src/assets/icons/index.tsx
index 5656f8536..88005d35f 100644
--- a/libs/shinkai-ui/src/assets/icons/index.tsx
+++ b/libs/shinkai-ui/src/assets/icons/index.tsx
@@ -70,7 +70,7 @@ export const PaperClipIcon = ({ className }: { className?: string }) => (
   >
     <path
       d="M13.1201 1.93542C11.8872 1.93542 10.6543 2.40335 9.71845 3.33923L1.92955 11.1281C1.84957 11.2049 1.78572 11.2969 1.74173 11.3987C1.69775 11.5004 1.67451 11.61 1.67338 11.7208C1.67226 11.8317 1.69326 11.9417 1.73517 12.0443C1.77708 12.147 1.83904 12.2402 1.91744 12.3186C1.99584 12.397 2.08909 12.459 2.19174 12.5009C2.29439 12.5428 2.40436 12.5638 2.51523 12.5627C2.6261 12.5616 2.73562 12.5383 2.8374 12.4943C2.93917 12.4503 3.03115 12.3865 3.10793 12.3065L10.8968 4.51762C12.1317 3.28273 14.1086 3.28273 15.3434 4.51762C16.5783 5.75251 16.5783 7.72934 15.3434 8.96423L7.83694 16.4707C7.23502 17.0727 6.2839 17.0727 5.68199 16.4707C5.08007 15.8688 5.08007 14.9177 5.68199 14.3158L11.6586 8.33923C11.7385 8.26245 11.8024 8.17047 11.8464 8.0687C11.8904 7.96692 11.9136 7.8574 11.9147 7.74653C11.9158 7.63566 11.8948 7.52568 11.8529 7.42304C11.811 7.32039 11.7491 7.22714 11.6707 7.14874C11.5923 7.07034 11.499 7.00837 11.3964 6.96646C11.2937 6.92455 11.1837 6.90355 11.0729 6.90468C10.962 6.90581 10.8525 6.92904 10.7507 6.97303C10.6489 7.01702 10.557 7.08087 10.4802 7.16085L4.5036 13.1374C3.26469 14.3763 3.26469 16.4102 4.5036 17.6491C5.74252 18.888 7.7764 18.888 9.01532 17.6491L16.5218 10.1426C18.3936 8.27084 18.3936 5.21101 16.5218 3.33923C15.5859 2.40335 14.3531 1.93542 13.1201 1.93542Z"
-      fill="white"
+      fill="currentColor"
     />
   </svg>
 );
diff --git a/libs/shinkai-ui/src/components/textfield.tsx b/libs/shinkai-ui/src/components/textfield.tsx
index 1d84632e1..f55453fc1 100644
--- a/libs/shinkai-ui/src/components/textfield.tsx
+++ b/libs/shinkai-ui/src/components/textfield.tsx
@@ -30,7 +30,8 @@ const TextField = ({
     value: any;
     disabled?: boolean;
     name: string;
-    ref: (instance: any) => void;
+    ref: React.ForwardedRef<HTMLInputElement>;
+    placeholder?: string;
   };
   label: React.ReactNode;
   helperMessage?: React.ReactNode;

From 6bec35b65876cec29844fe7d6473182c48ac4c3e Mon Sep 17 00:00:00 2001
From: paulclindo <paulclindo@gmail.com>
Date: Thu, 30 Nov 2023 23:42:40 -0500
Subject: [PATCH 6/9] feat: restore from connection file

---
 apps/shinkai-tray/src/pages/onboarding.tsx         | 2 +-
 apps/shinkai-tray/src/pages/restore-connection.tsx | 2 +-
 apps/shinkai-tray/src/pages/welcome.tsx            | 3 ++-
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/apps/shinkai-tray/src/pages/onboarding.tsx b/apps/shinkai-tray/src/pages/onboarding.tsx
index 74601c0fd..b2384ec37 100644
--- a/apps/shinkai-tray/src/pages/onboarding.tsx
+++ b/apps/shinkai-tray/src/pages/onboarding.tsx
@@ -189,7 +189,7 @@ const OnboardingPage = () => {
   return (
     <OnboardingLayout>
       <h1 className="mb-4 text-left text-2xl font-semibold">
-        Quick Connection ⚡
+        Quick Connection <span aria-hidden>⚡</span>
       </h1>
       <Form {...setupDataForm}>
         <form
diff --git a/apps/shinkai-tray/src/pages/restore-connection.tsx b/apps/shinkai-tray/src/pages/restore-connection.tsx
index b6742b811..ccd900d05 100644
--- a/apps/shinkai-tray/src/pages/restore-connection.tsx
+++ b/apps/shinkai-tray/src/pages/restore-connection.tsx
@@ -87,7 +87,7 @@ const RestoreConnectionPage = () => {
     <OnboardingLayout>
       <div className="flex h-full flex-col space-y-3">
         <h1 className="mb-4 text-left text-2xl font-semibold">
-          Restore connection 🔑
+          Restore connection <span aria-hidden>🔑</span>
         </h1>
         <p>Use a connection file and passphrase</p>
 
diff --git a/apps/shinkai-tray/src/pages/welcome.tsx b/apps/shinkai-tray/src/pages/welcome.tsx
index 0a24069bb..dfbdeb3bd 100644
--- a/apps/shinkai-tray/src/pages/welcome.tsx
+++ b/apps/shinkai-tray/src/pages/welcome.tsx
@@ -14,7 +14,8 @@ const WelcomePage = () => {
     <OnboardingLayout>
       <div className="flex h-full flex-col justify-between">
         <p className="text-4xl font-semibold leading-[1.5] tracking-wide">
-          Transform your macOS experience using AI with Shinkai Tray ✨
+          Transform your macOS experience using AI with Shinkai Tray{' '}
+          <span aria-hidden> 🔑</span>
         </p>
         <div className="">
           <div className="flex flex-col gap-10">

From 34372d779296e8e2076a582a6b070d6848647915 Mon Sep 17 00:00:00 2001
From: paulclindo <paulclindo@gmail.com>
Date: Thu, 30 Nov 2023 23:45:30 -0500
Subject: [PATCH 7/9] fix components

---
 apps/shinkai-tray/src/pages/create-chat.tsx | 12 ++----------
 1 file changed, 2 insertions(+), 10 deletions(-)

diff --git a/apps/shinkai-tray/src/pages/create-chat.tsx b/apps/shinkai-tray/src/pages/create-chat.tsx
index 74e7d88bc..017b64212 100644
--- a/apps/shinkai-tray/src/pages/create-chat.tsx
+++ b/apps/shinkai-tray/src/pages/create-chat.tsx
@@ -8,8 +8,8 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
-  Input,
   Textarea,
+  TextField,
 } from '@shinkai_network/shinkai-ui';
 import { useForm } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
@@ -67,15 +67,7 @@ const CreateChatPage = () => {
               control={createChatForm.control}
               name="receiver"
               render={({ field }) => (
-                <FormItem>
-                  <FormLabel>Shinkai Identity</FormLabel>
-                  <FormControl>
-                    <Input
-                      placeholder="Eg: @@name.shinkai or @@name.shinkai/profile"
-                      {...field}
-                    />
-                  </FormControl>
-                </FormItem>
+                <TextField field={field} label="Shinkai Identity" />
               )}
             />
             <FormField

From d4860f48f80515161413014e465de234fd50e48f Mon Sep 17 00:00:00 2001
From: paulclindo <paulclindo@gmail.com>
Date: Fri, 1 Dec 2023 19:00:48 -0500
Subject: [PATCH 8/9] refactor

---
 apps/shinkai-app/src/pages/Chat.tsx           | 12 +-----
 .../src/pages/chat/chat-conversation.tsx      |  7 +++-
 .../src/pages/layout/main-layout.tsx          |  2 +-
 .../src/components/inbox/inbox.tsx            | 37 +++++--------------
 .../src/components/inboxes/inboxes.tsx        |  4 +-
 apps/shinkai-visor/src/helpers/date.ts        | 17 ---------
 6 files changed, 19 insertions(+), 60 deletions(-)
 delete mode 100644 apps/shinkai-visor/src/helpers/date.ts

diff --git a/apps/shinkai-app/src/pages/Chat.tsx b/apps/shinkai-app/src/pages/Chat.tsx
index 5e0910119..823e389e8 100644
--- a/apps/shinkai-app/src/pages/Chat.tsx
+++ b/apps/shinkai-app/src/pages/Chat.tsx
@@ -18,6 +18,7 @@ import { useSendMessageToInbox } from '@shinkai_network/shinkai-node-state/lib/m
 import { useSendMessageWithFilesToInbox } from '@shinkai_network/shinkai-node-state/lib/mutations/sendMesssageWithFilesToInbox/useSendMessageWithFilesToInbox';
 import { ChatConversationMessage } from '@shinkai_network/shinkai-node-state/lib/queries/getChatConversation/types';
 import { useGetChatConversationWithPagination } from '@shinkai_network/shinkai-node-state/lib/queries/getChatConversation/useGetChatConversationWithPagination';
+import { groupMessagesByDate } from '@shinkai_network/shinkai-node-state/lib/utils/date';
 import MarkdownPreview from '@uiw/react-markdown-preview';
 import { cameraOutline } from 'ionicons/icons';
 import { send } from 'ionicons/icons';
@@ -135,17 +136,6 @@ const Chat: React.FC = () => {
     }
     chatForm.reset();
   };
-  const groupMessagesByDate = (messages: ChatConversationMessage[]) => {
-    const groupedMessages: Record<string, ChatConversationMessage[]> = {};
-    for (const message of messages) {
-      const date = new Date(message.scheduledTime ?? '').toDateString();
-      if (!groupedMessages[date]) {
-        groupedMessages[date] = [];
-      }
-      groupedMessages[date].push(message);
-    }
-    return groupedMessages;
-  };
 
   const handleKeyDown = (
     event: React.KeyboardEvent<HTMLIonTextareaElement>,
diff --git a/apps/shinkai-tray/src/pages/chat/chat-conversation.tsx b/apps/shinkai-tray/src/pages/chat/chat-conversation.tsx
index 4b022c7b4..b9e22f01b 100644
--- a/apps/shinkai-tray/src/pages/chat/chat-conversation.tsx
+++ b/apps/shinkai-tray/src/pages/chat/chat-conversation.tsx
@@ -9,6 +9,10 @@ import { useSendMessageToJob } from '@shinkai_network/shinkai-node-state/lib/mut
 import { useSendMessageToInbox } from '@shinkai_network/shinkai-node-state/lib/mutations/sendMesssageToInbox/useSendMessageToInbox';
 import { useSendMessageWithFilesToInbox } from '@shinkai_network/shinkai-node-state/lib/mutations/sendMesssageWithFilesToInbox/useSendMessageWithFilesToInbox';
 import { useGetChatConversationWithPagination } from '@shinkai_network/shinkai-node-state/lib/queries/getChatConversation/useGetChatConversationWithPagination';
+import {
+  getRelativeDateLabel,
+  groupMessagesByDate,
+} from '@shinkai_network/shinkai-node-state/lib/utils/date';
 import {
   Button,
   DotsLoader,
@@ -41,7 +45,6 @@ import { Markdown } from 'tiptap-markdown';
 import { z } from 'zod';
 
 import Message from '../../components/chat/message';
-import { formatDate, groupMessagesByDate } from '../../lib/chat-conversation';
 import { cn } from '../../lib/utils';
 import { useAuth } from '../../store/auth';
 import { isImageOrPdf } from '../create-job';
@@ -279,7 +282,7 @@ const ChatConversation = () => {
                           )}
                         >
                           <span className="text-sm font-medium capitalize text-gray-100">
-                            {formatDate(
+                            {getRelativeDateLabel(
                               new Date(messages[0].scheduledTime || ''),
                             )}
                           </span>
diff --git a/apps/shinkai-tray/src/pages/layout/main-layout.tsx b/apps/shinkai-tray/src/pages/layout/main-layout.tsx
index e8eb70f69..c39e289cf 100644
--- a/apps/shinkai-tray/src/pages/layout/main-layout.tsx
+++ b/apps/shinkai-tray/src/pages/layout/main-layout.tsx
@@ -131,7 +131,7 @@ export function Footer() {
       <Popover modal onOpenChange={setOpen} open={open}>
         <PopoverTrigger
           aria-expanded={open}
-          className="rounded-lg bg-gray-300 px-2.5 py-2 shadow-lg transition-colors duration-150 hover:bg-gray-300/40"
+          className="rounded-lg bg-gray-400 px-2.5 py-2 shadow-lg transition-colors duration-150 hover:bg-gray-300"
           onClick={() => setOpen(true)}
         >
           <span className="text-xs text-white">
diff --git a/apps/shinkai-visor/src/components/inbox/inbox.tsx b/apps/shinkai-visor/src/components/inbox/inbox.tsx
index f3a1e63b5..f457a48b5 100644
--- a/apps/shinkai-visor/src/components/inbox/inbox.tsx
+++ b/apps/shinkai-visor/src/components/inbox/inbox.tsx
@@ -5,8 +5,11 @@ import {
 } from '@shinkai_network/shinkai-message-ts/utils';
 import { useSendMessageToJob } from '@shinkai_network/shinkai-node-state/lib/mutations/sendMessageToJob/useSendMessageToJob';
 import { useSendMessageToInbox } from '@shinkai_network/shinkai-node-state/lib/mutations/sendMesssageToInbox/useSendMessageToInbox';
-import { ChatConversationMessage } from '@shinkai_network/shinkai-node-state/lib/queries/getChatConversation/types';
 import { useGetChatConversationWithPagination } from '@shinkai_network/shinkai-node-state/lib/queries/getChatConversation/useGetChatConversationWithPagination';
+import {
+  getRelativeDateLabel,
+  groupMessagesByDate,
+} from '@shinkai_network/shinkai-node-state/lib/utils/date';
 import {
   Alert,
   AlertDescription,
@@ -115,29 +118,7 @@ export const Inbox = () => {
       });
     }
   };
-  const groupMessagesByDate = (messages: ChatConversationMessage[]) => {
-    const groupedMessages: Record<string, ChatConversationMessage[]> = {};
-    for (const message of messages) {
-      const date = new Date(message.scheduledTime ?? '').toDateString();
-      if (!groupedMessages[date]) {
-        groupedMessages[date] = [];
-      }
-      groupedMessages[date].push(message);
-    }
-    return groupedMessages;
-  };
-  const dateToLabel = (date: Date): string => {
-    const today = new Date();
-    const yesterday = new Date();
-    yesterday.setDate(today.getDate() - 1);
-    if (date.toDateString() === today.toDateString()) {
-      return intl.formatMessage({ id: 'today' });
-    } else if (date.toDateString() === yesterday.toDateString()) {
-      return intl.formatMessage({ id: 'yesterday' });
-    } else {
-      return date.toDateString();
-    }
-  };
+
   useEffect(() => {
     const chatContainerElement = chatContainerRef.current;
     if (!chatContainerElement) return;
@@ -240,9 +221,11 @@ export const Inbox = () => {
                           )}
                         >
                           <span className="text-sm font-medium text-gray-100">
-                            {dateToLabel(
-                              new Date(messages[0].scheduledTime || ''),
-                            )}
+                            {intl.formatMessage({
+                              id: getRelativeDateLabel(
+                                new Date(messages[0].scheduledTime || ''),
+                              ),
+                            })}
                           </span>
                         </div>
                         <div className="flex flex-col gap-4">
diff --git a/apps/shinkai-visor/src/components/inboxes/inboxes.tsx b/apps/shinkai-visor/src/components/inboxes/inboxes.tsx
index 23e8e15df..037189787 100644
--- a/apps/shinkai-visor/src/components/inboxes/inboxes.tsx
+++ b/apps/shinkai-visor/src/components/inboxes/inboxes.tsx
@@ -5,6 +5,7 @@ import {
 } from '@shinkai_network/shinkai-message-ts/utils';
 import { useAgents } from '@shinkai_network/shinkai-node-state/lib/queries/getAgents/useGetAgents';
 import { useGetInboxes } from '@shinkai_network/shinkai-node-state/lib/queries/getInboxes/useGetInboxes';
+import { formatDateToMonthAndDay } from '@shinkai_network/shinkai-node-state/lib/utils/date';
 import {
   Button,
   ChatBubbleIcon,
@@ -14,15 +15,14 @@ import {
   DropdownMenuPortal,
   DropdownMenuTrigger,
   JobBubbleIcon,
+  ScrollArea,
 } from '@shinkai_network/shinkai-ui';
-import { ScrollArea } from '@shinkai_network/shinkai-ui';
 import { cn } from '@shinkai_network/shinkai-ui/utils';
 import { Plus } from 'lucide-react';
 import { Fragment, useRef, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
-import { formatDateToMonthAndDay } from '../../helpers/date';
 import { useAuth } from '../../store/auth/auth';
 import { EditInboxNameDialog } from '../edit-inbox-name-dialog/edit-inbox-name-dialog';
 import { EmptyAgents } from '../empty-agents/empty-agents';
diff --git a/apps/shinkai-visor/src/helpers/date.ts b/apps/shinkai-visor/src/helpers/date.ts
deleted file mode 100644
index 46c2f6ed9..000000000
--- a/apps/shinkai-visor/src/helpers/date.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-export const formatDateToMonthAndDay = (date: Date): string => {
-  const today = new Date();
-  if (
-    date.getDate() === today.getDate() &&
-    date.getMonth() === today.getMonth() &&
-    date.getFullYear() === today.getFullYear()
-  ) {
-    return date.toLocaleTimeString('en-US', {
-      hour: 'numeric',
-      minute: 'numeric',
-      hour12: true,
-    });
-  }
-  const month = date.getMonth() + 1;
-  const day = date.getDate();
-  return `${month}/${day}`;
-};

From e92bc06175d6db5bf632059a763713a967d26b6d Mon Sep 17 00:00:00 2001
From: paulclindo <paulclindo@gmail.com>
Date: Fri, 1 Dec 2023 19:00:51 -0500
Subject: [PATCH 9/9] refactor

---
 libs/shinkai-node-state/src/lib/utils/date.ts | 44 +++++++++++++++++++
 1 file changed, 44 insertions(+)
 create mode 100644 libs/shinkai-node-state/src/lib/utils/date.ts

diff --git a/libs/shinkai-node-state/src/lib/utils/date.ts b/libs/shinkai-node-state/src/lib/utils/date.ts
new file mode 100644
index 000000000..f0e84bb5f
--- /dev/null
+++ b/libs/shinkai-node-state/src/lib/utils/date.ts
@@ -0,0 +1,44 @@
+import { ChatConversationMessage } from '../queries/getChatConversation/types';
+
+export const getRelativeDateLabel = (date: Date): string => {
+  const today = new Date();
+  const yesterday = new Date();
+  yesterday.setDate(today.getDate() - 1);
+  if (date.toDateString() === today.toDateString()) {
+    return 'today';
+  } else if (date.toDateString() === yesterday.toDateString()) {
+    return 'yesterday';
+  } else {
+    return date.toDateString();
+  }
+};
+
+export const groupMessagesByDate = (messages: ChatConversationMessage[]) => {
+  const groupedMessages: Record<string, ChatConversationMessage[]> = {};
+  for (const message of messages) {
+    const date = new Date(message.scheduledTime ?? '').toDateString();
+    if (!groupedMessages[date]) {
+      groupedMessages[date] = [];
+    }
+    groupedMessages[date].push(message);
+  }
+  return groupedMessages;
+};
+
+export const formatDateToMonthAndDay = (date: Date): string => {
+  const today = new Date();
+  if (
+    date.getDate() === today.getDate() &&
+    date.getMonth() === today.getMonth() &&
+    date.getFullYear() === today.getFullYear()
+  ) {
+    return date.toLocaleTimeString('en-US', {
+      hour: 'numeric',
+      minute: 'numeric',
+      hour12: true,
+    });
+  }
+  const month = date.getMonth() + 1;
+  const day = date.getDate();
+  return `${month}/${day}`;
+};