From 7f709ed38bfc00db99863ea0ff8e15ad7ed8624d Mon Sep 17 00:00:00 2001
From: crazywoola <427733928@qq.com>
Date: Thu, 6 Mar 2025 13:55:13 +0800
Subject: [PATCH 1/3] feat: add datepicker and time picker

---
 .../date-picker/index.tsx                     |  2 +-
 .../time-picker/index.tsx                     |  2 +-
 .../components/base/markdown-blocks/form.tsx  | 57 +++++++++++++++----
 3 files changed, 49 insertions(+), 12 deletions(-)

diff --git a/web/app/components/base/date-and-time-picker/date-picker/index.tsx b/web/app/components/base/date-and-time-picker/date-picker/index.tsx
index 06dd459ece3397..f77d7efe3fa91f 100644
--- a/web/app/components/base/date-and-time-picker/date-picker/index.tsx
+++ b/web/app/components/base/date-and-time-picker/date-picker/index.tsx
@@ -207,7 +207,7 @@ const DatePicker = ({
           </div>
         )}
       </PortalToFollowElemTrigger>
-      <PortalToFollowElemContent>
+      <PortalToFollowElemContent className='z-50'>
         <div className='w-[252px] mt-1 bg-components-panel-bg rounded-xl shadow-lg shadow-shadow-shadow-5 border-[0.5px] border-components-panel-border'>
           {/* Header */}
           {view === ViewType.date ? (
diff --git a/web/app/components/base/date-and-time-picker/time-picker/index.tsx b/web/app/components/base/date-and-time-picker/time-picker/index.tsx
index 348079e535f9fd..8c5b19dd7b6d93 100644
--- a/web/app/components/base/date-and-time-picker/time-picker/index.tsx
+++ b/web/app/components/base/date-and-time-picker/time-picker/index.tsx
@@ -123,7 +123,7 @@ const TimePicker = ({
           </div>
         )}
       </PortalToFollowElemTrigger>
-      <PortalToFollowElemContent>
+      <PortalToFollowElemContent className='z-50'>
         <div className='w-[252px] mt-1 bg-components-panel-bg rounded-xl shadow-lg shadow-shadow-shadow-5 border-[0.5px] border-components-panel-border'>
           {/* Header */}
           <Header />
diff --git a/web/app/components/base/markdown-blocks/form.tsx b/web/app/components/base/markdown-blocks/form.tsx
index 7ce3e82b1db1e1..418dd5f6489240 100644
--- a/web/app/components/base/markdown-blocks/form.tsx
+++ b/web/app/components/base/markdown-blocks/form.tsx
@@ -2,6 +2,8 @@ import React, { useEffect, useState } from 'react'
 import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
 import Textarea from '@/app/components/base/textarea'
+import DatePicker from '@/app/components/base/date-and-time-picker/date-picker'
+import TimePicker from '@/app/components/base/date-and-time-picker/time-picker'
 import { useChatContext } from '@/app/components/base/chat/chat/context'
 
 enum DATA_FORMAT {
@@ -19,18 +21,11 @@ enum SUPPORTED_TYPES {
   PASSWORD = 'password',
   EMAIL = 'email',
   NUMBER = 'number',
+  DATE = 'date',
+  TIME = 'time',
+  DATETIME = 'datetime',
 }
 const MarkdownForm = ({ node }: any) => {
-  // const supportedTypes = ['text', 'password', 'email', 'number']
-  //   <form data-format="text">
-  //      <label for="username">Username:</label>
-  //      <input type="text" name="username" />
-  //      <label for="password">Password:</label>
-  //      <input type="password" name="password" />
-  //      <label for="content">Content:</label>
-  //      <textarea name="content"></textarea>
-  //      <button data-size="small" data-variant="primary">Login</button>
-  //   </form>
   const { onSend } = useChatContext()
 
   const [formValues, setFormValues] = useState<{ [key: string]: any }>({})
@@ -90,6 +85,48 @@ const MarkdownForm = ({ node }: any) => {
           )
         }
         if (child.tagName === SUPPORTED_TAGS.INPUT && Object.values(SUPPORTED_TYPES).includes(child.properties.type)) {
+          if (child.properties.type === SUPPORTED_TYPES.DATE) {
+            return (
+              <DatePicker
+                key={index}
+                value={formValues[child.properties.name]}
+                needTimePicker={child.properties.type === SUPPORTED_TYPES.DATETIME}
+                onChange={(date) => {
+                  setFormValues(prevValues => ({
+                    ...prevValues,
+                    [child.properties.name]: date,
+                  }))
+                }}
+                onClear={() => {
+                  setFormValues(prevValues => ({
+                    ...prevValues,
+                    [child.properties.name]: undefined,
+                  }))
+                }}
+              />
+            )
+          }
+          if (child.properties.type === SUPPORTED_TYPES.TIME) {
+            return (
+              <TimePicker
+                key={index}
+                value={formValues[child.properties.name]}
+                onChange={(time) => {
+                  setFormValues(prevValues => ({
+                    ...prevValues,
+                    [child.properties.name]: time,
+                  }))
+                }}
+                onClear={() => {
+                  setFormValues(prevValues => ({
+                    ...prevValues,
+                    [child.properties.name]: undefined,
+                  }))
+                }}
+              />
+            )
+          }
+
           return (
             <Input
               key={index}

From 54be2deb463469299eb3a0e0093c821b8e6a8bd8 Mon Sep 17 00:00:00 2001
From: crazywoola <427733928@qq.com>
Date: Thu, 6 Mar 2025 14:10:09 +0800
Subject: [PATCH 2/3] feat: add checkbox

---
 .../components/base/markdown-blocks/form.tsx  | 21 ++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/web/app/components/base/markdown-blocks/form.tsx b/web/app/components/base/markdown-blocks/form.tsx
index 418dd5f6489240..df35eb25e97771 100644
--- a/web/app/components/base/markdown-blocks/form.tsx
+++ b/web/app/components/base/markdown-blocks/form.tsx
@@ -4,6 +4,7 @@ import Input from '@/app/components/base/input'
 import Textarea from '@/app/components/base/textarea'
 import DatePicker from '@/app/components/base/date-and-time-picker/date-picker'
 import TimePicker from '@/app/components/base/date-and-time-picker/time-picker'
+import Checkbox from '@/app/components/base/checkbox'
 import { useChatContext } from '@/app/components/base/chat/chat/context'
 
 enum DATA_FORMAT {
@@ -24,6 +25,7 @@ enum SUPPORTED_TYPES {
   DATE = 'date',
   TIME = 'time',
   DATETIME = 'datetime',
+  CHECKBOX = 'checkbox',
 }
 const MarkdownForm = ({ node }: any) => {
   const { onSend } = useChatContext()
@@ -85,7 +87,7 @@ const MarkdownForm = ({ node }: any) => {
           )
         }
         if (child.tagName === SUPPORTED_TAGS.INPUT && Object.values(SUPPORTED_TYPES).includes(child.properties.type)) {
-          if (child.properties.type === SUPPORTED_TYPES.DATE) {
+          if (child.properties.type === SUPPORTED_TYPES.DATE || child.properties.type === SUPPORTED_TYPES.DATETIME) {
             return (
               <DatePicker
                 key={index}
@@ -126,6 +128,23 @@ const MarkdownForm = ({ node }: any) => {
               />
             )
           }
+          if (child.properties.type === SUPPORTED_TYPES.CHECKBOX) {
+            return (
+              <div className='mt-2 flex items-center h-6 space-x-2' key={index}>
+                <Checkbox
+                  key={index}
+                  checked={formValues[child.properties.name]}
+                  onCheck={() => {
+                    setFormValues(prevValues => ({
+                      ...prevValues,
+                      [child.properties.name]: !prevValues[child.properties.name],
+                    }))
+                  }}
+                />
+                <span>{child.properties.dataTip || child.properties['data-tip'] || ''}</span>
+              </div>
+            )
+          }
 
           return (
             <Input

From ae6aafd72af0a6e395c5599382925086206b3291 Mon Sep 17 00:00:00 2001
From: crazywoola <427733928@qq.com>
Date: Thu, 6 Mar 2025 15:32:01 +0800
Subject: [PATCH 3/3] feat: add more types

---
 .../components/base/markdown-blocks/form.tsx  | 34 +++++++++++++++++++
 web/app/styles/markdown.scss                  |  7 ++--
 2 files changed, 39 insertions(+), 2 deletions(-)

diff --git a/web/app/components/base/markdown-blocks/form.tsx b/web/app/components/base/markdown-blocks/form.tsx
index df35eb25e97771..89b9d76dc81a06 100644
--- a/web/app/components/base/markdown-blocks/form.tsx
+++ b/web/app/components/base/markdown-blocks/form.tsx
@@ -5,6 +5,7 @@ import Textarea from '@/app/components/base/textarea'
 import DatePicker from '@/app/components/base/date-and-time-picker/date-picker'
 import TimePicker from '@/app/components/base/date-and-time-picker/time-picker'
 import Checkbox from '@/app/components/base/checkbox'
+import Select from '@/app/components/base/select'
 import { useChatContext } from '@/app/components/base/chat/chat/context'
 
 enum DATA_FORMAT {
@@ -26,6 +27,7 @@ enum SUPPORTED_TYPES {
   TIME = 'time',
   DATETIME = 'datetime',
   CHECKBOX = 'checkbox',
+  SELECT = 'select',
 }
 const MarkdownForm = ({ node }: any) => {
   const { onSend } = useChatContext()
@@ -145,6 +147,38 @@ const MarkdownForm = ({ node }: any) => {
               </div>
             )
           }
+          if (child.properties.type === SUPPORTED_TYPES.SELECT) {
+            return (
+              <Select
+                key={index}
+                allowSearch={false}
+                className="w-full"
+                items={(() => {
+                  let options = child.properties.dataOptions || child.properties['data-options'] || []
+                  if (typeof options === 'string') {
+                    try {
+                      options = JSON.parse(options)
+                    }
+                    catch (e) {
+                      console.error('Failed to parse options:', e)
+                      options = []
+                    }
+                  }
+                  return options.map((option: string) => ({
+                    name: option,
+                    value: option,
+                  }))
+                })()}
+                defaultValue={formValues[child.properties.name]}
+                onSelect={(item) => {
+                  setFormValues(prevValues => ({
+                    ...prevValues,
+                    [child.properties.name]: item.value,
+                  }))
+                }}
+              />
+            )
+          }
 
           return (
             <Input
diff --git a/web/app/styles/markdown.scss b/web/app/styles/markdown.scss
index a3b86f44fea301..faffdff3d226bb 100644
--- a/web/app/styles/markdown.scss
+++ b/web/app/styles/markdown.scss
@@ -425,7 +425,10 @@
 .markdown-body ol {
   padding-left: 2em;
 }
-
+.markdown-body ul[role="listbox"] {
+  list-style: none !important;
+  padding-left: 0 !important;
+}
 .markdown-body blockquote> :first-child {
   margin-top: 0;
 }
@@ -1035,4 +1038,4 @@
 
 .markdown-body .react-syntax-highlighter-line-number {
   color: var(--color-text-quaternary);
-}
\ No newline at end of file
+}