Merge branch 'main' into agallardol/shinkai-node-tools-integration

dcSpark · Aug 29, 2024 · 3c7e2b4 · 3c7e2b4
2 parents 5d2ab21 + 1fe84fe
commit 3c7e2b4
Show file tree

Hide file tree

Showing 41 changed files with 878 additions and 622 deletions.
diff --git a/apps/shinkai-desktop/src-tauri/tauri.conf.json b/apps/shinkai-desktop/src-tauri/tauri.conf.json
@@ -91,8 +91,8 @@
       {
         "transparent": true,
         "title": "Shinkai Desktop",
-        "width": 1080,
-        "height": 820,
+        "width": 1280,
+        "height": 840,
         "resizable": true,
         "fileDropEnabled": false,
         "titleBarStyle": "Overlay",

diff --git a/apps/shinkai-desktop/src/assets/fonts/clash-display-var.woff2 b/apps/shinkai-desktop/src/assets/fonts/clash-display-var.woff2
diff --git a/apps/shinkai-desktop/src/components/hardware-capabilities/resources-banner.tsx b/apps/shinkai-desktop/src/components/hardware-capabilities/resources-banner.tsx
@@ -26,7 +26,7 @@ export const ResourcesBanner = ({
   className?: string;
   isInSidebar?: boolean;
 }) => {
-  const { data: hardwareSummary } = useHardwareGetSummaryQuery();
+  const { isSuccess, data: hardwareSummary } = useHardwareGetSummaryQuery();
   const sidebarExpanded = useSettings((state) => state.sidebarExpanded);
 
   const isOptimal =
@@ -134,7 +134,7 @@ export const ResourcesBanner = ({
 
   return (
     <div className={cn('flex w-full flex-col text-xs', className)}>
-      {!isOptimal && alertContent}
+      {isSuccess && !isOptimal && alertContent}
     </div>
   );
 };
diff --git a/.../src/components/onboarding/onboarding.tsx → ...nents/onboarding-checklist/onboarding.tsx b/.../src/components/onboarding/onboarding.tsx → ...nents/onboarding-checklist/onboarding.tsx
diff --git a/...ents/onboarding/use-onboarding-stepper.ts → ...rding-checklist/use-onboarding-stepper.ts b/...ents/onboarding/use-onboarding-stepper.ts → ...rding-checklist/use-onboarding-stepper.ts
diff --git a/apps/shinkai-desktop/src/components/reset-storage-before-connect-confirmation-prompt.tsx b/apps/shinkai-desktop/src/components/reset-storage-before-connect-confirmation-prompt.tsx
@@ -76,19 +76,13 @@ export const ResetStorageBeforeConnectConfirmationPrompt = ({
             </div>
           </AlertDialogDescription>
         </AlertDialogHeader>
-        <AlertDialogFooter className="mt-4 grid gap-2.5">
+        <AlertDialogFooter className="mt-4 flex items-center justify-end gap-2.5">
           {/*<Button className="mt-0 flex-1 text-sm" onClick={() => restore()}>*/}
           {/*  <span aria-label="restore" className="emoji" role="img">*/}
           {/*    🔑 {t('common.restore')}*/}
           {/*  </span>*/}
           {/*</Button>*/}
-          <Button
-            className="flex-1 text-sm"
-            onClick={() => reset(true)}
-            variant={'destructive'}
-          >
-            <span>{t('common.resetData')}</span>
-          </Button>
+
           {/*<Button*/}
           {/*  className="mt-0 flex-1 text-sm"*/}
           {/*  onClick={() => reset(false)}*/}
@@ -99,12 +93,21 @@ export const ResetStorageBeforeConnectConfirmationPrompt = ({
           {/*  </span>*/}
           {/*</Button>*/}
           <Button
-            className="flex-1 text-sm"
+            className="min-w-32 text-sm"
             onClick={() => cancel()}
+            size="sm"
             variant={'outline'}
           >
             {t('common.cancel')}
           </Button>
+          <Button
+            className="min-w-32 text-sm"
+            onClick={() => reset(true)}
+            size="sm"
+            variant={'destructive'}
+          >
+            <span>{t('common.resetData')}</span>
+          </Button>
         </AlertDialogFooter>
       </AlertDialogContent>
     </AlertDialog>

diff --git a/apps/shinkai-desktop/src/components/shinkai-node-manager/components/model-capability-tag.tsx b/apps/shinkai-desktop/src/components/shinkai-node-manager/components/model-capability-tag.tsx
@@ -28,14 +28,7 @@ export const ModelCapabilityTag = ({
     },
   };
   return (
-    <Badge
-      className={cn(
-        'justify-center rounded-full border-blue-700 bg-blue-700/70 px-2 py-1 font-normal capitalize text-gray-50',
-        className,
-      )}
-      variant="outline"
-      {...props}
-    >
+    <Badge className={cn(className)} variant="tags" {...props}>
       {capabilityMap[capability].icon}
       <span className="ml-2">{capabilityMap[capability].text}</span>
     </Badge>

diff --git a/apps/shinkai-desktop/src/components/shinkai-node-manager/components/model-quality-tag.tsx b/apps/shinkai-desktop/src/components/shinkai-node-manager/components/model-quality-tag.tsx
@@ -12,21 +12,8 @@ export const ModelQuailityTag = ({
 }: {
   quality: OllamaModelQuality;
 } & React.HTMLAttributes<HTMLDivElement>) => {
-  const colorMap: { [key in OllamaModelQuality]: string } = {
-    [OllamaModelQuality.Low]: 'text-orange-200 bg-orange-900',
-    [OllamaModelQuality.Medium]: 'text-yellow-200 bg-yellow-900',
-    [OllamaModelQuality.Good]: 'text-green-200 bg-green-900',
-  };
   return (
-    <Badge
-      className={cn(
-        'items-center justify-center rounded-full border-0 px-2 py-1 font-normal capitalize',
-        colorMap[quality],
-        className,
-      )}
-      variant="outline"
-      {...props}
-    >
+    <Badge className={cn(className)} variant="tags" {...props}>
       <Sparkles className="h-4 w-4" />
       <span className="ml-2">
         {quality} {t('shinkaiNode.models.labels.quality')}

diff --git a/apps/shinkai-desktop/src/components/shinkai-node-manager/components/model-speed-tag.tsx b/apps/shinkai-desktop/src/components/shinkai-node-manager/components/model-speed-tag.tsx
@@ -1,4 +1,4 @@
-import { cn } from '@shinkai_network/shinkai-ui/utils';
+import { Badge } from '@shinkai_network/shinkai-ui';
 
 import { OllamaModelSpeed } from '../../../lib/shinkai-node-manager/ollama-models';
 
@@ -8,20 +8,11 @@ export const ModelSpeedTag = ({ speed }: { speed: OllamaModelSpeed }) => {
     [OllamaModelSpeed.Fast]: '🐎',
     [OllamaModelSpeed.VeryFast]: '🐆',
   };
-  const colorMap: { [key in OllamaModelSpeed]: string } = {
-    [OllamaModelSpeed.Average]: 'text-orange-200 bg-orange-900',
-    [OllamaModelSpeed.Fast]: 'text-yellow-200 bg-yellow-900',
-    [OllamaModelSpeed.VeryFast]: 'text-green-200 bg-green-900',
-  };
+
   return (
-    <div
-      className={cn(
-        'flex flex-row items-center justify-center whitespace-nowrap rounded-full border-0 bg-gray-900 px-2 py-1 font-normal capitalize text-gray-400',
-        colorMap[speed],
-      )}
-    >
+    <Badge variant="tags">
       <span>{emojiMap[speed]}</span>
       <span className="ml-2">{speed}</span>
-    </div>
+    </Badge>
   );
 };
diff --git a/...ai-desktop/src/components/shinkai-node-manager/components/ollama-model-install-button.tsx b/...ai-desktop/src/components/shinkai-node-manager/components/ollama-model-install-button.tsx
@@ -1,11 +1,10 @@
-import { CheckIcon } from '@radix-ui/react-icons';
 import { useTranslation } from '@shinkai_network/shinkai-i18n';
 import { useSyncOllamaModels } from '@shinkai_network/shinkai-node-state/lib/mutations/syncOllamaModels/useSyncOllamaModels';
 import { Button, Progress } from '@shinkai_network/shinkai-ui';
 import { useMap } from '@shinkai_network/shinkai-ui/hooks';
 import { cn } from '@shinkai_network/shinkai-ui/utils';
 import { motion } from 'framer-motion';
-import { Download, Loader2, Minus } from 'lucide-react';
+import { CheckCircle, Download, Loader2, Minus } from 'lucide-react';
 import { ModelResponse, ProgressResponse } from 'ollama/browser';
 import { useEffect, useState } from 'react';
 import { toast } from 'sonner';
@@ -124,16 +123,7 @@ export const OllamaModelInstallButton = ({ model }: { model: string }) => {
             ollamaRemove({ model: model });
           }}
         />
-      ) : // <Button
-      //   className="hover:border-brand w-full py-1.5 text-sm hover:text-white"
-      //
-      //   size="auto"
-      //   variant={'destructive'}
-      // >
-      //   <Minus className="mr-2 h-3 w-3" />
-      //   {t('common.remove')}
-      // </Button>
-      pullingModelsMap?.get(model) ? (
+      ) : pullingModelsMap?.get(model) ? (
         <div className="flex flex-col items-center gap-1">
           <span className="text-xs text-gray-100">
             {getProgress(pullingModelsMap.get(model) as ProgressResponse) + '%'}
@@ -169,7 +159,7 @@ function RemoveAIModelButton({ onClick }: { onClick: () => void }) {
   return (
     <MotionButton
       className={cn(
-        'w-full py-1.5 text-sm hover:border-red-800 hover:bg-red-700/50 hover:text-red-50',
+        'w-full bg-green-900/70 py-1.5 text-sm hover:border-red-800 hover:bg-red-700/50 hover:text-red-50',
       )}
       layout
       onClick={onClick}
@@ -181,7 +171,7 @@ function RemoveAIModelButton({ onClick }: { onClick: () => void }) {
       {isHovered ? (
         <Minus className="mr-2 h-3 w-3" />
       ) : (
-        <CheckIcon className="text-brand mr-2 h-3.5 w-3.5" />
+        <CheckCircle className="mr-2 h-3 w-3 text-white" />
       )}
       {isHovered ? t('common.remove') : t('common.installed')}
     </MotionButton>

diff --git a/apps/shinkai-desktop/src/components/shinkai-node-manager/ollama-models.tsx b/apps/shinkai-desktop/src/components/shinkai-node-manager/ollama-models.tsx
@@ -2,6 +2,7 @@ import { useTranslation } from '@shinkai_network/shinkai-i18n';
 import {
   Badge,
   Button,
+  CardFooter,
   ScrollArea,
   Tooltip,
   TooltipContent,
@@ -91,49 +92,53 @@ export const OllamaModels = () => {
     >
       {!showAllOllamaModels && (
         <ScrollArea className="mt-1 flex flex-1 flex-col overflow-auto [&>div>div]:!block">
-          <div className="grid grid-cols-2 gap-4">
+          <div className="grid grid-cols-4 gap-4">
             {OLLAMA_MODELS.map((model) => {
               return (
-                <Card className="gap- flex flex-col" key={model.fullName}>
+                <Card
+                  className="gap- flex flex-col rounded-2xl"
+                  key={model.fullName}
+                >
                   <CardHeader className="relative">
-                    <CardTitle className="text-md mb-3 flex items-center gap-2">
-                      <span className="bg-gray-350 rounded-lg p-2">
+                    <CardTitle className="text-md mb-3 flex flex-col gap-1">
+                      <span className="p-2">
                         {model.provider
                           ? providerLogoMap[
                               model?.provider as keyof typeof providerLogoMap
                             ]
                           : null}
                       </span>
 
-                      <span>{model.name}</span>
-                      {isDefaultModel(model.fullName) && (
-                        <TooltipProvider delayDuration={0}>
-                          <Tooltip>
-                            <TooltipTrigger asChild>
-                              <Badge
-                                className={cn(
-                                  'border-brand ml-2 flex inline-flex h-5 w-5 items-center justify-center rounded-full border p-0 font-medium',
-                                )}
-                                variant="gradient"
-                              >
-                                <StarIcon className="text-brand size-3" />
-                              </Badge>
-                            </TooltipTrigger>
-                            <TooltipPortal>
-                              <TooltipContent align="center" side="top">
-                                {t('common.recommended')}
-                              </TooltipContent>
-                            </TooltipPortal>
-                          </Tooltip>
-                        </TooltipProvider>
-                      )}
+                      <span>
+                        <span className="font-clash text-xl font-semibold">
+                          {model.name}
+                        </span>
+                        {isDefaultModel(model.fullName) && (
+                          <TooltipProvider delayDuration={0}>
+                            <Tooltip>
+                              <TooltipTrigger asChild>
+                                <Badge
+                                  className={cn(
+                                    'border-brand ml-2 flex inline-flex h-5 w-5 items-center justify-center rounded-full border p-0 font-medium',
+                                  )}
+                                  variant="gradient"
+                                >
+                                  <StarIcon className="text-brand size-3" />
+                                </Badge>
+                              </TooltipTrigger>
+                              <TooltipPortal>
+                                <TooltipContent align="center" side="top">
+                                  {t('common.recommended')}
+                                </TooltipContent>
+                              </TooltipPortal>
+                            </Tooltip>
+                          </TooltipProvider>
+                        )}
+                      </span>
                     </CardTitle>
                     <CardDescription className="overflow-hidden text-ellipsis">
                       {model.description}
                     </CardDescription>
-                    <div className="absolute right-3 top-3 flex items-center justify-center">
-                      <OllamaModelInstallButton model={model.fullName} />
-                    </div>
                   </CardHeader>
                   <CardContent className="flex flex-col items-center gap-1 text-xs">
                     <div className="flex flex-wrap items-center gap-2">
@@ -161,6 +166,9 @@ export const OllamaModels = () => {
                       </Badge>
                     </div>
                   </CardContent>
+                  <CardFooter className="mt-auto">
+                    <OllamaModelInstallButton model={model.fullName} />
+                  </CardFooter>
                 </Card>
               );
             })}

diff --git a/apps/shinkai-desktop/src/constants/analytics.ts b/apps/shinkai-desktop/src/constants/analytics.ts
@@ -1,10 +1,8 @@
-import { t } from '@shinkai_network/shinkai-i18n';
-
 export const analyticsBulletPoints = () => [
-  t('analytics.bulletPoints.one'),
-  t('analytics.bulletPoints.two'),
-  t('analytics.bulletPoints.three'),
-  t('analytics.bulletPoints.four'),
-  t('analytics.bulletPoints.five'),
-  t('analytics.bulletPoints.six'),
+  'analytics.bulletPoints.one' as const,
+  'analytics.bulletPoints.two' as const,
+  'analytics.bulletPoints.three' as const,
+  'analytics.bulletPoints.four' as const,
+  'analytics.bulletPoints.five' as const,
+  'analytics.bulletPoints.six' as const,
 ];
diff --git a/apps/shinkai-desktop/src/globals.css b/apps/shinkai-desktop/src/globals.css
@@ -2,6 +2,17 @@
 @import 'primereact/resources/themes/lara-light-blue/theme.css';
 @import 'primereact/resources/primereact.min.css';
 
+@font-face {
+  font-family: 'Clash Display';
+  font-style: normal;
+  font-weight: 400 700;
+  font-display: optional;
+  src: url(./assets/fonts/clash-display-var.woff2) format('woff2');
+  unicode-range: u+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
+    U+FEFF, U+FFFD;
+}
+
 html,
 body,
 #root {
@@ -11,7 +22,6 @@ html {
   @apply overscroll-none;
 }
 
-
 ::-webkit-scrollbar-track {
   @apply bg-gray-400;
 }
diff --git a/apps/shinkai-desktop/src/lib/shinkai-node-manager/ollama-client.ts b/apps/shinkai-desktop/src/lib/shinkai-node-manager/ollama-client.ts
@@ -45,6 +45,7 @@ export const useOllamaListQuery = (
 };
 
 const pullingModelsMap = new Map<string, ProgressResponse>();
+
 export const useOllamaPullingQuery = (
   options?: QueryObserverOptions,
 ): UseQueryResult<Map<string, ProgressResponse>, Error> => {
@@ -73,7 +74,6 @@ export const useOllamaPullMutation = (
       input,
     ): Promise<AsyncGenerator<ProgressResponse, unknown, unknown>> => {
       const ollamaClient = new Ollama(ollamaConfig);
-
       const pipeGenerator = async function* transformGenerator(generator: {
         [Symbol.asyncIterator](): AsyncGenerator<
           ProgressResponse,