feat: add some actions

app/chat/main.tsx

@@ -9,8 +9,11 @@ import Form from '@/components/form'
 import XPowerBy, { XPowerByPrivacy } from '@/components/x-power-by'
 import I18N from '@/i18n'
 
+interface ExtraPropss {
+  user: string
+}
 interface IState {
-  inputs: any[]
+  inputs: any
   query: string
   conversation_id: string | null
   user: string | null
@@ -28,13 +31,28 @@ function reducer(state: IState, action: IAction): IState {
         ...state,
         query: action.payload
       }
+    case 'SET_INPUT':
+      const h = {} as any
+      action.payload.forEach((itm: any) => {
+        h[itm.variable] = itm.default
+      })
+      return {
+        ...state,
+        inputs: h
+      }
+    case 'SET_CONVERSATION_ID':
+      return {
+        ...state,
+        conversation_id: action.payload
+      }
     default: {
       return state
     }
   }
 }
 
-const Main: FC<AppProps & LocaleProps & ConversationsProps> = ({
+const Main: FC<AppProps & LocaleProps & ConversationsProps & ExtraPropss> = ({
+  user,
   user_input_form,
   locale
 }) => {
@@ -42,7 +60,7 @@ const Main: FC<AppProps & LocaleProps & ConversationsProps> = ({
     inputs: [],
     query: '',
     conversation_id: null,
-    user: null
+    user
   }
 
   const [state, dispatch] = useReducer(reducer, initialState)
@@ -105,7 +123,16 @@ const Main: FC<AppProps & LocaleProps & ConversationsProps> = ({
           />
         </section>
         <section className='mb-4'>
-          <Form hint={I18N(locale)('app.initial_prompt')} items={items} />
+          <Form
+            hint={I18N(locale)('app.initial_prompt')}
+            items={items}
+            onSubmit={(items) => {
+              dispatch({
+                type: 'SET_INPUT',
+                payload: items
+              })
+            }}
+          />
         </section>
 
         <section className='flex flex-col sm:flex-row items-center justify-between gap-4'>

app/chat/page.tsx

@@ -1,5 +1,6 @@
 import { getLocale, client } from '@/service'
 import { ConversationsProps } from '@/interface'
+import { cookies } from 'next/headers'
 import Main from './main'
 
 async function getAppInfo() {
@@ -23,9 +24,16 @@ const Home = async () => {
   const locale = await getLocale()
   const appInfo = await getAppInfo()
   const conversations = await getConversations()
+  const cookieStore = cookies()
+  const user = cookieStore.get('user')?.value || 'anonymous'
   return (
     <main className={'flex w-full m-h-screen'}>
-      <Main {...appInfo} conversations={conversations} locale={locale} />
+      <Main
+        {...appInfo}
+        conversations={conversations}
+        locale={locale}
+        user={user}
+      />
     </main>
   )
 }

components/form/index.tsx

@@ -1,5 +1,5 @@
 'use client'
-import React, { FC } from 'react'
+import React, { FC, useState } from 'react'
 import styles from './style.module.scss'
 import Button from '@/components/button'
 import ChatBubble from '@heroicons/react/24/solid/ChatBubbleOvalLeftEllipsisIcon'
@@ -7,6 +7,7 @@ import Hint from '@/components/hint'
 import Input from '@/components/input'
 import Select from '@/components/select'
 import cn from 'classnames'
+
 export interface FormItemProps {
   label: string
   type: string
@@ -15,16 +16,24 @@ export interface FormItemProps {
   options?: string[]
   max_length?: number
   default: string
+  onChange?: (e: any) => void
 }
 
 interface FormProps {
   hint: string
   hintDescription?: string
   items: FormItemProps[]
-  onSubmit?: () => void
+  onSubmit?: (e: FormItemProps[]) => void
   onCancel?: () => void
 }
-export const FormItem: FC<FormItemProps> = ({ type, label, options }) => {
+export const FormItem: FC<FormItemProps> = ({
+  variable,
+  type,
+  label,
+  options,
+  default: defaultValue,
+  onChange
+}) => {
   return (
     <div className={cn('flex flex-col sm:flex-row gap-2')}>
       <label
@@ -36,36 +45,65 @@ export const FormItem: FC<FormItemProps> = ({ type, label, options }) => {
         {label}
       </label>
       {type === 'text-input' && (
-        <Input className='w-full' value='' onChange={() => {}} />
+        <Input
+          className='w-full'
+          value={defaultValue}
+          onChange={(e) => {
+            onChange && onChange({ variable, value: e.target.value })
+          }}
+        />
       )}
       {type === 'select' && options && (
         <Select
           className='w-full'
-          value={undefined}
+          value={defaultValue}
           options={options.map((itm) => ({ label: itm, value: itm }))}
-          onSelect={() => {}}
+          onSelect={(e) => {
+            onChange && onChange({ variable, value: e })
+          }}
         />
       )}
     </div>
   )
 }
 
-const Form: FC<FormProps> = ({ items, hint, hintDescription }) => {
+const Form: FC<FormProps> = ({ items, hint, hintDescription, onSubmit }) => {
+  const [formItems, setFormItems] = useState(items)
   return (
     <div className={styles.container}>
       <Hint hint={hint} hintDescription={hintDescription} />
-      <form className={styles.form}>
-        {items.map((item) => {
-          return <FormItem key={item.label} {...item} />
+      <div className={styles.form}>
+        {formItems.map((item) => {
+          return (
+            <FormItem
+              key={item.label}
+              {...item}
+              onChange={(e) => {
+                setFormItems((itms) =>
+                  itms.map((itm) => {
+                    if (itm.variable === e.variable) {
+                      return { ...itm, default: e.value }
+                    }
+                    return itm
+                  })
+                )
+              }}
+            />
+          )
         })}
-        <div className={cn('flex flex-col sm:flex-row gap-2')}>
+        <div
+          className={cn('flex flex-col sm:flex-row gap-2')}
+          onClick={() => {
+            onSubmit && onSubmit(formItems)
+          }}
+        >
           <div className='flex w-32'></div>
           <Button text='' type='blue' className='w-32 h-9'>
             <ChatBubble className='h-4 w-4 text-white mr-2' />
             Start Chat
           </Button>
         </div>
-      </form>
+      </div>
     </div>
   )
 }