From ecff789f5b07f9d39abc9461f77169d6bc754505 Mon Sep 17 00:00:00 2001
From: Paul Ccari <46382556+paulclindo@users.noreply.github.com>
Date: Wed, 30 Oct 2024 19:37:43 -0500
Subject: [PATCH] Misc fixes (#516)

* fix: textarea input

* fix: create/update drawer modal ui

* fix: tooltip in message inbox to show full title

* fix: implement edit/remove when search prompts

* fix: ui ollama models
---
 .../components/chat/conversation-footer.tsx   |  13 +-
 .../context/prompt-selection-context.tsx      |  50 +++-
 .../components/ollama-models-repository.tsx   |  15 +-
 .../shinkai-desktop/src/pages/chat/layout.tsx | 238 +++++++++---------
 .../src/components/chat/chat-input-area.tsx   |  83 +++---
 .../src/components/chat/chat-input.tsx        |   6 +-
 .../shinkai-ui/src/hooks/use-combined-refs.ts |  22 ++
 7 files changed, 254 insertions(+), 173 deletions(-)
 create mode 100644 libs/shinkai-ui/src/hooks/use-combined-refs.ts

diff --git a/apps/shinkai-desktop/src/components/chat/conversation-footer.tsx b/apps/shinkai-desktop/src/components/chat/conversation-footer.tsx
index b6ae2fe25..6ca0d2fee 100644
--- a/apps/shinkai-desktop/src/components/chat/conversation-footer.tsx
+++ b/apps/shinkai-desktop/src/components/chat/conversation-footer.tsx
@@ -56,7 +56,7 @@ import { cn } from '@shinkai_network/shinkai-ui/utils';
 import { partial } from 'filesize';
 import { AnimatePresence, motion } from 'framer-motion';
 import { Paperclip, X, XIcon } from 'lucide-react';
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { useDropzone } from 'react-dropzone';
 import { useForm, useWatch } from 'react-hook-form';
 import { useLocation, useNavigate, useParams } from 'react-router-dom';
@@ -571,6 +571,7 @@ function ConversationChatFooter({ inboxId }: { inboxId: string }) {
     (state) => state.setWorkflowSelected,
   );
 
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
   const auth = useAuth((state) => state.auth);
   const { captureAnalyticEvent } = useAnalytics();
 
@@ -732,6 +733,11 @@ function ConversationChatFooter({ inboxId }: { inboxId: string }) {
   useEffect(() => {
     if (promptSelected) {
       chatForm.setValue('message', promptSelected.prompt);
+      setTimeout(() => {
+        if (!textareaRef.current) return;
+        textareaRef.current.scrollTop = textareaRef.current.scrollHeight;
+        textareaRef.current.focus();
+      }, 10);
     }
   }, [chatForm, promptSelected]);
 
@@ -744,9 +750,7 @@ function ConversationChatFooter({ inboxId }: { inboxId: string }) {
     <div className="flex flex-col justify-start">
       <div className="relative flex items-start gap-2 p-2 pb-3">
         <StopGeneratingButton
-          shouldStopGenerating={
-            hasProviderEnableStreaming && !!isLoadingMessage
-          }
+          shouldStopGenerating={hasProviderEnableStreaming && isLoadingMessage}
         />
         <Form {...chatForm}>
           <FormField
@@ -832,6 +836,7 @@ function ConversationChatFooter({ inboxId }: { inboxId: string }) {
                       }
                       onChange={field.onChange}
                       onSubmit={chatForm.handleSubmit(onSubmit)}
+                      ref={textareaRef}
                       topAddons={
                         <>
                           {workflowSelected && (
diff --git a/apps/shinkai-desktop/src/components/prompt/context/prompt-selection-context.tsx b/apps/shinkai-desktop/src/components/prompt/context/prompt-selection-context.tsx
index 8c0dba752..9c84bf804 100644
--- a/apps/shinkai-desktop/src/components/prompt/context/prompt-selection-context.tsx
+++ b/apps/shinkai-desktop/src/components/prompt/context/prompt-selection-context.tsx
@@ -28,7 +28,6 @@ import {
   Textarea,
   TextField,
 } from '@shinkai_network/shinkai-ui';
-import { formatText } from '@shinkai_network/shinkai-ui/helpers';
 import { cn } from '@shinkai_network/shinkai-ui/utils';
 import {
   Edit3Icon,
@@ -223,22 +222,47 @@ const PromptSearchDrawer = () => {
             {searchQuery &&
               isSearchQuerySynced &&
               searchPromptList?.map((prompt) => (
-                <button
+                <div
                   className={cn(
-                    'flex w-full flex-col gap-1 rounded-sm px-3 py-2 text-left text-sm hover:bg-gray-300',
+                    'group relative flex min-h-[40px] w-full flex-col gap-1 rounded-sm px-3 py-2.5 pr-8 text-left text-sm hover:bg-gray-300',
                   )}
                   key={prompt.name}
                   onClick={() => {
                     setPromptSelected(prompt);
                     setPromptSelectionDrawerOpen(false);
                   }}
-                  type="button"
+                  role="button"
+                  tabIndex={0}
                 >
-                  <span className="text-sm font-medium">
-                    {formatText(prompt.name)}{' '}
-                  </span>
-                  <p className="text-gray-80 text-sm">{prompt.name}</p>
-                </button>
+                  <div className="absolute right-1 top-1 flex translate-x-[150%] items-center gap-0.5 transition duration-200 group-hover:translate-x-0">
+                    <button
+                      className="text-gray-80 rounded-full p-2 transition-colors hover:bg-gray-400 hover:text-white"
+                      onClick={(event) => {
+                        event.stopPropagation();
+                        setSelectedPromptEdit(prompt);
+                      }}
+                      type="button"
+                    >
+                      <Edit3Icon className="h-4 w-4" />
+                    </button>
+
+                    <button
+                      className="text-gray-80 rounded-full p-2 transition-colors hover:bg-gray-400 hover:text-white"
+                      onClick={async (event) => {
+                        event.stopPropagation();
+                        await removePrompt({
+                          nodeAddress: auth?.node_address ?? '',
+                          token: auth?.api_v2_key ?? '',
+                          promptName: prompt.name,
+                        });
+                      }}
+                      type="button"
+                    >
+                      <Trash2Icon className="h-4 w-4" />
+                    </button>
+                  </div>
+                  <span className="text-sm">{prompt.name} </span>
+                </div>
               ))}
             {searchQuery &&
               isSearchQuerySynced &&
@@ -333,7 +357,7 @@ export function CreatePromptDrawer({
           </button>
         )}
       </DialogTrigger>
-      <DialogContent className="bg-gray-600">
+      <DialogContent className="max-w-2xl bg-gray-600">
         <DialogHeader>
           <DialogTitle>Create custom prompt</DialogTitle>
           <div>
@@ -359,7 +383,7 @@ export function CreatePromptDrawer({
                         <div className="space-y-2">
                           <Textarea
                             autoFocus={true}
-                            className="!min-h-[130px] resize-none text-sm"
+                            className="!min-h-[340px] resize-none text-sm"
                             onKeyDown={(event) => {
                               if (
                                 event.key === 'Enter' &&
@@ -453,7 +477,7 @@ function UpdateWorkflowDrawer({
   };
   return (
     <Dialog onOpenChange={setOpen} open={open}>
-      <DialogContent className="bg-gray-600">
+      <DialogContent className="max-w-2xl bg-gray-600">
         <DialogHeader>
           <DialogTitle>Update Prompt</DialogTitle>
           <div>
@@ -478,7 +502,7 @@ function UpdateWorkflowDrawer({
                       <FormControl>
                         <div className="space-y-2">
                           <Textarea
-                            className="!min-h-[130px] resize-none text-sm"
+                            className="!min-h-[340px] resize-none text-sm"
                             onKeyDown={(event) => {
                               if (
                                 event.key === 'Enter' &&
diff --git a/apps/shinkai-desktop/src/components/shinkai-node-manager/components/ollama-models-repository.tsx b/apps/shinkai-desktop/src/components/shinkai-node-manager/components/ollama-models-repository.tsx
index abe02b445..6bafe49a4 100644
--- a/apps/shinkai-desktop/src/components/shinkai-node-manager/components/ollama-models-repository.tsx
+++ b/apps/shinkai-desktop/src/components/shinkai-node-manager/components/ollama-models-repository.tsx
@@ -220,9 +220,9 @@ export const OllamaModelsRepository = ({
   });
   useEffect(() => {
     installedOllamaModels?.models &&
-    installedOllamaModels.models.forEach((modelResponse) => {
-      installedOllamaModelsMap.set(modelResponse.name, modelResponse);
-    });
+      installedOllamaModels.models.forEach((modelResponse) => {
+        installedOllamaModelsMap.set(modelResponse.name, modelResponse);
+      });
     FILTERED_OLLAMA_MODELS_REPOSITORY.forEach((model) => {
       const defaultTag: string =
         model.tags?.find((tag) =>
@@ -235,7 +235,12 @@ export const OllamaModelsRepository = ({
         model.tags[0].name;
       selectedTagMap.set(model.name, defaultTag);
     });
-  }, [installedOllamaModels?.models, installedOllamaModelsMap, pullingModelsMap, selectedTagMap]);
+  }, [
+    installedOllamaModels?.models,
+    installedOllamaModelsMap,
+    pullingModelsMap,
+    selectedTagMap,
+  ]);
 
   const getFullName = (model: string, tag: string): string => {
     return `${model}:${tag}`;
@@ -243,7 +248,7 @@ export const OllamaModelsRepository = ({
 
   return (
     <div
-      className={cn('w-full overflow-auto rounded', className)}
+      className={cn('w-full overflow-auto rounded pb-10', className)}
       ref={tableContainerRef}
       {...props}
     >
diff --git a/apps/shinkai-desktop/src/pages/chat/layout.tsx b/apps/shinkai-desktop/src/pages/chat/layout.tsx
index 193132308..967e273fa 100644
--- a/apps/shinkai-desktop/src/pages/chat/layout.tsx
+++ b/apps/shinkai-desktop/src/pages/chat/layout.tsx
@@ -223,50 +223,46 @@ const InboxMessageButtonBase = ({
         {inboxName}
       </span>
       <div className="absolute right-0 rounded-full bg-transparent opacity-0 duration-200 group-hover:bg-gray-300 group-hover:opacity-100">
-        <TooltipProvider delayDuration={0}>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button
-                className={cn('justify-self-end bg-transparent')}
-                onClick={() => setIsEditable(true)}
-                size="icon"
-                type="button"
-                variant="tertiary"
-              >
-                <Edit3 className="h-4 w-4" />
-              </Button>
-            </TooltipTrigger>
-            <TooltipPortal>
-              <TooltipContent>
-                <p>{t('common.rename')}</p>
-              </TooltipContent>
-            </TooltipPortal>
-          </Tooltip>
-        </TooltipProvider>
-        <TooltipProvider delayDuration={0}>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button
-                className={cn('justify-self-end bg-transparent')}
-                onClick={(e) => {
-                  e.stopPropagation();
-                  e.preventDefault();
-                  setDeleteModalOpen(true);
-                }}
-                size={'icon'}
-                type="button"
-                variant={'tertiary'}
-              >
-                <Trash2Icon className="h-4 w-4" />
-              </Button>
-            </TooltipTrigger>
-            <TooltipPortal>
-              <TooltipContent>
-                <p>Delete</p>
-              </TooltipContent>
-            </TooltipPortal>
-          </Tooltip>
-        </TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              className={cn('justify-self-end bg-transparent')}
+              onClick={() => setIsEditable(true)}
+              size="icon"
+              type="button"
+              variant="tertiary"
+            >
+              <Edit3 className="h-4 w-4" />
+            </Button>
+          </TooltipTrigger>
+          <TooltipPortal>
+            <TooltipContent>
+              <p>{t('common.rename')}</p>
+            </TooltipContent>
+          </TooltipPortal>
+        </Tooltip>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              className={cn('justify-self-end bg-transparent')}
+              onClick={(e) => {
+                e.stopPropagation();
+                e.preventDefault();
+                setDeleteModalOpen(true);
+              }}
+              size={'icon'}
+              type="button"
+              variant={'tertiary'}
+            >
+              <Trash2Icon className="h-4 w-4" />
+            </Button>
+          </TooltipTrigger>
+          <TooltipPortal>
+            <TooltipContent>
+              <p>Delete</p>
+            </TooltipContent>
+          </TooltipPortal>
+        </Tooltip>
       </div>
       <RemoveInboxMessageModal
         jobId={jobId}
@@ -381,20 +377,20 @@ const ChatLayout = () => {
   );
 
   return (
-    <div className={cn('flex h-screen')}>
-      <AnimatePresence initial={false}>
-        {!isChatSidebarCollapsed && (
-          <motion.div
-            animate={{ width: 240, opacity: 1 }}
-            className="flex h-full flex-col overflow-hidden border-r border-gray-300"
-            exit={{ width: 0, opacity: 0 }}
-            initial={{ width: 0, opacity: 0 }}
-            transition={{ duration: 0.3 }}
-          >
-            <div className="flex h-full w-[240px] flex-col px-3 py-4 pt-6">
-              <div className="mb-3 flex items-center justify-between gap-2">
-                <h2>{t('chat.chats')}</h2>
-                <TooltipProvider delayDuration={0}>
+    <TooltipProvider delayDuration={0}>
+      <div className={cn('flex h-screen')}>
+        <AnimatePresence initial={false}>
+          {!isChatSidebarCollapsed && (
+            <motion.div
+              animate={{ width: 240, opacity: 1 }}
+              className="flex h-full flex-col overflow-hidden border-r border-gray-300"
+              exit={{ width: 0, opacity: 0 }}
+              initial={{ width: 0, opacity: 0 }}
+              transition={{ duration: 0.3 }}
+            >
+              <div className="flex h-full w-[240px] flex-col px-3 py-4 pt-6">
+                <div className="mb-3 flex items-center justify-between gap-2">
+                  <h2>{t('chat.chats')}</h2>
                   <Tooltip>
                     <TooltipTrigger asChild>
                       <Button
@@ -434,62 +430,78 @@ const ChatLayout = () => {
                       </TooltipContent>
                     </TooltipPortal>
                   </Tooltip>
-                </TooltipProvider>
-              </div>
-              <ScrollArea>
-                <div className="w-full space-y-1 bg-transparent">
-                  {isPending &&
-                    Array.from({ length: 5 }).map((_, index) => (
-                      <Skeleton
-                        className="h-11 w-full shrink-0 rounded-md bg-gray-300"
-                        key={index}
-                      />
-                    ))}
-
-                  {isSuccess &&
-                    inboxes?.length > 0 &&
-                    inboxes.map((inbox) => (
-                      <InboxMessageButton
-                        inboxId={inbox.inbox_id}
-                        inboxName={
-                          inbox.last_message &&
-                          inbox.custom_name === inbox.inbox_id
-                            ? inbox.last_message.job_message.content?.slice(
-                                0,
-                                40,
-                              )
-                            : inbox.custom_name?.slice(0, 40)
-                        }
-                        isJobLastMessage={
-                          inbox.last_message
-                            ? !(
-                                inbox.last_message.sender ===
-                                  auth?.shinkai_identity &&
-                                inbox.last_message.sender_subidentity ===
-                                  auth.profile
-                              )
-                            : false
-                        }
-                        key={inbox.inbox_id}
-                        lastMessageTimestamp={
-                          inbox.last_message?.node_api_data.node_timestamp ?? ''
-                        }
-                        to={`/inboxes/${encodeURIComponent(inbox.inbox_id)}`}
-                      />
-                    ))}
-                  {isSuccess && inboxes?.length === 0 && (
-                    <p className="text-gray-80 py-3 text-center text-xs">
-                      {t('chat.actives.notFound')}{' '}
-                    </p>
-                  )}
                 </div>
-              </ScrollArea>
-            </div>
-          </motion.div>
-        )}
-      </AnimatePresence>
-      <Outlet />
-    </div>
+                <ScrollArea>
+                  <div className="w-full space-y-1 bg-transparent">
+                    {isPending &&
+                      Array.from({ length: 5 }).map((_, index) => (
+                        <Skeleton
+                          className="h-11 w-full shrink-0 rounded-md bg-gray-300"
+                          key={index}
+                        />
+                      ))}
+
+                    {isSuccess &&
+                      inboxes?.length > 0 &&
+                      inboxes.map((inbox) => (
+                        <Tooltip key={inbox.inbox_id}>
+                          <TooltipTrigger asChild>
+                            <div>
+                              <InboxMessageButton
+                                inboxId={inbox.inbox_id}
+                                inboxName={
+                                  inbox.last_message &&
+                                  inbox.custom_name === inbox.inbox_id
+                                    ? inbox.last_message.job_message.content?.slice(
+                                        0,
+                                        40,
+                                      )
+                                    : inbox.custom_name?.slice(0, 40)
+                                }
+                                isJobLastMessage={
+                                  inbox.last_message
+                                    ? !(
+                                        inbox.last_message.sender ===
+                                          auth?.shinkai_identity &&
+                                        inbox.last_message
+                                          .sender_subidentity === auth.profile
+                                      )
+                                    : false
+                                }
+                                key={inbox.inbox_id}
+                                lastMessageTimestamp={
+                                  inbox.last_message?.node_api_data
+                                    .node_timestamp ?? ''
+                                }
+                                to={`/inboxes/${encodeURIComponent(inbox.inbox_id)}`}
+                              />
+                            </div>
+                          </TooltipTrigger>
+                          <TooltipPortal>
+                            <TooltipContent
+                              align="end"
+                              className="max-w-[200px] bg-gray-600"
+                              side="right"
+                            >
+                              <p>{inbox.custom_name}</p>
+                            </TooltipContent>
+                          </TooltipPortal>
+                        </Tooltip>
+                      ))}
+                    {isSuccess && inboxes?.length === 0 && (
+                      <p className="text-gray-80 py-3 text-center text-xs">
+                        {t('chat.actives.notFound')}{' '}
+                      </p>
+                    )}
+                  </div>
+                </ScrollArea>
+              </div>
+            </motion.div>
+          )}
+        </AnimatePresence>
+        <Outlet />
+      </div>
+    </TooltipProvider>
   );
 };
 
diff --git a/libs/shinkai-ui/src/components/chat/chat-input-area.tsx b/libs/shinkai-ui/src/components/chat/chat-input-area.tsx
index 572060342..69f55e3a4 100644
--- a/libs/shinkai-ui/src/components/chat/chat-input-area.tsx
+++ b/libs/shinkai-ui/src/components/chat/chat-input-area.tsx
@@ -1,19 +1,9 @@
 import * as React from 'react';
-import { useRef } from 'react';
 
+import { useCombinedRefs } from '../../hooks/use-combined-refs';
 import { ChatInput } from './chat-input';
 
-export const ChatInputArea = ({
-  value,
-  onChange,
-  autoFocus,
-  onSubmit,
-  disabled,
-  isLoading,
-  placeholder,
-  topAddons,
-  bottomAddons,
-}: {
+type ChatInputAreaProps = {
   value: string;
   onChange: (value: string) => void;
   onSubmit: () => void;
@@ -23,27 +13,50 @@ export const ChatInputArea = ({
   placeholder?: string;
   topAddons?: React.ReactNode;
   bottomAddons?: React.ReactNode;
-}) => {
-  const chatInputAreaRef = useRef<HTMLTextAreaElement>(null);
-  return (
-    <div className="flex w-full max-w-full flex-col rounded-lg border border-gray-300 bg-gray-400 px-1 py-1 text-sm shadow-sm aria-disabled:cursor-not-allowed aria-disabled:opacity-50">
-      {topAddons}
-      <div
-        aria-disabled={disabled}
-        className="flex cursor-text flex-col aria-disabled:cursor-not-allowed"
-        onClick={() => chatInputAreaRef?.current?.focus()}
-      >
-        <ChatInput
-          autoFocus={autoFocus}
-          disabled={disabled || isLoading}
-          onChange={(e) => onChange(e.target.value)}
-          onSend={onSubmit}
-          placeholder={placeholder ?? 'Send a message'}
-          ref={chatInputAreaRef}
-          value={value}
-        />
-        {bottomAddons}
-      </div>
-    </div>
-  );
 };
+
+export const ChatInputArea = React.forwardRef<
+  HTMLTextAreaElement,
+  ChatInputAreaProps
+>(
+  (
+    {
+      value,
+      onChange,
+      autoFocus,
+      onSubmit,
+      disabled,
+      isLoading,
+      placeholder,
+      topAddons,
+      bottomAddons,
+    },
+    ref,
+  ) => {
+    const textareaRef = useCombinedRefs<HTMLTextAreaElement>(ref);
+
+    return (
+      <div className="flex w-full max-w-full flex-col rounded-lg border border-gray-300 bg-gray-400 px-1 py-1 text-sm shadow-sm aria-disabled:cursor-not-allowed aria-disabled:opacity-50">
+        {topAddons}
+        <div
+          aria-disabled={disabled}
+          className="flex cursor-text flex-col aria-disabled:cursor-not-allowed"
+          onClick={() => textareaRef?.current?.focus()}
+        >
+          <ChatInput
+            autoFocus={autoFocus}
+            disabled={disabled || isLoading}
+            onChange={(e) => onChange(e.target.value)}
+            onSend={onSubmit}
+            placeholder={placeholder ?? 'Send a message'}
+            ref={textareaRef}
+            value={value}
+          />
+          {bottomAddons}
+        </div>
+      </div>
+    );
+  },
+);
+
+ChatInputArea.displayName = 'ChatInputArea';
diff --git a/libs/shinkai-ui/src/components/chat/chat-input.tsx b/libs/shinkai-ui/src/components/chat/chat-input.tsx
index 637d10919..fcda16cf1 100644
--- a/libs/shinkai-ui/src/components/chat/chat-input.tsx
+++ b/libs/shinkai-ui/src/components/chat/chat-input.tsx
@@ -9,6 +9,7 @@ export interface ChatInputProps
 
 export const useAutoResizeTextarea = (
   ref: React.ForwardedRef<HTMLTextAreaElement>,
+  value: string | number | readonly string[] | undefined,
   autoResize = true, //later to unify
 ) => {
   const textAreaRef = React.useRef<HTMLTextAreaElement>(null);
@@ -30,16 +31,15 @@ export const useAutoResizeTextarea = (
 
     ref?.addEventListener('input', updateTextareaHeight);
     return () => ref?.removeEventListener('input', updateTextareaHeight);
-
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [value]);
 
   return { textAreaRef };
 };
 
 const ChatInputBase = React.forwardRef<HTMLTextAreaElement, ChatInputProps>(
   ({ className, onSend, ...props }, ref) => {
-    const { textAreaRef } = useAutoResizeTextarea(ref);
+    const { textAreaRef } = useAutoResizeTextarea(ref, props.value);
 
     return (
       <textarea
diff --git a/libs/shinkai-ui/src/hooks/use-combined-refs.ts b/libs/shinkai-ui/src/hooks/use-combined-refs.ts
new file mode 100644
index 000000000..0bd2141b3
--- /dev/null
+++ b/libs/shinkai-ui/src/hooks/use-combined-refs.ts
@@ -0,0 +1,22 @@
+import React, { useEffect, useRef } from 'react';
+
+function useCombinedRefs<T>(
+  ...refs: React.ForwardedRef<T>[]
+): React.MutableRefObject<T | null> {
+  const targetRef = useRef<T>(null);
+  useEffect(() => {
+    refs.forEach((ref) => {
+      if (!ref) return;
+
+      if (typeof ref === 'function') {
+        ref(targetRef.current);
+      } else {
+        // eslint-disable-next-line no-param-reassign
+        ref.current = targetRef.current;
+      }
+    });
+  }, [refs]);
+  return targetRef;
+}
+
+export { useCombinedRefs };