diff --git a/src/views/Conversations/Components/InputTemplate.jsx b/src/views/Conversations/Components/InputTemplate.jsx index 2253b78..92dee32 100644 --- a/src/views/Conversations/Components/InputTemplate.jsx +++ b/src/views/Conversations/Components/InputTemplate.jsx @@ -29,9 +29,17 @@ const InputTemplate = ({ disabled = false, invokeSendMessage }) => { const valueMapped = { ...cloneDeep(currentConversation), ...objectMapper(loginUser, { username: [{ key: 'agent_name' }, { key: 'your_name' }] }) }; const [openTemplates, setOpenTemplates] = useState(false); - const handleOpenChange = (newOpen) => { - setOpenTemplates(newOpen); + const [dataSource, setDataSource] = useState(templates); + const [searchContent, setSearchContent] = useState(''); + const handleSearchTemplates = (val) => { + if (val.toLowerCase().trim() !== '') { + const res = templates.filter((item) => item.name.includes(val.toLowerCase().trim()) || item.components_origin.some((itemc) => itemc.text.toLowerCase().includes(val.toLowerCase().trim()))); + setDataSource(res); + return false; + } + setDataSource(templates); }; + const handleSendTemplate = (fromTemplate) => { const mergeInput = { ...cloneDeep(valueMapped), ...activeInput[fromTemplate.name] }; let valid = true; @@ -51,7 +59,7 @@ const InputTemplate = ({ disabled = false, invokeSendMessage }) => { const params = keys.map((v) => ({ type: 'text', text: getNestedValue(mergeInput, [v]) })); const paramText = params.map((p) => p.text); const fillTemplate = paramText.length ? replaceTemplateString(citem?.text || '', paramText) : citem?.text || ''; - valid = keys.length !== (paramText).filter(s => s).length ? false : valid; + valid = keys.length !== paramText.filter((s) => s).length ? false : valid; return { type: citem.type.toLowerCase(), parameters: params, @@ -110,46 +118,58 @@ const InputTemplate = ({ disabled = false, invokeSendMessage }) => { <> ( - - - <>{item.components.header?.[0]?.text || item.name} - - - } - description={ - <> -
-
{renderForm(item)}
- {item.components?.footer?.[0] ?
{item.components.footer[0].text || ''}
: null} -
- {/*
+ <> + { + setSearchContent(e.target.value); + handleSearchTemplates(e.target.value); + }} + placeholder='ๆœ็ดขๅ็งฐ' + /> + ( + + + <>{item.components.header?.[0]?.text || item.name} + + + } + description={ + <> +
+
{renderForm(item)}
+ {item.components?.footer?.[0] ?
{item.components.footer[0].text || ''}
: null} +
+ {/*
*/} - - } - /> -
- )} - /> + + } + /> + + )} + /> + } title='๐Ÿ™‹ๆ‰“ๆ‹›ๅ‘ผ' trigger='click' open={openTemplates} - onOpenChange={handleOpenChange}> + onOpenChange={setOpenTemplates}>