feat: add input actions for setting item (#2978)

Signed-off-by: James <james@jan.ai>
Co-authored-by: James <james@jan.ai>

core/src/types/setting/settingComponent.ts

@@ -16,11 +16,16 @@ export type ControllerType = 'slider' | 'checkbox' | 'input'
 
 export type InputType = 'password' | 'text' | 'email' | 'number' | 'tel' | 'url'
 
+const InputActions = ['unobscure', 'copy'] as const
+export type InputActionsTuple = typeof InputActions
+export type InputAction = InputActionsTuple[number]
+
 export type InputComponentProps = {
   placeholder: string
   value: string
   type?: InputType
   textAlign?: 'left' | 'right'
+  inputActions?: InputAction[]
 }
 
 export type SliderComponentProps = {

extensions/model-extension/resources/settings.json

@@ -6,7 +6,9 @@
     "controllerType": "input",
     "controllerProps": {
       "value": "",
-      "placeholder": "hf_**********************************"
+      "placeholder": "hf_**********************************",
+      "type": "password",
+      "inputActions": ["unobscure", "copy"]
     }
   }
 ]

web/.eslintrc.js

@@ -57,6 +57,11 @@ module.exports = {
         selector: 'typeLike',
         format: ['PascalCase'],
       },
+      {
+        selector: 'property',
+        filter: '^__html$',
+        format: null,
+      },
     ],
     '@typescript-eslint/explicit-module-boundary-types': 'off',
     '@next/next/no-img-element': 'off',

web/helpers/atoms/AppConfig.atom.ts

@@ -21,3 +21,5 @@ export const proxyAtom = atomWithStorage(HTTPS_PROXY_FEATURE, '')
 export const ignoreSslAtom = atomWithStorage(IGNORE_SSL, false)
 export const vulkanEnabledAtom = atomWithStorage(VULKAN_ENABLED, false)
 export const quickAskEnabledAtom = atomWithStorage(QUICK_ASK_ENABLED, false)
+
+export const hostAtom = atom('http://localhost:1337/')

web/screens/Settings/CoreExtensions/ExtensionItem.tsx

@@ -81,7 +81,6 @@ const ExtensionItem: React.FC<Props> = ({ item }) => {
           <h6 className="font-semibold">Additional Dependencies</h6>
         </div>
         <div
-          // eslint-disable-next-line @typescript-eslint/naming-convention
           dangerouslySetInnerHTML={{ __html: description }}
           className="font-medium leading-relaxed text-[hsla(var(--text-secondary))]"
         />

web/screens/Settings/CoreExtensions/index.tsx

@@ -199,7 +199,6 @@ const ExtensionCatalog = () => {
                       <div
                         className="w-full font-medium leading-relaxed text-[hsla(var(--text-secondary))] sm:w-4/5"
                         dangerouslySetInnerHTML={{
-                          // eslint-disable-next-line @typescript-eslint/naming-convention
                           __html: marked.parse(item.description ?? '', {
                             async: false,
                           }),
@@ -240,7 +239,6 @@ const ExtensionCatalog = () => {
                       <div
                         className="font-medium leading-relaxed text-[hsla(var(--text-secondary))]"
                         dangerouslySetInnerHTML={{
-                          // eslint-disable-next-line @typescript-eslint/naming-convention
                           __html: marked.parse(item.description ?? '', {
                             async: false,
                           }),

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

@@ -1,5 +1,13 @@
-import { InputComponentProps, SettingComponentProps } from '@janhq/core'
+import { useCallback, useState, Fragment } from 'react'
+
+import {
+  InputAction,
+  InputComponentProps,
+  SettingComponentProps,
+} from '@janhq/core'
+
 import { Input } from '@janhq/joi'
+import { CopyIcon, EyeIcon, FolderOpenIcon } from 'lucide-react'
 import { Marked, Renderer } from 'marked'
 
 type Props = {
@@ -9,14 +17,13 @@ type Props = {
 
 const marked: Marked = new Marked({
   renderer: {
-    link: (href, title, text) => {
-      return Renderer.prototype.link
+    link: (href, title, text) =>
+      Renderer.prototype.link
         ?.apply(this, [href, title, text])
         .replace(
           '<a',
           "<a class='text-[hsla(var(--app-link))]' target='_blank'"
-        )
-    },
+        ),
   },
 })
 
@@ -24,36 +31,105 @@ const SettingDetailTextInputItem = ({
   settingProps,
   onValueChanged,
 }: Props) => {
-  const { value, type, placeholder, textAlign } =
+  const { value, type, placeholder, textAlign, inputActions } =
     settingProps.controllerProps as InputComponentProps
+  const [obscure, setObscure] = useState(type === 'password')
 
   const description = marked.parse(settingProps.description ?? '', {
     async: false,
   })
 
+  const toggleObscure = useCallback(() => {
+    setObscure((prev) => !prev)
+  }, [])
+
+  const copy = useCallback(() => {
+    navigator.clipboard.writeText(value)
+  }, [value])
+
+  const onAction = useCallback(
+    (action: InputAction) => {
+      switch (action) {
+        case 'copy':
+          copy()
+          break
+        case 'unobscure':
+          toggleObscure()
+          break
+        default:
+          break
+      }
+    },
+    [toggleObscure, copy]
+  )
+
   return (
     <div className="flex w-full flex-col justify-between gap-4 py-6 sm:flex-row">
       <div className="flex flex-1 flex-col space-y-1">
         <h1 className="font-semibold">{settingProps.title}</h1>
-        {
         <div
-            // eslint-disable-next-line @typescript-eslint/naming-convention
           dangerouslySetInnerHTML={{ __html: description }}
           className="font-medium leading-relaxed text-[hsla(var(--text-secondary))]"
         />
-        }
       </div>
       <div className="w-full flex-shrink-0 pr-1 sm:w-1/2">
         <Input
           placeholder={placeholder}
-          type={type}
+          type={obscure ? 'password' : 'text'}
           textAlign={textAlign}
           value={value}
           onChange={(e) => onValueChanged?.(e.target.value)}
+          suffixIcon={
+            <InputExtraActions
+              actions={inputActions ?? []}
+              onAction={onAction}
+            />
+          }
         />
       </div>
     </div>
   )
 }
 
+type InputActionProps = {
+  actions: InputAction[]
+  onAction: (action: InputAction) => void
+}
+
+const InputExtraActions: React.FC<InputActionProps> = ({
+  actions,
+  onAction,
+}) => {
+  if (actions.length === 0) return <Fragment />
+
+  return (
+    <div className="flex flex-row space-x-2">
+      {actions.map((action) => {
+        switch (action) {
+          case 'copy':
+            return (
+              <CopyIcon
+                key={action}
+                size={16}
+                onClick={() => onAction(action)}
+              />
+            )
+
+          case 'unobscure':
+            return (
+              <EyeIcon
+                key={action}
+                size={16}
+                onClick={() => onAction(action)}
+              />
+            )
+
+          default:
+            return <FolderOpenIcon key={action} />
+        }
+      })}
+    </div>
+  )
+}
+
 export default SettingDetailTextInputItem

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

@@ -38,7 +38,6 @@ const SettingDetailToggleItem: React.FC<Props> = ({
         <h1 className="font-semibold">{settingProps.title}</h1>
         {
           <div
-            // eslint-disable-next-line @typescript-eslint/naming-convention
             dangerouslySetInnerHTML={{ __html: description }}
             className="font-medium leading-relaxed text-[hsla(var(--text-secondary))]"
           />

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

@@ -282,7 +282,6 @@ const SimpleTextMessage: React.FC<ThreadMessage> = (props) => {
                 'message max-width-[100%] flex flex-col gap-y-2 overflow-auto font-medium leading-relaxed',
                 isUser && 'whitespace-pre-wrap break-words'
               )}
-              // eslint-disable-next-line @typescript-eslint/naming-convention
               dangerouslySetInnerHTML={{ __html: parsedText }}
             />
           )}