fix: ux edit message and copy api_key

web/screens/Settings/SettingDetail/SettingDetailItem/SettingDetailTextInputItem/index.tsx

@@ -7,7 +7,13 @@ import {
 } from '@janhq/core'
 
 import { Input } from '@janhq/joi'
-import { CopyIcon, EyeIcon, FolderOpenIcon } from 'lucide-react'
+import {
+  CheckIcon,
+  CopyIcon,
+  EyeIcon,
+  EyeOffIcon,
+  FolderOpenIcon,
+} from 'lucide-react'
 import { Marked, Renderer } from 'marked'
 
 type Props = {
@@ -34,6 +40,7 @@ const SettingDetailTextInputItem = ({
   const { value, type, placeholder, textAlign, inputActions } =
     settingProps.controllerProps as InputComponentProps
   const [obscure, setObscure] = useState(type === 'password')
+  const [copied, setCopied] = useState(false)
 
   const description = marked.parse(settingProps.description ?? '', {
     async: false,
@@ -45,6 +52,10 @@ const SettingDetailTextInputItem = ({
 
   const copy = useCallback(() => {
     navigator.clipboard.writeText(value)
+    if (value.length > 0) {
+      setCopied(true)
+    }
+    setTimeout(() => setCopied(false), 2000) // Reset icon after 2 seconds
   }, [value])
 
   const onAction = useCallback(
@@ -84,6 +95,8 @@ const SettingDetailTextInputItem = ({
             <InputExtraActions
               actions={inputActions ?? []}
               onAction={onAction}
+              copied={copied}
+              obscure={obscure}
             />
           }
         />
@@ -95,33 +108,51 @@ const SettingDetailTextInputItem = ({
 type InputActionProps = {
   actions: InputAction[]
   onAction: (action: InputAction) => void
+  copied: boolean
+  obscure: boolean
 }
 
 const InputExtraActions: React.FC<InputActionProps> = ({
   actions,
   onAction,
+  copied,
+  obscure,
 }) => {
   if (actions.length === 0) return <Fragment />
 
   return (
     <div className="flex flex-row space-x-2">
       {actions.map((action) => {
+        console.log(action)
         switch (action) {
           case 'copy':
-            return (
+            return copied ? (
+              <CheckIcon
+                key={action}
+                size={16}
+                onClick={() => onAction('copy')}
+                className="text-green-600"
+              />
+            ) : (
               <CopyIcon
                 key={action}
                 size={16}
-                onClick={() => onAction(action)}
+                onClick={() => onAction('copy')}
               />
             )
 
           case 'unobscure':
-            return (
+            return obscure ? (
               <EyeIcon
                 key={action}
                 size={16}
-                onClick={() => onAction(action)}
+                onClick={() => onAction('unobscure')}
+              />
+            ) : (
+              <EyeOffIcon
+                key={action}
+                size={16}
+                onClick={() => onAction('unobscure')}
               />
             )
 

web/screens/Thread/ThreadCenterPanel/EditChatInput/index.tsx

@@ -37,50 +37,52 @@
 }
 
 const EditChatInput: React.FC<Props> = ({ message }) => {
   const activeThread = useAtomValue(activeThreadAtom)
   const { stateModel, stopInference } = useActiveModel()
   const messages = useAtomValue(getCurrentChatMessagesAtom)
 
   const [editPrompt, setEditPrompt] = useAtom(editPromptAtom)
   const { sendChatMessage } = useSendChatMessage()
   const setMessages = useSetAtom(setConvoMessagesAtom)
   const activeThreadId = useAtomValue(getActiveThreadIdAtom)
   const spellCheck = useAtomValue(spellCheckAtom)
   const textareaRef = useRef<HTMLTextAreaElement>(null)
   const setEditMessage = useSetAtom(editMessageAtom)
   const [showDialog, setshowDialog] = useState(false)
 
   const onPromptChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
     setEditPrompt(e.target.value)
   }
 
   useEffect(() => {
     if (textareaRef.current) {
       textareaRef.current.focus()
+      const length = textareaRef.current.value.length
+      textareaRef.current.setSelectionRange(length, length)
     }
   }, [activeThreadId])
 
   useEffect(() => {
     if (textareaRef.current) {
       textareaRef.current.style.height = '40px'
       textareaRef.current.style.height = textareaRef.current.scrollHeight + 'px'
       textareaRef.current.style.overflow =
         textareaRef.current.clientHeight >= 390 ? 'auto' : 'hidden'
     }
   }, [editPrompt])
 
   useEffect(() => {
     setEditPrompt(message.content[0]?.text?.value)
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
   const sendEditMessage = async () => {
     setEditMessage('')
     const messageIdx = messages.findIndex((msg) => msg.id === message.id)
     const newMessages = messages.slice(0, messageIdx)
     if (activeThread) {
       setMessages(activeThread.id, newMessages)
       await extensionManager
         .get<ConversationalExtension>(ExtensionTypeEnum.Conversational)
         ?.writeMessages(
           activeThread.id,
@@ -88,22 +90,22 @@
           newMessages
         )
         .then(() => {
           sendChatMessage(editPrompt)
         })
     }
   }
 
   const onKeyDown = async (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
     if (e.key === 'Enter' && !e.shiftKey) {
       e.preventDefault()
       if (messages[messages.length - 1]?.status !== MessageStatus.Pending)
         sendEditMessage()
       else onStopInferenceClick()
     }
   }
 
   const onStopInferenceClick = async () => {
     stopInference()
   }
 
   return (