- feature: ui improvements after rewrite (#35)

* - fix: improved connect using healthcheck to shinkai-node * - fix: improved crxjs hmr * - feature: implemented toggle popup shortcut * - fix: added command label to action button * - feature: added agent workflow * - fix: inboxes improvments * - fix: wrap context when send to agent * - fix: lint errors with unknown react properties * - fix: removed hmr workaround
dcSpark · Oct 10, 2023 · b02f7be · b02f7be
1 parent 9f40b88
commit b02f7be
Show file tree

Hide file tree

Showing 27 changed files with 704 additions and 87 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -32,7 +32,9 @@
     {
       "files": ["*.ts", "*.tsx"],
       "extends": ["plugin:@nx/typescript"],
-      "rules": {}
+      "rules": {
+        "react/no-unknown-property": ["error", { "ignore": ["cmdk-input-wrapper"] }]
+      }
     },
     {
       "files": ["*.js", "*.jsx"],

diff --git a/apps/shinkai-visor/.eslintrc.json b/apps/shinkai-visor/.eslintrc.json
@@ -1,6 +1,6 @@
 {
   "extends": ["plugin:@nx/react", "../../.eslintrc.json"],
-  "ignorePatterns": ["!**/*"],
+  "ignorePatterns": ["!**/*", "dist"],
   "overrides": [
     {
       "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],

diff --git a/apps/shinkai-visor/public/manifest.json b/apps/shinkai-visor/public/manifest.json
@@ -27,22 +27,14 @@
     }
   ],
   "commands": {
-    "_execute_action": {
-      "suggested_key": {
-        "windows": "Ctrl+Shift+U",
-        "mac": "Ctrl+Shift+U",
-        "chromeos": "Ctrl+Shift+U",
-        "linux": "Ctrl+Shift+U"
-      }
-    },
-    "command-launcher": {
+    "toggle-popup": {
       "suggested_key": {
         "windows": "Ctrl+Comma",
         "mac": "Command+Comma",
         "chromeos": "Ctrl+Comma",
         "linux": "Ctrl+Comma"
       },
-      "description": "UV command launcher"
+      "description": "Open/Close Shinkai popup"
     }
   },
   "permissions": ["storage", "contextMenus"],

diff --git a/apps/shinkai-visor/src/components/action-button/action-button.tsx b/apps/shinkai-visor/src/components/action-button/action-button.tsx
@@ -6,6 +6,7 @@ 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';
 import { srcUrlResolver } from '../../helpers/src-url-resolver';
 import { useGlobalActionButtonChromeMessage } from '../../hooks/use-global-action-button-chrome-message';
 import { langMessages, locale } from '../../lang/intl';
@@ -32,25 +33,29 @@ export const ActionButton = () => {
   const togglePopupVisibility = () => {
     sendContentScriptMessage({
       type: ContentScriptMessageType.TogglePopupVisibility,
-      data: !popupVisibility,
     });
   };
   return (
-    <div className="p-2" onClick={() => togglePopupVisibility()}>
+    <div
+      className={cn(
+        'p-1 w-[50px] h-[50px] flex flex-col space-y-1 items-center justify-center',
+        !popupVisibility && 'animate-pulse'
+      )}
+      onClick={() => togglePopupVisibility()}
+    >
       <motion.div
         animate={{
           rotate: popupVisibility ? -22 : 0,
         }}
-        className="block"
+        className="w-4 h-4"
       >
         <img
           alt="shinkai-app-logo"
-          className={`w-full h-full ${
-            popupVisibility ? '-rotate-[22deg]' : 'animate-pulse'
-          }`}
+          className={"w-full h-full"}
           src={srcUrlResolver(shinkaiLogo)}
         />
       </motion.div>
+      <span className="text-xs text-center">⌘ + ,</span>
     </div>
   );
 };
@@ -63,11 +68,11 @@ root.render(
     <Provider store={store}>
       <PersistGate loading={null} persistor={storePersistor}>
         <IntlProvider locale={locale} messages={langMessages}>
-          <div className="fixed w-[50px] h-[50px] top-32 right-2 overflow-hidden bg-background z-[1500000000] border-solid border-primary border-2 rounded-lg">
+          <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>
-  </React.StrictMode>,
+  </React.StrictMode>
 );
diff --git a/apps/shinkai-visor/src/components/add-agent/add-agent.tsx b/apps/shinkai-visor/src/components/add-agent/add-agent.tsx
@@ -55,11 +55,9 @@ export const AddAgent = () => {
   const {
     mutateAsync: createAgent,
     isLoading,
-    isError,
-    error,
   } = useCreateAgent({
-    onSuccess: () => {
-      history.replace('/agents');
+    onSuccess: (data) => {
+      history.replace({ pathname: '/inboxes/create-job' });
     },
   });
 

diff --git a/apps/shinkai-visor/src/components/add-node/add-node.tsx b/apps/shinkai-visor/src/components/add-node/add-node.tsx
@@ -28,15 +28,15 @@ import {
 import { Input } from '../ui/input';
 
 const formSchema = z.object({
-  registrationCode: z.string().nonempty(),
+  registrationCode: z.string().optional(),
   registrationName: z.string().nonempty(),
   permissionType: z.enum(['admin']),
   identityType: z.enum(['device']),
   profile: z.enum(['main']),
   nodeAddress: z.string().url(),
   shinkaiIdentity: z.string().nonempty(),
-  nodeEncryptionPublicKey: z.string().nonempty(),
-  nodeSignaturePublicKey: z.string().nonempty(),
+  nodeEncryptionPublicKey: z.string().optional(),
+  nodeSignaturePublicKey: z.string().optional(),
   profileEncryptionPublicKey: z.string().nonempty(),
   profileSignaturePublicKey: z.string().nonempty(),
   myDeviceEncryptionPublicKey: z.string().nonempty(),
@@ -66,6 +66,9 @@ enum AddNodeSteps {
 export const AddNode = () => {
   const history = useHistory();
   const setAuth = useAuth((state) => state.setAuth);
+  const DEFAULT_NODE_ADDRESS = 'http://127.0.0.1:9550';
+  // TODO: This value should be obtained from node
+  const DEFAULT_SHINKAI_IDENTITY = '@@node1.shinkai';
   const form = useForm<FormType>({
     resolver: zodResolver(formSchema),
     defaultValues: {
@@ -100,8 +103,8 @@ export const AddNode = () => {
           permission_type: values.permissionType,
           node_address: values.nodeAddress,
           shinkai_identity: values.shinkaiIdentity,
-          node_signature_pk: response.data?.identity_public_key ?? values.nodeSignaturePublicKey,
-          node_encryption_pk: response.data?.encryption_public_key ?? values.nodeEncryptionPublicKey,
+          node_signature_pk: response.data?.identity_public_key ?? values.nodeSignaturePublicKey ?? '',
+          node_encryption_pk: response.data?.encryption_public_key ?? values.nodeEncryptionPublicKey ?? '',
           registration_name: values.registrationName,
           my_device_identity_pk: values.myDeviceIdentityPublicKey,
           my_device_identity_sk: values.myDeviceIdentitySharedKey,
@@ -204,15 +207,14 @@ export const AddNode = () => {
   };
 
   const connect = (values: FormType) => {
-    console.log('values', values);
     submitRegistration({
-      registration_code: values.registrationCode,
+      registration_code: values.registrationCode ?? '',
       profile: values.profile,
       identity_type: values.identityType,
       permission_type: values.permissionType,
       node_address: values.nodeAddress,
       shinkai_identity: values.shinkaiIdentity,
-      node_encryption_pk: values.nodeEncryptionPublicKey,
+      node_encryption_pk: values.nodeEncryptionPublicKey ?? '',
       registration_name: values.registrationName,
       my_device_identity_sk: values.myDeviceIdentitySharedKey,
       my_device_encryption_sk: values.myDeviceEncryptionSharedKey,
@@ -245,8 +247,22 @@ export const AddNode = () => {
     );
   }, [form]);
 
+  useEffect(() => {
+    fetch(`${DEFAULT_NODE_ADDRESS}/v1/shinkai_health`)
+      .then((response) => response.json())
+      .then((data) => {
+        if (data.status === 'ok') {
+          form.setValue('nodeAddress', DEFAULT_NODE_ADDRESS);
+          form.setValue('shinkaiIdentity', DEFAULT_SHINKAI_IDENTITY);
+          setCurrentStep(AddNodeSteps.Connect)
+        }
+      })
+      .catch((error) => console.error('error polling', error));
+  }, [form]);
+
   return (
     <div className="h-full flex flex-col space-y-3">
+      <span className='text-xl'>Connect</span>
       <div className="h-full flex flex-col grow place-content-center">
         {currentStep === AddNodeSteps.ScanQR && (
           <div className="h-full flex flex-col space-y-3 justify-between">

diff --git a/apps/shinkai-visor/src/components/create-job/create-job.tsx b/apps/shinkai-visor/src/components/create-job/create-job.tsx
@@ -66,7 +66,7 @@ export const CreateJob = () => {
     if (!auth) return;
     let content = values.content;
     if (query.has('context')) {
-      content = `${values.content} - ${query.get('context')}`;
+      content = `${values.content} - \`\`\`${query.get('context')}\`\`\``;
     }
     createJob({
       shinkaiIdentity: auth.shinkai_identity,

diff --git a/apps/shinkai-visor/src/components/inbox-input/inbox-input.tsx b/apps/shinkai-visor/src/components/inbox-input/inbox-input.tsx
@@ -56,6 +56,7 @@ export const InboxInput = (props: InboxInputProps) => {
               <FormItem>
                 <FormControl>
                   <Input
+                    disabled={props.loading}
                     placeholder={intl.formatMessage({
                       id: 'tmwtd',
                     })}

diff --git a/apps/shinkai-visor/src/components/inbox/inbox.tsx b/apps/shinkai-visor/src/components/inbox/inbox.tsx
@@ -97,8 +97,8 @@ export const Inbox = () => {
   const getAvatar = (message: ShinkaiMessage) => {
     return isLocalMessage(
       message,
-      auth?.profile || '',
-      auth?.registration_name || ''
+      auth?.shinkai_identity || '',
+      auth?.profile || ''
     )
       ? 'https://ui-avatars.com/api/?name=Me&background=FE6162&color=fff'
       : 'https://ui-avatars.com/api/?name=O&background=363636&color=fff';
@@ -174,28 +174,14 @@ export const Inbox = () => {
             ))}
           {isChatConversationSuccess &&
             data?.pages?.map((group, index) => (
-              // <div
-              //   className={`flex w-max max-w-[75%] flex-col gap-2 rounded-b-lg px-3 py-2 text-sm bg-muted ${
-              //     isLocalMessage(
-              //       message,
-              //       setup.data?.nodeData?.shinkaiIdentity || '',
-              //       setup.data?.nodeData.profile || '',
-              //     )
-              //       ? 'ml-auto bg-primary text-primary-foreground rounded-l-lg'
-              //       : 'rounded-r-lg'
-              //   }`}
-              //   key={message.external_metadata?.scheduled_time}
-              // >
-              //   {getMessageContent(message)}
-              // </div>
               <Fragment key={index}>
                 {Object.entries(groupMessagesByDate(group)).map(
                   ([date, messages]) => {
                     return (
                       <div key={date}>
                         <div
                           className={cn(
-                            'relative z-10 m-auto flex w-[140px] items-center justify-center rounded-xl bg-slate-900 shadow-lg transition-opacity',
+                            'relative z-10 m-auto flex w-[140px] items-center justify-center rounded-xl bg-white shadow-lg transition-opacity',
                             true && 'sticky top-5'
                           )}
                         >

diff --git a/apps/shinkai-visor/src/components/inboxes/inboxes.tsx b/apps/shinkai-visor/src/components/inboxes/inboxes.tsx
@@ -1,9 +1,15 @@
 import './inboxes.css';
 
 import { useGetInboxes } from '@shinkai_network/shinkai-node-state/lib/queries/getInboxes/useGetInboxes';
+import { Bot } from 'lucide-react';
+import { Fragment } from 'react';
+import { FormattedMessage } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
+import logo from '../../../src/assets/icons/shinkai-min.svg';
+import { srcUrlResolver } from '../../helpers/src-url-resolver';
 import { useAuth } from '../../store/auth/auth';
+import { Button } from '../ui/button';
 import { ScrollArea } from '../ui/scroll-area';
 import { Separator } from '../ui/separator';
 
@@ -29,19 +35,38 @@ export const Inboxes = () => {
 
   return (
     <div className="h-full flex flex-col space-y-3 justify-between overflow-hidden">
-      <ScrollArea>
-        {inboxIds?.map((inboxId) => (
-          <div key={inboxId}>
-            <div
-              className="text-ellipsis overflow-hidden whitespace-nowrap"
-              onClick={() => navigateToInbox(inboxId)}
-            >
-              {inboxId}
-            </div>
-            <Separator className="my-2" />
+      {!inboxIds?.length ? (
+        <div className="grow flex flex-col space-y-3 items-center justify-center">
+          <div className="grid place-content-center">
+            <img
+              alt="shinkai logo"
+              className="animate-spin-slow h-20 w-20"
+              data-cy="shinkai-logo"
+              src={srcUrlResolver(logo)}
+            />
           </div>
-        ))}
-      </ScrollArea>
+          <p className="text-lg">
+            <FormattedMessage id="ask-to-shinkai-ai" />
+          </p>
+          <p className="text-sm text-center">
+            <FormattedMessage id="ask-to-shinkai-ai-example" />
+          </p>
+
+          <Button className="w-full" onClick={() => history.push('/agents/add')}>
+            <Bot className="w-4 h-4"/>
+            <FormattedMessage id="add-agent" />
+          </Button>
+        </div>
+      ) : (
+        <ScrollArea className="[&>div>div]:!block">
+          {inboxIds?.map((inboxId) => (
+            <Fragment key={inboxId}>
+              <Button className="text-ellipsis overflow-hidden whitespace-nowrap" onClick={() => navigateToInbox(inboxId)} variant="link">{decodeURIComponent(inboxId)}</Button>
+              <Separator className="my-2" />
+            </Fragment>
+          ))}
+        </ScrollArea>
+      )}
     </div>
   );
 };
diff --git a/apps/shinkai-visor/src/components/nav/nav.tsx b/apps/shinkai-visor/src/components/nav/nav.tsx
@@ -50,10 +50,10 @@ export default function NavBar() {
         history.replace('/inboxes');
         break;
       case MenuOption.CreateInbox:
-          history.replace('/inboxes/create');
+          history.replace('/inboxes/create-inbox');
           break;
       case MenuOption.CreateJob:
-        history.replace('/jobs/create');
+        history.replace('/inboxes/create-job');
         break;
       case MenuOption.Agents:
         history.replace('/agents');

diff --git a/apps/shinkai-visor/src/components/popup-routing/popup-routing.tsx b/apps/shinkai-visor/src/components/popup-routing/popup-routing.tsx
@@ -58,9 +58,12 @@ export const PopupRouting = () => {
             <WithNav>
               <Route path="/inboxes">
                 <Switch>
-                  <Route path="/inboxes/create">
+                  <Route path="/inboxes/create-inbox">
                     <CreateInbox></CreateInbox>
                   </Route>
+                  <Route path="/inboxes/create-job">
+                    <CreateJob></CreateJob>
+                  </Route>
                   <Route path="/inboxes/:inboxId">
                     <Inbox></Inbox>
                   </Route>
@@ -80,14 +83,6 @@ export const PopupRouting = () => {
                   </Route>
                 </Switch>
               </Route>
-
-              <Route path="/jobs">
-                <Switch>
-                  <Route path="/jobs/create">
-                    <CreateJob></CreateJob>
-                  </Route>
-                </Switch>
-              </Route>
             </WithNav>
             <Route path="*">
               <NotFound></NotFound>