Refactor: Shinkai UI lib

apps/shinkai-app/src/components/ui/Avatar.tsx

@@ -1,7 +1,5 @@
 import { IonAvatar } from '@ionic/react';
-
-import { cn } from '../../theme/lib/utils';
-
+import { cn } from '@shinkai_network/shinkai-ui/utils';
 export default function Avatar({
   url,
   className,
@@ -11,11 +9,11 @@ export default function Avatar({
 }) {
   return (
     <IonAvatar
-      className={cn('bg-white w-8 h-8 [--border-radius:7777px]', className)}
+      className={cn('h-8 w-8 bg-white [--border-radius:7777px]', className)}
     >
       <img
         alt=""
-        className="w-full h-full"
+        className="h-full w-full"
         src={url ?? 'https://ionicframework.com/docs/img/demos/avatar.svg'}
       />
     </IonAvatar>

apps/shinkai-app/src/components/ui/Button.tsx

@@ -1,11 +1,10 @@
 import './Button.css';
 
 import { IonButton } from '@ionic/react';
+import { cn } from '@shinkai_network/shinkai-ui/utils';
 import { Loader2 } from 'lucide-react';
 import React from 'react';
 
-import { cn } from '../../theme/lib/utils';
-
 export default function Button({
   onClick,
   disabled,
@@ -28,14 +27,14 @@ export default function Button({
       className={cn(
         'ion-button-custom w-full',
         'variant-' + variant,
-        className
+        className,
       )}
       disabled={disabled || isLoading}
       onClick={onClick}
       shape={'round'}
       type={type}
     >
-      {isLoading ? <Loader2 className="h-4 w-4 animate-spin mr-2" /> : null}
+      {isLoading ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : null}
       {children}
     </IonButton>
   );

apps/shinkai-app/src/components/ui/Input.tsx

@@ -3,11 +3,10 @@ import './Input.css';
 
 import { InputCustomEvent } from '@ionic/core/dist/types/components/input/input-interface';
 import { InputChangeEventDetail, IonInput } from '@ionic/react';
+import { cn } from '@shinkai_network/shinkai-ui/utils';
 import type { Ref } from 'react';
 import React from 'react';
 
-import { cn } from '../../theme/lib/utils';
-
 type InputProps = {
   onChange: (event: InputCustomEvent<InputChangeEventDetail>) => void;
   value: string;
@@ -18,7 +17,7 @@ type InputProps = {
 const Input = React.forwardRef(
   (
     { onChange, value, label, className }: InputProps,
-    ref: Ref<HTMLIonInputElement>
+    ref: Ref<HTMLIonInputElement>,
   ) => {
     return (
       <IonInput
@@ -34,7 +33,7 @@ const Input = React.forwardRef(
         value={value}
       />
     );
-  }
+  },
 );
 
 Input.displayName = 'Input';

apps/shinkai-app/src/pages/Chat.tsx

@@ -19,6 +19,7 @@ import { useSendMessageWithFilesToInbox } from '@shinkai_network/shinkai-node-st
 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 { cn } from '@shinkai_network/shinkai-ui/utils';
 import MarkdownPreview from '@uiw/react-markdown-preview';
 import { cameraOutline } from 'ionicons/icons';
 import { send } from 'ionicons/icons';
@@ -34,7 +35,6 @@ import {
   IonHeaderCustom,
 } from '../components/ui/Layout';
 import { useAuth } from '../store/auth';
-import { cn } from '../theme/lib/utils';
 import {
   extractReceiverShinkaiName,
   getOtherPersonIdentity,

apps/shinkai-app/src/pages/JobChat.tsx

@@ -25,6 +25,7 @@
 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 { cn } from '@shinkai_network/shinkai-ui/utils';
 import MarkdownPreview from '@uiw/react-markdown-preview';
 import { send } from 'ionicons/icons';
 import { cameraOutline } from 'ionicons/icons';
@@ -39,7 +40,6 @@
   IonHeaderCustom,
 } from '../components/ui/Layout';
 import { useAuth } from '../store/auth';
-import { cn } from '../theme/lib/utils';
 
 const groupMessagesByDate = (messages: ChatConversationMessage[]) => {
   const groupedMessages: Record<string, ChatConversationMessage[]> = {};
@@ -185,7 +185,7 @@
         profile_identity_sk: auth.profile_identity_sk,
       });
     }
   }, [
     inputMessage,
     auth.shinkai_identity,
     auth.profile,

apps/shinkai-desktop/src/components/chat/message.tsx

@@ -1,6 +1,6 @@
 import type { ShinkaiMessage } from '@shinkai_network/shinkai-message-ts/models';
 import { MessageSchemaType } from '@shinkai_network/shinkai-message-ts/models';
-import { extractErrorPropertyOrContent } from '@shinkai_network/shinkai-message-ts/utils/shinkai_message_handler';
+import { extractErrorPropertyOrContent } from '@shinkai_network/shinkai-message-ts/utils';
 import { ChatConversationMessage } from '@shinkai_network/shinkai-node-state/lib/queries/getChatConversation/types';
 import {
   Avatar,
@@ -9,9 +9,9 @@ import {
   CopyToClipboardIcon,
   MarkdownPreview,
 } from '@shinkai_network/shinkai-ui';
+import { cn } from '@shinkai_network/shinkai-ui/utils';
 
 import icon from '../../assets/icon.png';
-import { cn } from '../../lib/utils';
 import { FileList } from '../../pages/create-job';
 
 export const getMessageFilesInbox = (

apps/shinkai-desktop/src/components/subscriptions/public-shared-folders.tsx

@@ -10,7 +10,6 @@ import {
   Button,
   Input,
   ScrollArea,
-  SharedFolderIcon,
   Sheet,
   SheetContent,
   SheetDescription,
@@ -21,6 +20,7 @@ import {
   ToggleGroup,
   ToggleGroupItem,
 } from '@shinkai_network/shinkai-ui';
+import { SharedFolderIcon } from '@shinkai_network/shinkai-ui/assets';
 import { useInView } from 'framer-motion';
 import { Maximize2, Minimize2, SearchIcon, XIcon } from 'lucide-react';
 import { Tree, TreeExpandedKeysType } from 'primereact/tree';

apps/shinkai-desktop/src/components/vector-fs/components/all-files-tab.tsx

@@ -7,7 +7,6 @@ import {
 } from '@shinkai_network/shinkai-node-state/lib/queries/getVRPathSimplified/types';
 import { useGetVRPathSimplified } from '@shinkai_network/shinkai-node-state/lib/queries/getVRPathSimplified/useGetVRPathSimplified';
 import {
-  AddNewFolderIcon,
   Breadcrumb,
   BreadcrumbItem,
   BreadcrumbLink,
@@ -19,18 +18,21 @@ import {
   ContextMenuContent,
   ContextMenuItem,
   ContextMenuTrigger,
-  CreateAIIcon,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-  FileEmptyStateIcon,
-  FileTypeIcon,
-  GenerateDocIcon,
   Input,
   ScrollArea,
   Separator,
 } from '@shinkai_network/shinkai-ui';
+import {
+  AddNewFolderIcon,
+  CreateAIIcon,
+  FileEmptyStateIcon,
+  FileTypeIcon,
+  GenerateDocIcon,
+} from '@shinkai_network/shinkai-ui/assets';
 import { cn } from '@shinkai_network/shinkai-ui/utils';
 import { motion } from 'framer-motion';
 import { ChevronRight, PlusIcon, SearchIcon, XIcon } from 'lucide-react';

apps/shinkai-desktop/src/components/vector-fs/components/folder-selection-list.tsx

@@ -7,9 +7,9 @@ import {
   BreadcrumbList,
   BreadcrumbPage,
   BreadcrumbSeparator,
-  DirectoryTypeIcon,
   ScrollArea,
 } from '@shinkai_network/shinkai-ui';
+import { DirectoryTypeIcon } from '@shinkai_network/shinkai-ui/assets';
 import { cn } from '@shinkai_network/shinkai-ui/utils';
 import { ChevronRight } from 'lucide-react';
 import React, { createContext, useContext, useRef } from 'react';
@@ -165,7 +165,7 @@ export const FolderSelectionList = () => {
                 key={idx}
               />
             ))}
-          {VRFiles?.child_folders.map((folder, index: number) => {
+          {VRFiles?.child_folders.map((folder) => {
             return (
               <button
                 className={cn(

apps/shinkai-desktop/src/components/vector-fs/components/my-shared-folders.tsx

@@ -7,13 +7,13 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
   ScrollArea,
-  SharedFolderIcon,
 } from '@shinkai_network/shinkai-ui';
+import { SharedFolderIcon } from '@shinkai_network/shinkai-ui/assets';
+import { formatDateToUSLocaleString } from '@shinkai_network/shinkai-ui/helpers';
 import { cn } from '@shinkai_network/shinkai-ui/utils';
 import { Link2Off } from 'lucide-react';
 import React from 'react';
 
-import { formatDateToUSLocaleString } from '../../../helpers/date';
 import { useAuth } from '../../../store/auth';
 import { useVectorFsStore, VectorFSLayout } from '../context/vector-fs-context';
 import { VectorFsFolderAction } from './vector-fs-drawer';

apps/shinkai-desktop/src/components/vector-fs/components/vector-fs-context-drawer.tsx

@@ -7,7 +7,6 @@ import { useGetVRSeachSimplified } from '@shinkai_network/shinkai-node-state/lib
 import {
   Badge,
   Button,
-  FileTypeIcon,
   Form,
   FormField,
   Input,
@@ -18,6 +17,7 @@ import {
   SheetHeader,
   SheetTitle,
 } from '@shinkai_network/shinkai-ui';
+import { FileTypeIcon } from '@shinkai_network/shinkai-ui/assets';
 import { SearchIcon, XIcon } from 'lucide-react';
 import { Checkbox } from 'primereact/checkbox';
 import { Tree, TreeCheckboxSelectionKeys } from 'primereact/tree';

apps/shinkai-desktop/src/components/vector-fs/components/vector-fs-folder.tsx

@@ -3,14 +3,17 @@ import { VRFolder } from '@shinkai_network/shinkai-node-state/lib/queries/getVRP
 import {
   buttonVariants,
   Checkbox,
-  DirectoryTypeIcon,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-  SharedFolderIcon,
 } from '@shinkai_network/shinkai-ui';
+import {
+  DirectoryTypeIcon,
+  SharedFolderIcon,
+} from '@shinkai_network/shinkai-ui/assets';
+import { formatDateToUSLocaleString } from '@shinkai_network/shinkai-ui/helpers';
 import { cn } from '@shinkai_network/shinkai-ui/utils';
 import {
   CopyIcon,
@@ -22,7 +25,6 @@ import {
 } from 'lucide-react';
 import React from 'react';
 
-import { formatDateToUSLocaleString } from '../../../helpers/date';
 import { useVectorFsStore, VectorFSLayout } from '../context/vector-fs-context';
 import { VectorFsFolderAction } from './vector-fs-drawer';
 

apps/shinkai-desktop/src/components/vector-fs/components/vector-fs-general-options.tsx

@@ -3,9 +3,7 @@ import { useCreateVRFolder } from '@shinkai_network/shinkai-node-state/lib/mutat
 import { useUploadVRFiles } from '@shinkai_network/shinkai-node-state/lib/mutations/uploadVRFiles/useUploadVRFiles';
 import {
   Button,
-  DirectoryTypeIcon,
   FileItem,
-  FileTypeIcon,
   FileUploader,
   Form,
   FormControl,
@@ -17,6 +15,10 @@ import {
   SheetTitle,
   TextField,
 } from '@shinkai_network/shinkai-ui';
+import {
+  DirectoryTypeIcon,
+  FileTypeIcon,
+} from '@shinkai_network/shinkai-ui/assets';
 import { useEffect } from 'react';
 import { useForm } from 'react-hook-form';
 import { useLocation } from 'react-router-dom';

apps/shinkai-desktop/src/components/vector-fs/components/vector-fs-item-detail.tsx

@@ -2,21 +2,21 @@ import { useDownloadVRFile } from '@shinkai_network/shinkai-node-state/lib/mutat
 import {
   Badge,
   Button,
-  FileTypeIcon,
   SheetFooter,
   SheetHeader,
   SheetTitle,
 } from '@shinkai_network/shinkai-ui';
+import { FileTypeIcon } from '@shinkai_network/shinkai-ui/assets';
+import {
+  formatDateToLocaleStringWithTime,
+  formatDateToUSLocaleString,
+} from '@shinkai_network/shinkai-ui/helpers';
 import { dialog, fs } from '@tauri-apps/api';
 import { BaseDirectory } from '@tauri-apps/api/fs';
 import { partial } from 'filesize';
 import { LockIcon } from 'lucide-react';
 import React from 'react';
 
-import {
-  formatDateToLocaleStringWithTime,
-  formatDateToUSLocaleString,
-} from '../../../helpers/date';
 import { useAuth } from '../../../store/auth';
 import { useVectorFsStore } from '../context/vector-fs-context';
 

apps/shinkai-desktop/src/components/vector-fs/components/vector-fs-item.tsx

@@ -9,14 +9,14 @@ import {
   DropdownMenuItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-  FileTypeIcon,
 } from '@shinkai_network/shinkai-ui';
+import { FileTypeIcon } from '@shinkai_network/shinkai-ui/assets';
+import { formatDateToUSLocaleString } from '@shinkai_network/shinkai-ui/helpers';
 import { cn } from '@shinkai_network/shinkai-ui/utils';
 import { partial } from 'filesize';
 import { CopyIcon, FileInputIcon, TrashIcon } from 'lucide-react';
 import React from 'react';
 
-import { formatDateToUSLocaleString } from '../../../helpers/date';
 import { useVectorFsStore, VectorFSLayout } from '../context/vector-fs-context';
 import { VectorFsItemAction } from './vector-fs-drawer';