- refactor: page header

dcSpark · Nov 2, 2023 · bc799f7 · bc799f7
1 parent 1c9834f
commit bc799f7
Show file tree

Hide file tree

Showing 13 changed files with 136 additions and 118 deletions.
diff --git a/apps/shinkai-visor/src/components/add-agent/add-agent.tsx b/apps/shinkai-visor/src/components/add-agent/add-agent.tsx
@@ -8,6 +8,7 @@ import { z } from 'zod';
 
 import { useAuth } from '../../store/auth/auth';
 import { useUIContainer } from '../../store/ui-container/ui-container';
+import { Header } from '../header/header';
 import { Button } from '../ui/button';
 import {
   Form,
@@ -101,12 +102,10 @@ export const AddAgent = () => {
   };
   return (
     <div className="h-full flex flex-col space-y-3">
-      <div className="flex flex-row space-x-1 items-center">
-        <Bot className="h-4 w-4" />
-        <h1 className="font-semibold">
-          <FormattedMessage id="add-agent"></FormattedMessage>
-        </h1>
-      </div>
+      <Header
+        icon={<Bot />}
+        title={<FormattedMessage id="add-agent"></FormattedMessage>}
+      />
       <Form {...form}>
         <form
           className="h-full flex flex-col space-y-3 justify-between"

diff --git a/apps/shinkai-visor/src/components/agents/agents.tsx b/apps/shinkai-visor/src/components/agents/agents.tsx
@@ -5,6 +5,7 @@ import { FormattedMessage } from 'react-intl';
 
 import { useAuth } from '../../store/auth/auth';
 import { EmptyAgents } from '../empty-agents/empty-agents';
+import { Header } from '../header/header';
 import { Button } from '../ui/button';
 import { ScrollArea } from '../ui/scroll-area';
 
@@ -20,27 +21,27 @@ export const Agents = () => {
     profile_encryption_sk: auth?.profile_encryption_sk ?? '',
     profile_identity_sk: auth?.profile_identity_sk ?? '',
   });
-  return !agents?.length ? (
-    <div className="h-full flex flex-col justify-center">
-      <EmptyAgents></EmptyAgents>
-    </div>
-  ) : (
+  return (
     <div className="flex flex-col space-y-3">
-      <div className="flex flex-row space-x-1 items-center">
-        <Bot className="h-4 w-4" />
-        <h1 className="font-semibold">
-          <FormattedMessage id="agent.other"></FormattedMessage>
-        </h1>
-      </div>
-      <ScrollArea className="[&>div>div]:!block h-full flex flex-col space-y-3 justify-between">
-        {agents?.map((agent) => (
-          <Fragment key={agent.id}>
-            <Button className="w-full" variant="tertiary">
-              <span className="w-full truncate text-start">{agent.id}</span>
-            </Button>
-          </Fragment>
-        ))}
-      </ScrollArea>
+      <Header
+        icon={<Bot />}
+        title={<FormattedMessage id="agent.other"></FormattedMessage>}
+      />
+      {!agents?.length ? (
+        <div className="h-full flex flex-col justify-center">
+          <EmptyAgents></EmptyAgents>
+        </div>
+      ) : (
+        <ScrollArea className="[&>div>div]:!block h-full flex flex-col space-y-3 justify-between">
+          {agents?.map((agent) => (
+            <Fragment key={agent.id}>
+              <Button className="w-full" variant="tertiary">
+                <span className="w-full truncate text-start">{agent.id}</span>
+              </Button>
+            </Fragment>
+          ))}
+        </ScrollArea>
+      )}
     </div>
   );
 };
diff --git a/apps/shinkai-visor/src/components/connect-method-quick-start/connect-method-quick-start.tsx b/apps/shinkai-visor/src/components/connect-method-quick-start/connect-method-quick-start.tsx
@@ -13,6 +13,7 @@ import {
 } from '../../helpers/encryption-keys';
 import { SetupData, useAuth } from '../../store/auth/auth';
 import { ConnectionMethodOption } from '../connection-method-option/connection-method-option';
+import { Header } from '../header/header';
 import { Button } from '../ui/button';
 import ErrorMessage from '../ui/error-message';
 import {
@@ -37,7 +38,7 @@ export const ConnectMethodQuickStart = () => {
   const history = useHistory();
   const setAuth = useAuth((state) => state.setAuth);
   const DEFAULT_NODE_ADDRESS = 'http://127.0.0.1:9550';
-  const DEFAULT_SHINKAI_IDENTITY = '@@localhost.shinkai'
+  const DEFAULT_SHINKAI_IDENTITY = '@@localhost.shinkai';
   const [encryptionKeys, setEncryptedKeys] = useState<Encryptionkeys | null>(
     null
   );
@@ -101,18 +102,15 @@ export const ConnectMethodQuickStart = () => {
 
   return (
     <div className="h-full flex flex-col space-y-3">
-      <div className="grow-0 flex flex-col space-y-1">
-        <div className="flex flex-row space-x-1 items-center">
-          <Zap className="w-4 h-4"/>
-          <span className="font-semibold text-sm">
-            <FormattedMessage id="quick-connection-connection-method-title" />
-          </span>
-        </div>
-        <span className="text-xs">
+      <Header
+        description={
           <FormattedMessage id="quick-connection-connection-method-description" />
-        </span>
-      </div>
-
+        }
+        icon={<Zap />}
+        title={
+          <FormattedMessage id="quick-connection-connection-method-title" />
+        }
+      />
       <Form {...form}>
         <form
           className="flex flex-col space-y-2 justify-between"

diff --git a/...or/src/components/connect-method-restore-connection/connect-method-restore-connection.tsx b/...or/src/components/connect-method-restore-connection/connect-method-restore-connection.tsx
@@ -8,6 +8,7 @@ import { useHistory } from 'react-router';
 import { z } from 'zod';
 
 import { useAuth } from '../../store/auth/auth';
+import { Header } from '../header/header';
 import { Button } from '../ui/button';
 import ErrorMessage from '../ui/error-message';
 import {
@@ -65,13 +66,16 @@ export const ConnectMethodRestoreConnection = () => {
   };
   const restore = async (values: FormType) => {
     try {
-      const decryptedValue = await decryptMessageWithPassphrase(values.encryptedConnection, values.passphrase);
+      const decryptedValue = await decryptMessageWithPassphrase(
+        values.encryptedConnection,
+        values.passphrase
+      );
       if (decryptedValue) {
         const decryptedSetupData = JSON.parse(decryptedValue);
-        
+
         setAuth(decryptedSetupData);
         // TODO: Add logic to test if setup data is valid to create an authenticated connection with Shinkai Node
-         history.replace('/inboxes');
+        history.replace('/inboxes');
       }
     } catch (_) {
       setError(true);
@@ -83,17 +87,15 @@ export const ConnectMethodRestoreConnection = () => {
   };
   return (
     <div className="h-full flex flex-col space-y-3">
-      <div className="grow-0 flex flex-col space-y-1">
-        <div className="flex flex-row space-x-1 items-center">
-          <FileKey className="h-4 w-4"/>
-          <h1 className="font-semibold text-sm">
-            <FormattedMessage id="restore-connection-connection-method-title" />
-          </h1>
-        </div>
-        <span className="text-xs">
+      <Header
+        description={
           <FormattedMessage id="restore-connection-connection-method-description" />
-        </span>
-      </div>
+        }
+        icon={<FileKey />}
+        title={
+          <FormattedMessage id="restore-connection-connection-method-title" />
+        }
+      />
 
       <Form {...form}>
         <form
@@ -117,15 +119,17 @@ export const ConnectMethodRestoreConnection = () => {
                           <div className="flex flex-row justify-center items-center rounded-lg border border-dashed w-full h-[100px] space-x-4">
                             <div className="flex flex-row">
                               <FileKey className="w-4 h-4 space-x-1 mr-1" />
-                              <span className="font-semibold">{encryptedConnectionFile.name}</span>
+                              <span className="font-semibold">
+                                {encryptedConnectionFile.name}
+                              </span>
                             </div>
                             <Button
-                                className="h-6 w-6"
-                                onClick={() => removeConnectionFile()}
-                                size="icon"
-                              >
-                                <Trash className="w-4 h-4" />
-                              </Button>
+                              className="h-6 w-6"
+                              onClick={() => removeConnectionFile()}
+                              size="icon"
+                            >
+                              <Trash className="w-4 h-4" />
+                            </Button>
                           </div>
                         ) : (
                           <label
@@ -157,7 +161,7 @@ export const ConnectMethodRestoreConnection = () => {
                         )}
                       </div>
                       {encryptedConnectionFile && (
-                      <Input {...field} className="truncate" />
+                        <Input {...field} className="truncate" />
                       )}
                     </div>
                   </FormControl>

diff --git a/apps/shinkai-visor/src/components/connection-method-option/connection-method-option.tsx b/apps/shinkai-visor/src/components/connection-method-option/connection-method-option.tsx
@@ -6,6 +6,7 @@ export type ConnectionMethodOptionProps = {
   description: ReactNode;
   onClick?: () => void;
 };
+
 export const ConnectionMethodOption = ({
   icon,
   title,

diff --git a/apps/shinkai-visor/src/components/create-inbox/create-inbox.tsx b/apps/shinkai-visor/src/components/create-inbox/create-inbox.tsx
@@ -8,6 +8,7 @@ import { useHistory } from 'react-router-dom';
 import { z } from 'zod';
 
 import { useAuth } from '../../store/auth/auth';
+import { Header } from '../header/header';
 import { Button } from '../ui/button';
 import {
   Form,
@@ -68,12 +69,10 @@ export const CreateInbox = () => {
 
   return (
     <div className="h-full flex flex-col space-y-3">
-      <div className="flex flex-row space-x-1 items-center">
-        <MessageCircle className="h-4 w-4" />
-        <h1 className="font-semibold">
-          <FormattedMessage id="create-inbox"></FormattedMessage>
-        </h1>
-      </div>
+      <Header
+        icon={<MessageCircle />}
+        title={<FormattedMessage id="create-inbox"></FormattedMessage>}
+      ></Header>
       <Form {...form}>
         <form
           className="h-full flex flex-col space-y-2 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
@@ -13,6 +13,7 @@ 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 { Header } from '../header/header';
 import { Button } from '../ui/button';
 import {
   Form,
@@ -101,12 +102,10 @@ export const CreateJob = () => {
 
   return (
     <div className="h-full flex flex-col space-y-3">
-      <div className="flex flex-row space-x-1 items-center">
-        <Workflow className="h-4 w-4" />
-        <h1 className="font-semibold">
-          <FormattedMessage id="create-job"></FormattedMessage>
-        </h1>
-      </div>
+      <Header
+        icon={<Workflow />}
+        title={<FormattedMessage id="create-job"></FormattedMessage>}
+      />
       <Form {...form}>
         <form
           className="h-full flex flex-col space-y-2 justify-between"

diff --git a/apps/shinkai-visor/src/components/export-connection/export-connection.tsx b/apps/shinkai-visor/src/components/export-connection/export-connection.tsx
@@ -1,12 +1,13 @@
 import { zodResolver } from '@hookform/resolvers/zod';
 import { encryptMessageWithPassphrase } from '@shinkai_network/shinkai-message-ts/cryptography';
 import { Download, FileKey } from 'lucide-react';
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { FormattedMessage, useIntl } from 'react-intl';
 import { z } from 'zod';
 
 import { useAuth } from '../../store/auth/auth';
+import { Header } from '../header/header';
 import { Button } from '../ui/button';
 import {
   Form,
@@ -21,19 +22,19 @@ import { Input } from '../ui/input';
 export const ExportConnection = () => {
   const intl = useIntl();
   const formSchema = z
-  .object({
-    passphrase: z.string().min(8),
-    confirmPassphrase: z.string().min(8),
-  })
-  .superRefine(({ passphrase, confirmPassphrase }, ctx) => {
-    if (passphrase !== confirmPassphrase) {
-      ctx.addIssue({
-        code: 'custom',
-        message: intl.formatMessage({ id: 'passphrases-dont-match'}),
-        path: ['confirmPassphrase'],
-      });
-    }
-  });
+    .object({
+      passphrase: z.string().min(8),
+      confirmPassphrase: z.string().min(8),
+    })
+    .superRefine(({ passphrase, confirmPassphrase }, ctx) => {
+      if (passphrase !== confirmPassphrase) {
+        ctx.addIssue({
+          code: 'custom',
+          message: intl.formatMessage({ id: 'passphrases-dont-match' }),
+          path: ['confirmPassphrase'],
+        });
+      }
+    });
   type FormSchemaType = z.infer<typeof formSchema>;
   const auth = useAuth((state) => state.auth);
   const form = useForm<FormSchemaType>({
@@ -52,11 +53,14 @@ export const ExportConnection = () => {
   const exportConnection = async (values: FormSchemaType): Promise<void> => {
     // TODO: Convert to a common format shared by visor, app and tray
     const parsedSetupData = JSON.stringify(auth);
-    const encryptedSetupData = await encryptMessageWithPassphrase(parsedSetupData, values.passphrase);
+    const encryptedSetupData = await encryptMessageWithPassphrase(
+      parsedSetupData,
+      values.passphrase
+    );
     setEncryptedSetupData(encryptedSetupData);
   };
   const download = (): void => {
-    const link = document.createElement("a");
+    const link = document.createElement('a');
     const content = encryptedSetupData;
     const file = new Blob([content], { type: 'text/plain' });
     link.href = URL.createObjectURL(file);
@@ -66,12 +70,10 @@ export const ExportConnection = () => {
   };
   return (
     <div className="h-full flex flex-col space-y-3">
-      <div className="flex flex-row space-x-1 items-center">
-        <FileKey className="h-4 w-4" />
-        <h1 className="font-semibold">
-          <FormattedMessage id="export-connection"></FormattedMessage>
-        </h1>
-      </div>
+      <Header
+        icon={<FileKey />}
+        title={<FormattedMessage id="export-connection"></FormattedMessage>}
+      />
       <div className="grow flex flex-col space-y-2">
         <Form {...form}>
           <form
@@ -128,8 +130,12 @@ export const ExportConnection = () => {
               </span>
             </div>
             <div className="w-full flex flex-row space-x-1">
-              <div className="grow cursor-pointer"  onClick={() => download()}>
-                <Input className="truncate cursor-pointer" readOnly value={encryptedSetupData}/>
+              <div className="grow cursor-pointer" onClick={() => download()}>
+                <Input
+                  className="truncate cursor-pointer"
+                  readOnly
+                  value={encryptedSetupData}
+                />
               </div>
               <Button className="" onClick={() => download()}>
                 <Download className="h-4 w-4" />

diff --git a/apps/shinkai-visor/src/components/header/header.tsx b/apps/shinkai-visor/src/components/header/header.tsx
@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+
+export type HeaderProps = {
+  icon: ReactNode;
+  title: ReactNode | string;
+  description?: ReactNode | string;
+};
+
+export const Header = ({ icon, title, description }: HeaderProps) => {
+  return (
+    <div className="flex flex-col space-y-1">
+      <div className="flex flex-row space-x-1 items-center">
+        <span className="shrink-0">
+          {icon}
+        </span>
+        <div className="font-semibold text-lg">{title}</div>
+      </div>
+      {description && <span className="text-xs">{description}</span>}
+    </div>
+  );
+};
-Original file line number
+Diff line change
@@ Expand Up / @@ -6,6 +6,7 @@ export type ConnectionMethodOptionProps = { @@
       description: ReactNode;
       onClick?: () => void;
     };
     export const ConnectionMethodOption = ({
       icon,
       title,
@@ Expand Down @@