- feature: send page to node

apps/shinkai-visor/package.json

@@ -4,7 +4,5 @@
   "version": "0.0.1",
   "type": "module",
   "description": "Shinkai Visor",
-  "dependencies": {
-    "@radix-ui/react-slot": "^1.0.2"
-  }
+  "main": "./src/service-worker/service-worker.ts"
 }

apps/shinkai-visor/public/manifest.json

@@ -15,7 +15,7 @@
       "16": "icon16.png",
       "48": "icon48.png"
     },
-    "default_popup": "src/components/popup/popup.html"
+    "default_popup": ""
   },
   "background": {
     "service_worker": "src/service-worker/service-worker.ts"
@@ -38,6 +38,7 @@
     }
   },
   "permissions": ["storage", "contextMenus"],
+  "host_permissions": ["<all_urls>"],
   "content_security_policy": {
     "extension_pages": "script-src 'self' 'wasm-unsafe-eval'; object-src 'self';"
   },

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

@@ -2,8 +2,6 @@ import { motion } from 'framer-motion';
 import * as React from 'react';
 import { createRoot } from 'react-dom/client';
 import { IntlProvider } from 'react-intl';
-import { Provider } from 'react-redux';
-import { PersistGate } from 'redux-persist/integration/react';
 
 import shinkaiLogo from '../../assets/icons/shinkai-min.svg';
 import { cn } from '../../helpers/cn-utils';
@@ -12,21 +10,16 @@ import { useGlobalActionButtonChromeMessage } from '../../hooks/use-global-actio
 import { langMessages, locale } from '../../lang/intl';
 import { ContentScriptMessageType } from '../../service-worker/communication/content-script-message-type';
 import { sendContentScriptMessage } from '../../service-worker/communication/content-script-messages';
-import { store, storePersistor } from '../../store';
 import themeStyle from '../../theme/styles.css?inline';
 import popupStyle from './action-button.css?inline';
 
-let container = document.getElementById('shinkai-action-button-root');
-let shadow: ShadowRoot | undefined = undefined;
-if (!container) {
-  const baseContainer = document.createElement('shinkai-action-button-root');
-  shadow = baseContainer.attachShadow({ mode: 'open' });
-  container = document.createElement('div');
-  container.id = 'shinkai-action-button-root';
-  shadow.appendChild(container);
-  const htmlRoot = document.getElementsByTagName('html')[0];
-  htmlRoot.prepend(baseContainer);
-}
+const baseContainer = document.createElement('shinkai-action-button-root');
+const shadow = baseContainer.attachShadow({ mode: 'open' });
+const container = document.createElement('div');
+container.id = 'root';
+shadow.appendChild(container);
+const htmlRoot = document.getElementsByTagName('html')[0];
+htmlRoot.prepend(baseContainer);
 
 export const ActionButton = () => {
   const [popupVisibility] = useGlobalActionButtonChromeMessage();
@@ -51,28 +44,23 @@ export const ActionButton = () => {
       >
         <img
           alt="shinkai-app-logo"
-          className={"w-full h-full"}
+          className={'w-full h-full'}
           src={srcUrlResolver(shinkaiLogo)}
         />
       </motion.div>
       <span className="text-xs text-center">⌘ + ,</span>
     </div>
   );
 };
-
 const root = createRoot(container);
 root.render(
   <React.StrictMode>
     <style>{themeStyle}</style>
     <style>{popupStyle}</style>
-    <Provider store={store}>
-      <PersistGate loading={null} persistor={storePersistor}>
-        <IntlProvider locale={locale} messages={langMessages}>
-          <div className="fixed top-32 right-2 overflow-hidden bg-background z-[1500000000] border-solid border-primary border-2 rounded-lg">
-            <ActionButton></ActionButton>
-          </div>
-        </IntlProvider>
-      </PersistGate>
-    </Provider>
+    <IntlProvider locale={locale} messages={langMessages}>
+      <div className="fixed top-32 right-2 overflow-hidden bg-background z-[1500000000] border-solid border-primary border-2 rounded-lg">
+        <ActionButton></ActionButton>
+      </div>
+    </IntlProvider>
   </React.StrictMode>
 );

apps/shinkai-visor/src/components/add-agent/add-agent.tsx

@@ -1,12 +1,13 @@
 import { zodResolver } from '@hookform/resolvers/zod';
-import { useCreateAgent } from "@shinkai_network/shinkai-node-state/lib/mutations/createAgent/useCreateAgent";
+import { useCreateAgent } from '@shinkai_network/shinkai-node-state/lib/mutations/createAgent/useCreateAgent';
 import { Loader2 } from 'lucide-react';
 import { useForm } from 'react-hook-form';
 import { FormattedMessage, useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 import { z } from 'zod';
 
 import { useAuth } from '../../store/auth/auth';
+import { useUIContainer } from '../../store/ui-container/ui-container';
 import { Button } from '../ui/button';
 import {
   Form,
@@ -21,6 +22,7 @@ import {
   Select,
   SelectContent,
   SelectItem,
+  SelectPortal,
   SelectTrigger,
   SelectValue,
 } from '../ui/select';
@@ -42,6 +44,7 @@ type FormSchemaType = z.infer<typeof formSchema>;
 export const AddAgent = () => {
   const history = useHistory();
   const auth = useAuth((state) => state.auth);
+  const uiContainer = useUIContainer((state) => state.uiContainer);
   const form = useForm<FormSchemaType>({
     resolver: zodResolver(formSchema),
     defaultValues: {
@@ -52,10 +55,7 @@ export const AddAgent = () => {
     },
   });
   const intl = useIntl();
-  const {
-    mutateAsync: createAgent,
-    isLoading,
-  } = useCreateAgent({
+  const { mutateAsync: createAgent, isLoading } = useCreateAgent({
     onSuccess: (data) => {
       history.replace({ pathname: '/inboxes/create-job' });
     },
@@ -85,9 +85,10 @@ export const AddAgent = () => {
         perform_locally: false,
         storage_bucket_permissions: [],
         toolkit_permissions: [],
-        model: values.model === Models.OpenAI
-        ? { OpenAI: { model_type: 'gpt-3.5-turbo' } }
-        : { SleepAPI: {} },
+        model:
+          values.model === Models.OpenAI
+            ? { OpenAI: { model_type: 'gpt-3.5-turbo' } }
+            : { SleepAPI: {} },
       },
       setupDetailsState: {
         my_device_encryption_sk: auth.my_device_encryption_sk,
@@ -171,16 +172,18 @@ export const AddAgent = () => {
                         <SelectValue />
                       </SelectTrigger>
                     </FormControl>
-                    <SelectContent>
-                      {modelOptions.map((model) => (
-                        <SelectItem
-                          key={model.value}
-                          value={model.value.toString()}
-                        >
-                          {model.label}
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
+                    <SelectPortal container={uiContainer?.rootElement}>
+                      <SelectContent>
+                        {modelOptions.map((model) => (
+                          <SelectItem
+                            key={model.value}
+                            value={model.value.toString()}
+                          >
+                            {model.label}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </SelectPortal>
                   </Select>
                   <FormMessage />
                 </FormItem>

apps/shinkai-visor/src/components/agents/agents.tsx

@@ -1,4 +1,5 @@
 import { useAgents } from "@shinkai_network/shinkai-node-state/lib/queries/getAgents/useGetAgents";
+import { Fragment } from "react";
 
 import { useAuth } from '../../store/auth/auth';
 import { ScrollArea } from '../ui/scroll-area';
@@ -17,17 +18,17 @@ export const Agents = () => {
     profile_identity_sk: auth?.profile_identity_sk ?? "",
   });
   return (
-    <div className="h-full flex flex-col space-y-3 justify-between">
+    <div className="[&>div>div]:!block h-full flex flex-col space-y-3 justify-between">
       <ScrollArea>
         {agents?.map((agent) => (
-          <div key={agent.id}>
-            <div
-              className="text-ellipsis overflow-hidden whitespace-nowrap"
+          <Fragment key={agent.id}>
+            <p
+              className="w-full truncate overflow-hidden"
             >
               {agent.id}
-            </div>
+            </p>
             <Separator className="my-2" />
-          </div>
+          </Fragment>
         ))}
       </ScrollArea>
     </div>

apps/shinkai-visor/src/components/create-job/create-job.tsx

@@ -1,14 +1,17 @@
 import { zodResolver } from '@hookform/resolvers/zod';
+import { buildInboxIdFromJobId } from '@shinkai_network/shinkai-message-ts/utils';
 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 { Loader2 } from 'lucide-react';
 import { useForm } from 'react-hook-form';
 import { FormattedMessage } from 'react-intl';
-import { useHistory } from 'react-router-dom';
+import { useHistory, useLocation } from 'react-router-dom';
 import { z } from 'zod';
 
 import { useQuery } from '../../hooks/use-query';
 import { useAuth } from '../../store/auth/auth';
+import { useUIContainer } from '../../store/ui-container/ui-container';
+import { FileList } from '../file-list/file-list';
 import { Button } from '../ui/button';
 import {
   Form,
@@ -23,6 +26,7 @@ import {
   Select,
   SelectContent,
   SelectItem,
+  SelectPortal,
   SelectTrigger,
   SelectValue,
 } from '../ui/select';
@@ -36,8 +40,10 @@ type FormSchemaType = z.infer<typeof formSchema>;
 
 export const CreateJob = () => {
   const history = useHistory();
+  const location = useLocation<{ files: File[] }>();
   const query = useQuery();
   const auth = useAuth((state) => state.auth);
+  const uiContainer = useUIContainer((state) => state.uiContainer);
   const form = useForm<FormSchemaType>({
     resolver: zodResolver(formSchema),
     defaultValues: {
@@ -57,8 +63,7 @@ export const CreateJob = () => {
   });
   const { isLoading, mutateAsync: createJob } = useCreateJob({
     onSuccess: (data) => {
-      // TODO: job_inbox, false is hardcoded
-      const jobId = encodeURIComponent(`job_inbox::${data.jobId}::false`);
+      const jobId = encodeURIComponent(buildInboxIdFromJobId(data.jobId));
       history.replace(`/inboxes/${jobId}`);
     },
   });
@@ -74,6 +79,7 @@ export const CreateJob = () => {
       agentId: values.agent,
       content: content,
       files_inbox: '',
+      files: location.state?.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,
@@ -106,13 +112,15 @@ export const CreateJob = () => {
                       <SelectValue />
                     </SelectTrigger>
                   </FormControl>
-                  <SelectContent>
-                    {agents?.map((model) => (
-                      <SelectItem key={model.id} value={model.id}>
-                        {(model.full_identity_name as any)?.subidentity_name}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
+                  <SelectPortal container={uiContainer?.rootElement}>
+                    <SelectContent>
+                      {agents?.map((model) => (
+                        <SelectItem key={model.id} value={model.id}>
+                          {(model.full_identity_name as any)?.subidentity_name}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </SelectPortal>
                 </Select>
                 <FormMessage />
               </FormItem>
@@ -127,6 +135,12 @@ export const CreateJob = () => {
             </blockquote>
           )}
 
+          {location.state?.files?.length && (
+            <blockquote className="max-h-28 p-4 mb-5 border-l-4 border-gray-300 bg-gray-50 dark:border-gray-500 dark:bg-gray-800">
+              <FileList files={location.state?.files}></FileList>
+            </blockquote>
+          )}
+
           <FormField
             control={form.control}
             name="content"