refactor: helper functions

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

@@ -9,11 +9,11 @@ import {
   ScrollArea,
 } 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-folder.tsx

@@ -13,6 +13,7 @@ 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,
@@ -24,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-item-detail.tsx

@@ -7,16 +7,16 @@ import {
   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

@@ -11,12 +11,12 @@ import {
   DropdownMenuTrigger,
 } 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';
 

apps/shinkai-desktop/tsconfig.json

@@ -11,21 +11,24 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
     "paths": {
+      "@shinkai_network/shinkai-message-ts/*": [
+        "libs/shinkai-message-ts/src/*.ts"
+      ],
+      "@shinkai_network/shinkai-node-state/*": [
+        "libs/shinkai-node-state/src/*.ts"
+      ],
       "@shinkai_network/shinkai-ui": [
         "libs/shinkai-ui/src/components/index.ts"
       ],
       "@shinkai_network/shinkai-ui/hooks": [
         "libs/shinkai-ui/src/hooks/index.ts"
       ],
+      "@shinkai_network/shinkai-ui/helpers": [
+        "libs/shinkai-ui/src/helpers/index.ts"
+      ],
       "@shinkai_network/shinkai-ui/utils": ["libs/shinkai-ui/src/utils.ts"],
       "@shinkai_network/shinkai-ui/assets": [
         "libs/shinkai-ui/src/assets/index.ts"
-      ],
-      "@shinkai_network/shinkai-message-ts/*": [
-        "dist/libs/shinkai-message-ts/*"
-      ],
-      "@shinkai_network/shinkai-node-state/*": [
-        "libs/shinkai-node-state/src/*.ts"
       ]
     }
   },

apps/shinkai-visor/src/components/action-button/action-button.tsx

@@ -18,6 +18,7 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from '@shinkai_network/shinkai-ui';
+import { createShadowRoot, delay } from '@shinkai_network/shinkai-ui/helpers';
 import { cn } from '@shinkai_network/shinkai-ui/utils';
 import { motion } from 'framer-motion';
 import {
@@ -33,8 +34,6 @@ import { useEffect, useRef } from 'react';
 import { IntlProvider } from 'react-intl';
 
 import shinkaiLogo from '../../assets/icons/shinkai-min.svg';
-import createShadowRoot from '../../helpers/create-shadow-root';
-import { delay } from '../../helpers/misc';
 import { srcUrlResolver } from '../../helpers/src-url-resolver';
 import { useGlobalActionButtonChromeMessage } from '../../hooks/use-global-action-button-chrome-message';
 import useKeyboardShortcut from '../../hooks/use-keyboard-shortcut';
@@ -49,6 +48,7 @@ import {
   useVectorResourceMetatags,
 } from './vr-notification';
 import notificationStyle from './vr-notification.css?inline';
+
 export const SHINKAI_ACTION_ELEMENT_NAME = 'shinkai-action-button-root';
 
 const toggleSidePanel = async () => {

apps/shinkai-visor/src/components/action-button/vr-notification.tsx

@@ -1,9 +1,9 @@
+import { delay } from '@shinkai_network/shinkai-ui/helpers';
 import { XIcon } from 'lucide-react';
 import React, { useEffect } from 'react';
 import { toast } from 'sonner';
 
 import shinkaiLogo from '../../assets/icons/shinkai-min.svg';
-import { delay } from '../../helpers/misc';
 import { srcUrlResolver } from '../../helpers/src-url-resolver';
 import { OPEN_SIDEPANEL_DELAY_MS } from '../../service-worker/action';
 import { ServiceWorkerInternalMessageType } from '../../service-worker/communication/internal/types';

apps/shinkai-visor/src/components/file-list/file-list.tsx

@@ -1,12 +1,11 @@
 import { PaperClipIcon } from '@shinkai_network/shinkai-ui/assets';
+import { getFileExt, getFileName } from '@shinkai_network/shinkai-ui/helpers';
 import { cn } from '@shinkai_network/shinkai-ui/utils';
 import { partial } from 'filesize';
 import { AnimatePresence, motion } from 'framer-motion';
 import { Loader2 } from 'lucide-react';
 import { ReactNode, useEffect, useState } from 'react';
 
-import { getFileExt, getFileName } from '../../helpers/file-name-utils';
-
 export type FileListProps = {
   files: ({ name: string; size?: number } | File)[];
   actions: {

apps/shinkai-visor/src/components/image-capture/image-capture.tsx

@@ -1,12 +1,15 @@
+import {
+  blobToBase64,
+  canvasPreview,
+  canvasToBlob,
+  createShadowRoot,
+} from '@shinkai_network/shinkai-ui/helpers';
 import * as React from 'react';
 import { useRef, useState } from 'react';
 import ReactCrop, { Crop, PixelCrop } from 'react-image-crop';
 import reactCropStyle from 'react-image-crop/dist/ReactCrop.css?inline';
 import { IntlProvider } from 'react-intl';
 
-import { blobToBase64 } from '../../helpers/blob-utils';
-import { canvasPreview, canvasToBlob } from '../../helpers/canvas-utils';
-import createShadowRoot from '../../helpers/create-shadow-root';
 import { useGlobalImageCaptureChromeMessage } from '../../hooks/use-global-image-capture-message';
 import { langMessages, locale } from '../../lang/intl';
 import themeStyle from '../../theme/styles.css?inline';

apps/shinkai-visor/src/components/node-files/my-shared-folders.tsx

@@ -9,11 +9,11 @@ import {
   ScrollArea,
 } 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/auth';
 import { useVectorFsStore, VectorFSLayout } from './node-file-context';
 import { VectorFsFolderAction } from './vector-fs-drawer';

apps/shinkai-visor/src/components/node-files/vector-fs-folder.tsx

@@ -13,6 +13,7 @@ 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,
@@ -24,7 +25,6 @@ import {
 } from 'lucide-react';
 import React from 'react';
 
-import { formatDateToUSLocaleString } from '../../helpers/date';
 import { useVectorFsStore, VectorFSLayout } from './node-file-context';
 import { VectorFsFolderAction } from './vector-fs-drawer';
 

apps/shinkai-visor/src/components/node-files/vector-fs-item-detail.tsx

@@ -9,14 +9,14 @@ import {
   DrawerTitle,
 } from '@shinkai_network/shinkai-ui';
 import { FileTypeIcon } from '@shinkai_network/shinkai-ui/assets';
+import {
+  formatDateToLocaleStringWithTime,
+  formatDateToUSLocaleString,
+} from '@shinkai_network/shinkai-ui/helpers';
 import { partial } from 'filesize';
 import { LockIcon } from 'lucide-react';
 import React from 'react';
 
-import {
-  formatDateToLocaleStringWithTime,
-  formatDateToUSLocaleString,
-} from '../../helpers/date';
 import { useAuth } from '../../store/auth/auth';
 import { useVectorFsStore } from './node-file-context';
 

apps/shinkai-visor/src/components/node-files/vector-fs-item.tsx

@@ -11,12 +11,12 @@ import {
   DropdownMenuTrigger,
 } 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 './node-file-context';
 import { VectorFsItemAction } from './vector-fs-drawer';
 

apps/shinkai-visor/src/hooks/use-global-popup-chrome-message.ts

@@ -1,6 +1,6 @@
+import { dataUrlToFile } from '@shinkai_network/shinkai-ui/helpers';
 import { useHistory } from 'react-router-dom';
 
-import { dataUrlToFile } from '../helpers/blob-utils';
 import { ServiceWorkerInternalMessageType } from '../service-worker/communication/internal/types';
 import { useAuth } from '../store/auth/auth';
 import { useSettings } from '../store/settings/settings';

apps/shinkai-visor/src/service-worker/context-menu.ts

@@ -1,4 +1,5 @@
-import { delay } from '../helpers/misc';
+import { delay } from '@shinkai_network/shinkai-ui/helpers';
+
 import {
   OPEN_SIDEPANEL_DELAY_MS,
   sendCaptureToAgent,

apps/shinkai-visor/tsconfig.json

@@ -8,21 +8,24 @@
     "types": ["vite/client", "vitest"],
     "resolveJsonModule": true,
     "paths": {
+      "@shinkai_network/shinkai-message-ts/*": [
+        "libs/shinkai-message-ts/src/*.ts"
+      ],
+      "@shinkai_network/shinkai-node-state/*": [
+        "libs/shinkai-node-state/src/*.ts"
+      ],
       "@shinkai_network/shinkai-ui": [
         "libs/shinkai-ui/src/components/index.ts"
       ],
       "@shinkai_network/shinkai-ui/hooks": [
         "libs/shinkai-ui/src/hooks/index.ts"
       ],
+      "@shinkai_network/shinkai-ui/helpers": [
+        "libs/shinkai-ui/src/helpers/index.ts"
+      ],
       "@shinkai_network/shinkai-ui/utils": ["libs/shinkai-ui/src/utils.ts"],
       "@shinkai_network/shinkai-ui/assets": [
         "libs/shinkai-ui/src/assets/index.ts"
-      ],
-      "@shinkai_network/shinkai-message-ts/*": [
-        "dist/libs/shinkai-message-ts/*"
-      ],
-      "@shinkai_network/shinkai-node-state/*": [
-        "libs/shinkai-node-state/src/*.ts"
       ]
     }
   },

libs/shinkai-ui/src/helpers/blob.ts

@@ -0,0 +1,28 @@
+import { Buffer } from 'buffer';
+
+export const blobToBase64 = (blob: Blob): Promise<string> => {
+  const reader = new FileReader();
+  reader.readAsDataURL(blob);
+  return new Promise((resolve) => {
+    reader.onloadend = () => {
+      resolve(reader.result as string);
+    };
+  });
+};
+
+export const dataUrlToFile = (
+  dataUrl: string,
+  filename: string,
+): File | undefined => {
+  const arr = dataUrl.split(',');
+  if (arr.length < 2) {
+    return undefined;
+  }
+  const mimeArr = arr[0].match(/:(.*?);/);
+  if (!mimeArr || mimeArr.length < 2) {
+    return undefined;
+  }
+  const mime = mimeArr[1];
+  const buff = Buffer.from(arr[1], 'base64');
+  return new File([buff], filename, { type: mime });
+};

libs/shinkai-ui/src/helpers/canvas.ts

@@ -0,0 +1,70 @@
+import { PixelCrop } from "react-image-crop"
+const TO_RADIANS = Math.PI / 180
+
+export async function canvasPreview(
+  image: HTMLImageElement,
+  canvas: HTMLCanvasElement,
+  crop: PixelCrop,
+  scale = 1,
+  rotate = 0,
+) {
+  const ctx = canvas.getContext('2d')
+
+  if (!ctx) {
+    throw new Error('No 2d context')
+  }
+
+  const scaleX = image.naturalWidth / image.width
+  const scaleY = image.naturalHeight / image.height
+  // devicePixelRatio slightly increases sharpness on retina devices
+  // at the expense of slightly slower render times and needing to
+  // size the image back down if you want to download/upload and be
+  // true to the images natural size.
+  const pixelRatio = window.devicePixelRatio
+  // const pixelRatio = 1
+
+  canvas.width = Math.floor(crop.width * scaleX * pixelRatio)
+  canvas.height = Math.floor(crop.height * scaleY * pixelRatio)
+
+  ctx.scale(pixelRatio, pixelRatio)
+  ctx.imageSmoothingQuality = 'high'
+
+  const cropX = crop.x * scaleX
+  const cropY = crop.y * scaleY
+
+  const rotateRads = rotate * TO_RADIANS
+  const centerX = image.naturalWidth / 2
+  const centerY = image.naturalHeight / 2
+
+  ctx.save()
+
+  // 5) Move the crop origin to the canvas origin (0,0)
+  ctx.translate(-cropX, -cropY)
+  // 4) Move the origin to the center of the original position
+  ctx.translate(centerX, centerY)
+  // 3) Rotate around the origin
+  ctx.rotate(rotateRads)
+  // 2) Scale the image
+  ctx.scale(scale, scale)
+  // 1) Move the center of the image to the origin (0,0)
+  ctx.translate(-centerX, -centerY)
+  ctx.drawImage(
+    image,
+    0,
+    0,
+    image.naturalWidth,
+    image.naturalHeight,
+    0,
+    0,
+    image.naturalWidth,
+    image.naturalHeight,
+  )
+
+  ctx.restore()
+}
+
+export const canvasToBlob = (canvas: HTMLCanvasElement, type:  'image/jpeg' = 'image/jpeg', quality: number = 0.92): Promise<Blob | null> => {
+  return new Promise((resolve) => {
+    canvas.toBlob(resolve, 'image/jpeg', 0.5);
+  })
+};

apps/shinkai-visor/src/helpers/create-shadow-root.ts → libs/shinkai-ui/src/helpers/create-shadow-root.ts

@@ -7,7 +7,7 @@ import { createRoot } from 'react-dom/client';
  * @returns {ReactRoot} - React root rendered inside the shadow root.
  */
 
-export default function createShadowRoot(tagName: string, styles: string) {
+export function createShadowRoot(tagName: string, styles: string) {
   const container = document.createElement('div');
   const shadow = container.attachShadow({ mode: 'open' });