- fix: several fixes while testing whole workflow (#48)

* - fix: added refetch to messages * - fix: fixed send message to inbox * - fix: fixed nav heading position * - fix: fixed agents id alignment * - fix: added empty agents * - fix: added missing titles * - fix: form structure * - fix: removed unused component * - fix: removed unused component * - improve: ux when send messages to inbox or jobs * - improve: typification of shinkai name for agents * - fix: removed unused references * - fix: removed unused reference * Revert "- improve: typification of shinkai name for agents" This reverts commit d9812e6.
dcSpark · Oct 18, 2023 · f118db3 · f118db3
1 parent c4cc421
commit f118db3
Show file tree

Hide file tree

Showing 19 changed files with 275 additions and 357 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
@@ -100,7 +100,10 @@ export const AddAgent = () => {
     });
   };
   return (
-    <div className="h-full p-1">
+    <div className="h-full flex flex-col">
+      <h1 className="font-semibold mb-2">
+        <FormattedMessage id="add-agent"></FormattedMessage>
+      </h1>
       <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
@@ -1,33 +1,39 @@
-import { useAgents } from "@shinkai_network/shinkai-node-state/lib/queries/getAgents/useGetAgents";
-import { Fragment } from "react";
+import { useAgents } from '@shinkai_network/shinkai-node-state/lib/queries/getAgents/useGetAgents';
+import { Fragment } from 'react';
+import { FormattedMessage } from 'react-intl';
 
 import { useAuth } from '../../store/auth/auth';
+import { EmptyAgents } from '../empty-agents/empty-agents';
+import { Button } from '../ui/button';
 import { ScrollArea } from '../ui/scroll-area';
-import { Separator } from '../ui/separator';
 
 export const Agents = () => {
   const auth = useAuth((state) => state.auth);
   const { agents } = useAgents({
-    sender: auth?.shinkai_identity ?? "",
+    sender: auth?.shinkai_identity ?? '',
     senderSubidentity: `${auth?.profile}`,
-    shinkaiIdentity: auth?.shinkai_identity ?? "",
-    my_device_encryption_sk: auth?.profile_encryption_sk ?? "",
-    my_device_identity_sk: auth?.profile_identity_sk ?? "",
-    node_encryption_pk: auth?.node_encryption_pk ?? "",
-    profile_encryption_sk: auth?.profile_encryption_sk ?? "",
-    profile_identity_sk: auth?.profile_identity_sk ?? "",
+    shinkaiIdentity: auth?.shinkai_identity ?? '',
+    my_device_encryption_sk: auth?.profile_encryption_sk ?? '',
+    my_device_identity_sk: auth?.profile_identity_sk ?? '',
+    node_encryption_pk: auth?.node_encryption_pk ?? '',
+    profile_encryption_sk: auth?.profile_encryption_sk ?? '',
+    profile_identity_sk: auth?.profile_identity_sk ?? '',
   });
-  return (
-    <div className="[&>div>div]:!block h-full flex flex-col space-y-3 justify-between">
-      <ScrollArea>
+  return !agents?.length ? (
+    <div className="h-full flex flex-col justify-center">
+      <EmptyAgents></EmptyAgents>
+    </div>
+  ) : (
+    <div className="flex flex-col">
+      <h1 className="font-semibold mb-2">
+        <FormattedMessage id="agent.other"></FormattedMessage>
+      </h1>
+      <ScrollArea className="[&>div>div]:!block h-full flex flex-col space-y-3 justify-between">
         {agents?.map((agent) => (
           <Fragment key={agent.id}>
-            <p
-              className="w-full truncate overflow-hidden"
-            >
-              {agent.id}
-            </p>
-            <Separator className="my-2" />
+            <Button className="w-full" variant="tertiary">
+              <span className="w-full truncate text-start">{agent.id}</span>
+            </Button>
           </Fragment>
         ))}
       </ScrollArea>

diff --git a/apps/shinkai-visor/src/components/create-inbox/create-inbox.tsx b/apps/shinkai-visor/src/components/create-inbox/create-inbox.tsx
@@ -1,16 +1,24 @@
 import { zodResolver } from '@hookform/resolvers/zod';
-import { useCreateChat } from "@shinkai_network/shinkai-node-state/lib/mutations/createChat/useCreateChat";
+import { useCreateChat } from '@shinkai_network/shinkai-node-state/lib/mutations/createChat/useCreateChat';
 import { Loader2 } from 'lucide-react';
 import { useEffect } from 'react';
 import { useForm } from 'react-hook-form';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage, useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 import { z } from 'zod';
 
 import { useAuth } from '../../store/auth/auth';
 import { Button } from '../ui/button';
-import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '../ui/form';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '../ui/form';
 import { Input } from '../ui/input';
+import { Textarea } from '../ui/textarea';
 
 const formSchema = z.object({
   receiverIdentity: z.string().nonempty(),
@@ -22,7 +30,7 @@ type FormSchemaType = z.infer<typeof formSchema>;
 export const CreateInbox = () => {
   const history = useHistory();
   const auth = useAuth((state) => state.auth);
-
+  const intl = useIntl();
   const form = useForm<FormSchemaType>({
     resolver: zodResolver(formSchema),
     defaultValues: {
@@ -32,19 +40,17 @@ export const CreateInbox = () => {
   });
   const { isLoading, mutateAsync: createChat } = useCreateChat({
     onSuccess: (data) => {
-      history.replace(
-        `/inboxes/${encodeURIComponent(data.inboxId)}`
-      );
+      history.replace(`/inboxes/${encodeURIComponent(data.inboxId)}`);
     },
   });
   const submit = (values: FormSchemaType) => {
     if (!auth) return;
-    const [receiver, ...rest] = values.receiverIdentity.split("/");
+    const [receiver, ...rest] = values.receiverIdentity.split('/');
     createChat({
       sender: auth.shinkai_identity,
       senderSubidentity: `${auth.profile}/device/${auth.registration_name}`,
       receiver,
-      receiverSubidentity: rest.join("/"),
+      receiverSubidentity: rest.join('/'),
       message: values.message,
       my_device_encryption_sk: auth.my_device_encryption_sk,
       my_device_identity_sk: auth.my_device_identity_sk,
@@ -61,53 +67,65 @@ export const CreateInbox = () => {
   }, [auth, form]);
 
   return (
-    <Form {...form}>
-      <form
-        className="p-1 h-full flex flex-col space-y-2 justify-between"
-        onSubmit={form.handleSubmit(submit)}
-      >
-        <div className="grow flex flex-col space-y-2">
-        <FormField
-            control={form.control}
-            name="receiverIdentity"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>
-                  <FormattedMessage id="message-receiver" />
-                </FormLabel>
-                <FormControl>
-                  <Input {...field} />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-
-          <FormField
-            control={form.control}
-            name="message"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>
-                  <FormattedMessage id="message.one" />
-                </FormLabel>
-                <FormControl>
-                  <Input {...field} />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-        </div>
-        <Button
-          className="w-full"
-          disabled={!form.formState.isValid || isLoading}
-          type="submit"
+    <div className="h-full flex flex-col">
+      <h1 className="font-semibold mb-2">
+        <FormattedMessage id="create-inbox"></FormattedMessage>
+      </h1>
+      <Form {...form}>
+        <form
+          className="p-1 h-full flex flex-col space-y-2 justify-between"
+          onSubmit={form.handleSubmit(submit)}
         >
-          {isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
-          <FormattedMessage id="create-inbox" />
-        </Button>
-      </form>
-    </Form>
+          <div className="grow flex flex-col space-y-2">
+            <FormField
+              control={form.control}
+              name="receiverIdentity"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>
+                    <FormattedMessage id="message-receiver" />
+                  </FormLabel>
+                  <FormControl>
+                    <Input {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="message"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>
+                    <FormattedMessage id="message.one" />
+                  </FormLabel>
+                  <FormControl>
+                    <Textarea
+                      autoFocus
+                      className="resize-none border-white"
+                      placeholder={intl.formatMessage({
+                        id: 'tmwtd',
+                      })}
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </div>
+          <Button
+            className="w-full"
+            disabled={!form.formState.isValid || isLoading}
+            type="submit"
+          >
+            {isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+            <FormattedMessage id="create-inbox" />
+          </Button>
+        </form>
+      </Form>
+    </div>
   );
 };