Feat: Show multiple chat boxes #3221 (#9443)

### What problem does this PR solve?

Feat: Show multiple chat boxes #3221

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/components/originui/password-input.tsx

@@ -0,0 +1,46 @@
+// https://originui.com/r/comp-23.json
+
+'use client';
+
+import { EyeIcon, EyeOffIcon } from 'lucide-react';
+import React, { useId, useState } from 'react';
+import { Input, InputProps } from '../ui/input';
+
+export default React.forwardRef<HTMLInputElement, InputProps>(
+  function PasswordInput({ ...props }, ref) {
+    const id = useId();
+    const [isVisible, setIsVisible] = useState<boolean>(false);
+
+    const toggleVisibility = () => setIsVisible((prevState) => !prevState);
+
+    return (
+      <div className="*:not-first:mt-2">
+        {/* <Label htmlFor={id}>Show/hide password input</Label> */}
+        <div className="relative">
+          <Input
+            id={id}
+            className="pe-9"
+            placeholder="Password"
+            type={isVisible ? 'text' : 'password'}
+            ref={ref}
+            {...props}
+          />
+          <button
+            className="text-muted-foreground/80 hover:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center rounded-e-md transition-[color,box-shadow] outline-none focus:z-10 focus-visible:ring-[3px] disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
+            type="button"
+            onClick={toggleVisibility}
+            aria-label={isVisible ? 'Hide password' : 'Show password'}
+            aria-pressed={isVisible}
+            aria-controls="password"
+          >
+            {isVisible ? (
+              <EyeOffIcon size={16} aria-hidden="true" />
+            ) : (
+              <EyeIcon size={16} aria-hidden="true" />
+            )}
+          </button>
+        </div>
+      </div>
+    );
+  },
+);

web/src/components/page-header.tsx

@@ -2,7 +2,7 @@ import { PropsWithChildren } from 'react';
 
 export function PageHeader({ children }: PropsWithChildren) {
   return (
-    <header className="flex justify-between items-center border-b bg-text-title-invert p-5">
+    <header className="flex justify-between items-center bg-text-title-invert p-5">
       {children}
     </header>
   );

web/src/components/password-input/index.tsx

@@ -1,52 +0,0 @@
-import { Input } from '@/components/originui/input';
-import { EyeIcon, EyeOffIcon } from 'lucide-react';
-import { ChangeEvent, forwardRef, useId, useState } from 'react';
-
-type PropType = {
-  name: string;
-  value: string;
-  onBlur: () => void;
-  onChange: (event: ChangeEvent<HTMLInputElement>) => void;
-};
-
-function PasswordInput(props: PropType) {
-  const id = useId();
-  const [isVisible, setIsVisible] = useState<boolean>(false);
-
-  const toggleVisibility = () => setIsVisible((prevState) => !prevState);
-
-  return (
-    <div className="*:not-first:mt-2 w-full">
-      {/* <Label htmlFor={id}>Show/hide password input</Label> */}
-      <div className="relative">
-        <Input
-          autoComplete="off"
-          inputMode="numeric"
-          id={id}
-          className="pe-9"
-          placeholder=""
-          type={isVisible ? 'text' : 'password'}
-          value={props.value}
-          onBlur={props.onBlur}
-          onChange={(ev) => props.onChange(ev)}
-        />
-        <button
-          className="text-muted-foreground/80 hover:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center rounded-e-md transition-[color,box-shadow] outline-none focus:z-10 focus-visible:ring-[3px] disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
-          type="button"
-          onClick={toggleVisibility}
-          aria-label={isVisible ? 'Hide password' : 'Show password'}
-          aria-pressed={isVisible}
-          aria-controls="password"
-        >
-          {isVisible ? (
-            <EyeOffIcon size={16} aria-hidden="true" />
-          ) : (
-            <EyeIcon size={16} aria-hidden="true" />
-          )}
-        </button>
-      </div>
-    </div>
-  );
-}
-
-export default forwardRef(PasswordInput);

web/src/components/tavily-form-field.tsx

@@ -0,0 +1,51 @@
+import { useTranslate } from '@/hooks/common-hooks';
+import { useFormContext } from 'react-hook-form';
+import PasswordInput from './originui/password-input';
+import {
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from './ui/form';
+
+interface IProps {
+  name?: string;
+}
+
+export function TavilyFormField({
+  name = 'prompt_config.tavily_api_key',
+}: IProps) {
+  const form = useFormContext();
+  const { t } = useTranslate('chat');
+
+  return (
+    <FormField
+      control={form.control}
+      name={name}
+      render={({ field }) => (
+        <FormItem>
+          <FormLabel tooltip={t('tavilyApiKeyTip')}>Tavily API Key</FormLabel>
+          <FormControl>
+            <PasswordInput
+              {...field}
+              placeholder={t('tavilyApiKeyMessage')}
+              autoComplete="new-password"
+            ></PasswordInput>
+          </FormControl>
+          <FormDescription>
+            <a
+              href="https://app.tavily.com/home"
+              target={'_blank'}
+              rel="noreferrer"
+            >
+              {t('tavilyApiKeyHelp')}
+            </a>
+          </FormDescription>
+          <FormMessage />
+        </FormItem>
+      )}
+    />
+  );
+}