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
dcSpark · Oct 31, 2024 · ecff789 · ecff789
1 parent 3d3ef1b
commit ecff789
Show file tree

Hide file tree

Showing 7 changed files with 254 additions and 173 deletions.
diff --git 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
@@ -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/...inkai-desktop/src/components/shinkai-node-manager/components/ollama-models-repository.tsx b/...inkai-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,15 +235,20 @@ 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}`;
   };
 
   return (
     <div
-      className={cn('w-full overflow-auto rounded', className)}
+      className={cn('w-full overflow-auto rounded pb-10', className)}
       ref={tableContainerRef}
       {...props}
     >