npm - @clikvn/agent-widget-embedded - Versions diffs - 1.1.6-dev-02 → 1.1.6-dev-04 - Mend

@clikvn/agent-widget-embedded 1.1.6-dev-02 → 1.1.6-dev-04

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (28) hide show

package/.rollup.cache/Users/tungthai/Desktop/Develop/clik-ai-chatbot-embedded/dist/components/Chat/AgentThinking.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AgentThinking.js","sourceRoot":"","sources":["../../../src/components/Chat/AgentThinking.tsx"],"names":[],"mappings":"AAAA,4BAA4B;AAC5B,YAAY,CAAC;;AAEb,OAAO,EAAM,OAAO,EAAE,MAAM,OAAO,CAAC;AACpC,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAe,eAAe,EAAE,MAAM,SAAS,CAAC;AACvD,OAAO,EACL,WAAW,EACX,kBAAkB,EAClB,kBAAkB,GACnB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAOnC,MAAM,aAAa,GAAc,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE;IACxD,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5D,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACvD,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEtD,MAAM,iBAAiB,GAAG,CACxB,IAAe,EACf,SAAkB,EAClB,QAAsB,EACtB,EAAE;QACF,2BAA2B;QAC3B,IAAI,OAAO,GAAG,IAAI,CAAC,OAAO,IAAI,EAAE,CAAC;QAEjC,yCAAyC;QACzC,IAAI,OAAO,CAAC,UAAU,CAAC,WAAW,CAAC,EAAE,CAAC;YACpC,mEAAmE;YACnE,MAAM,SAAS,GAAG,OAAO,CAAC,KAAK,CAAC,uBAAuB,CAAC,CAAC;YACzD,IAAI,SAAS,EAAE,CAAC;gBACd,MAAM,QAAQ,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC;gBAC9B,yDAAyD;gBACzD,OAAO,GAAG,YAAY,QAAQ,EAAE,CAAC;YACnC,CAAC;iBAAM,CAAC;gBACN,oCAAoC;gBACpC,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,cAAc,EAAE,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC;YACvD,CAAC;QACH,CAAC;aAAM,IAAI,OAAO,CAAC,UAAU,CAAC,uBAAuB,CAAC,EAAE,CAAC;YACvD,sFAAsF;YACtF,IAAI,QAAQ,GAAG,MAAM,CAAC;YAEtB,MAAM,aAAa,GAAG,QAAQ,IAAI,KAAK,CAAC;YACxC,IAAI,SAAS,KAAK,SAAS,IAAI,SAAS,GAAG,CAAC,EAAE,CAAC;gBAC7C,8DAA8D;gBAC9D,KAAK,IAAI,CAAC,GAAG,SAAS,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC;oBACxC,MAAM,QAAQ,GAAG,aAAa,CAAC,CAAC,CAAC,CAAC;oBAClC,MAAM,WAAW,GAAG,QAAQ,EAAE,OAAO,IAAI,EAAE,CAAC;oBAC5C,MAAM,SAAS,GAAG,WAAW,CAAC,KAAK,CAAC,uBAAuB,CAAC,CAAC;oBAC7D,IAAI,SAAS,EAAE,CAAC;wBACd,QAAQ,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC;wBACxB,MAAM;oBACR,CAAC;gBACH,CAAC;YACH,CAAC;YAED,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,gBAAgB,EAAE,QAAQ,CAAC,CAAC;QACxD,CAAC;aAAM,IAAI,OAAO,KAAK,gBAAgB,EAAE,CAAC;YACxC,sEAAsE;YACtE,IAAI,QAAQ,GAAG,MAAM,CAAC;YAEtB,MAAM,aAAa,GAAG,QAAQ,IAAI,KAAK,CAAC;YACxC,IAAI,SAAS,KAAK,SAAS,EAAE,CAAC;gBAC5B,2EAA2E;gBAC3E,KAAK,IAAI,CAAC,GAAG,SAAS,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC;oBACxC,MAAM,QAAQ,GAAG,aAAa,CAAC,CAAC,CAAC,CAAC;oBAClC,MAAM,WAAW,GAAG,QAAQ,EAAE,OAAO,IAAI,EAAE,CAAC;oBAE5C,gDAAgD;oBAChD,MAAM,SAAS,GAAG,WAAW,CAAC,KAAK,CACjC,+CAA+C,CAChD,CAAC;oBACF,IAAI,SAAS,EAAE,CAAC;wBACd,QAAQ,GAAG,SAAS,CAAC,CAAC,CAAC,IAAI,SAAS,CAAC,CAAC,CAAC,CAAC;wBACxC,MAAM;oBACR,CAAC;gBACH,CAAC;YACH,CAAC;YAED,OAAO,GAAG,aAAa,QAAQ,EAAE,CAAC;QACpC,CAAC;aAAM,CAAC;YACN,iCAAiC;YACjC,OAAO,GAAG,OAAO;iBACd,OAAO,CAAC,iBAAiB,EAAE,EAAE,CAAC;iBAC9B,OAAO,CAAC,aAAa,EAAE,EAAE,CAAC;iBAC1B,OAAO,CAAC,gBAAgB,EAAE,EAAE,CAAC;iBAC7B,IAAI,EAAE,CAAC;QACZ,CAAC;QAED,kDAAkD;QAClD,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,gBAAgB,EAAE,MAAM,CAAC,CAAC;QAEpD,sCAAsC;QACtC,IAAI,OAAO,CAAC,MAAM,GAAG,GAAG,EAAE,CAAC;YACzB,OAAO,GAAG,OAAO,CAAC,SAAS,CAAC,CAAC,EAAE,GAAG,CAAC,GAAG,KAAK,CAAC;QAC9C,CAAC;QAED,OAAO,OAAO,IAAI,eAAe,CAAC;IACpC,CAAC,CAAC;IACF,MAAM,YAAY,GAAG,CAAC,KAAkB,EAAE,EAAE;QAC1C,MAAM,SAAS,GAAgB,EAAE,CAAC;QAElC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;YACtC,MAAM,IAAI,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC;YACtB,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,IAAI,EAAE,CAAC;YAEnC,wBAAwB;YACxB,IAAI,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,OAAO,KAAK,OAAO,CAAC,EAAE,CAAC;gBACjD,SAAS;YACX,CAAC;YAED,qEAAqE;YACrE,IAAI,OAAO,KAAK,uBAAuB,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC;gBACjD,MAAM,WAAW,GAAG,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,OAAO,IAAI,EAAE,CAAC;gBAChD,IAAI,WAAW,CAAC,UAAU,CAAC,WAAW,CAAC,EAAE,CAAC;oBACxC,SAAS;gBACX,CAAC;YACH,CAAC;YAED,mDAAmD;YACnD,IAAI,OAAO,KAAK,gBAAgB,IAAI,SAAS,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;gBACzD,sCAAsC;gBACtC,MAAM,QAAQ,GAAG,SAAS,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;gBACjD,IAAI,QAAQ,EAAE,OAAO,EAAE,UAAU,CAAC,WAAW,CAAC,EAAE,CAAC;oBAC/C,qEAAqE;oBACrE,MAAM,SAAS,GAAG,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,qBAAqB,CAAC,CAAC;oBAChE,IAAI,SAAS,EAAE,CAAC;wBACd,QAAQ,CAAC,OAAO,GAAG,aAAa,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC;oBACjD,CAAC;oBACD,SAAS;gBACX,CAAC;YACH,CAAC;YAED,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACvB,CAAC;QAED,OAAO,SAAS,CAAC;IACnB,CAAC,CAAC;IACF,MAAM,aAAa,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAClE,mDAAmD;IACnD,MAAM,kBAAkB,GAAG,OAAO,CAAC,GAAG,EAAE;QACtC,MAAM,WAAW,GAAG,aAAa,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;QAC5D,OAAO,iBAAiB,CACtB,WAAW,EACX,aAAa,CAAC,MAAM,GAAG,CAAC,EACxB,aAAa,CACd,CAAC;IACJ,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,6FAA6F;IAC7F,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,SAAS,IAAI,CAAC,kBAAkB,EAAE,CAAC;YACtC,gBAAgB,CAAC,EAAE,CAAC,CAAC;YACrB,cAAc,CAAC,KAAK,CAAC,CAAC;YACtB,OAAO;QACT,CAAC;QAED,cAAc,CAAC,IAAI,CAAC,CAAC;QACrB,gBAAgB,CAAC,EAAE,CAAC,CAAC;QAErB,IAAI,gBAAgB,GAAG,CAAC,CAAC;QAEzB,MAAM,cAAc,GAAG,WAAW,CAAC,GAAG,EAAE;YACtC,IAAI,gBAAgB,GAAG,kBAAkB,CAAC,MAAM,EAAE,CAAC;gBACjD,gBAAgB,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,GAAG,kBAAkB,CAAC,gBAAgB,CAAC,CAAC,CAAC;gBACxE,gBAAgB,EAAE,CAAC;YACrB,CAAC;iBAAM,CAAC;gBACN,cAAc,CAAC,KAAK,CAAC,CAAC;gBACtB,aAAa,CAAC,cAAc,CAAC,CAAC;YAChC,CAAC;QACH,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,+DAA+D;QAEvE,OAAO,GAAG,EAAE;YACV,aAAa,CAAC,cAAc,CAAC,CAAC;QAChC,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,kBAAkB,EAAE,SAAS,CAAC,CAAC,CAAC;IAEpC,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACjC,OAAO,IAAI,CAAC;IACd,CAAC;IACD,OAAO,CACL,MAAC,WAAW,IAAC,IAAI,EAAE,cAAc,EAAE,YAAY,EAAE,iBAAiB,aAChE,eAAK,SAAS,EAAC,MAAM,aAElB,CAAC,SAAS,IAAI,CACb,KAAC,kBAAkB,IAAC,SAAS,EAAC,6DAA6D,YACzF,MAAC,KAAK,IAAC,OAAO,EAAC,SAAS,EAAC,SAAS,EAAC,SAAS,4BAEzC,cAAc,CAAC,CAAC,CAAC,CAChB,KAAC,eAAe,IAAC,KAAK,EAAE,EAAE,SAAS,EAAE,gBAAgB,EAAE,GAAI,CAC5D,CAAC,CAAC,CAAC,CACF,KAAC,eAAe,KAAG,CACpB,IACK,GACW,CACtB,EAGA,CAAC,cAAc,IAAI,SAAS,IAAI,CAAC,aAAa,IAAI,WAAW,CAAC,IAAI,CACjE,eAAK,SAAS,EAAC,wEAAwE,aACpF,aAAa,EACb,WAAW,IAAI,eAAM,SAAS,EAAC,eAAe,kBAAS,IACpD,CACP,IACG,EAEN,KAAC,kBAAkB,cACjB,cAAK,SAAS,EAAC,gCAAgC,YAC5C,aAAa,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAClC,eAAmB,SAAS,EAAC,iCAAiC,aAC5D,eAAK,SAAS,EAAC,YAAY,sBAAO,KAAK,GAAG,CAAC,IAAO,EAClD,cAAK,SAAS,EAAC,qBAAqB,YACjC,iBAAiB,CAAC,IAAI,EAAE,KAAK,EAAE,aAAa,CAAC,GAC1C,KAJE,IAAI,CAAC,EAAE,CAKX,CACP,CAAC,GACE,GACa,IACT,CACf,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["/* eslint-disable max-len /\n'use client';\n\nimport { FC, useMemo } from 'react';\nimport { useState, useEffect } from 'react';\nimport { AgentStep } from 'types/flowise.type';\nimport { ArrowUpIcon, ChevronDownIcon } from './Icons';\nimport {\n Collapsible,\n CollapsibleContent,\n CollapsibleTrigger,\n} from './ui/collapsible';\nimport { Badge } from './ui/badge';\n\ninterface Props {\n steps: AgentStep[];\n isLoading?: boolean;\n}\n\nconst AgentThinking: FC<Props> = ({ steps, isLoading }) => {\n const [isThinkingOpen, setIsThinkingOpen] = useState(false);\n const [displayedText, setDisplayedText] = useState('');\n const [isStreaming, setIsStreaming] = useState(false);\n\n const formatStepContent = (\n step: AgentStep,\n stepIndex?: number,\n allSteps?: AgentStep[]\n ) => {\n // Simple, clean formatting\n let content = step.content \|\| '';\n\n // Enhanced tool detection and formatting\n if (content.startsWith('Invoking ')) {\n // Extract tool name from \"Invoking \"tool_name\" with {...}\" pattern\n const toolMatch = content.match(/^Invoking\\s+\"([^\"]+)\"/);\n if (toolMatch) {\n const toolName = toolMatch[1];\n // Only show the tool name, remove all content/parameters\n content = `Starting ${toolName}`;\n } else {\n // Fallback: just remove \"Invoking \"\n content = content.replace(/^Invoking\\s+/, '').trim();\n }\n } else if (content.startsWith('Starting unknown-tool')) {\n // For unknown-tool cases, try to get context from previous steps to identify the tool\n let toolName = 'tool';\n\n const stepsToSearch = allSteps \|\| steps;\n if (stepIndex !== undefined && stepIndex > 0) {\n // Look at the previous step to find the tool that was invoked\n for (let i = stepIndex - 1; i >= 0; i--) {\n const prevStep = stepsToSearch[i];\n const prevContent = prevStep?.content \|\| '';\n const toolMatch = prevContent.match(/^Invoking\\s+\"([^\"]+)\"/);\n if (toolMatch) {\n toolName = toolMatch[1];\n break;\n }\n }\n }\n\n content = content.replace(/unknown-tool/gi, toolName);\n } else if (content === 'Completed tool') {\n // For completed tool messages, try to get context from previous steps\n let toolName = 'tool';\n\n const stepsToSearch = allSteps \|\| steps;\n if (stepIndex !== undefined) {\n // Look backwards through all steps to find the most recent tool invocation\n for (let i = stepIndex - 1; i >= 0; i--) {\n const prevStep = stepsToSearch[i];\n const prevContent = prevStep?.content \|\| '';\n\n // Check for both processed and original formats\n const toolMatch = prevContent.match(\n /^(?:Invoking\\s+\"([^\"]+)\"\|Starting\\s+([^\\s]+))/\n );\n if (toolMatch) {\n toolName = toolMatch[1] \|\| toolMatch[2];\n break;\n }\n }\n }\n\n content = `Completed ${toolName}`;\n } else {\n // Clean up other common prefixes\n content = content\n .replace(/^Using tool:\\s+/, '')\n .replace(/^Action:\\s+/, '')\n .replace(/^Tuyệt vời!\\s+/, '')\n .trim();\n }\n\n // Replace any remaining \"unknown-tool\" references\n content = content.replace(/unknown-tool/gi, 'tool');\n\n // If content is too long, truncate it\n if (content.length > 300) {\n content = content.substring(0, 300) + '...';\n }\n\n return content \|\| 'Processing...';\n };\n const processSteps = (steps: AgentStep[]) => {\n const processed: AgentStep[] = [];\n\n for (let i = 0; i < steps.length; i++) {\n const step = steps[i];\n const content = step.content \|\| '';\n\n // Skip exact duplicates\n if (processed.some((p) => p.content === content)) {\n continue;\n }\n\n // Skip standalone \"Starting unknown-tool\" that follows an invocation\n if (content === 'Starting unknown-tool' && i > 0) {\n const prevContent = steps[i - 1]?.content \|\| '';\n if (prevContent.startsWith('Invoking ')) {\n continue;\n }\n }\n\n // Skip standalone \"Completed tool\" without context\n if (content === 'Completed tool' && processed.length > 0) {\n // Try to find the matching tool start\n const lastStep = processed[processed.length - 1];\n if (lastStep?.content?.startsWith('Starting ')) {\n // Update the last step to show completion instead of adding new step\n const toolMatch = lastStep.content.match(/^Starting ([^\\\\s]+)/);\n if (toolMatch) {\n lastStep.content = `Completed ${toolMatch[1]}`;\n }\n continue;\n }\n }\n\n processed.push(step);\n }\n\n return processed;\n };\n const filteredSteps = useMemo(() => processSteps(steps), [steps]);\n // Get the current (latest) step for inline display\n const currentStepContent = useMemo(() => {\n const currentStep = filteredSteps[filteredSteps.length - 1];\n return formatStepContent(\n currentStep,\n filteredSteps.length - 1,\n filteredSteps\n );\n }, [steps]);\n\n // Character-by-character streaming animation effect for better JSON/structured data handling\n useEffect(() => {\n if (!isLoading \|\| !currentStepContent) {\n setDisplayedText('');\n setIsStreaming(false);\n return;\n }\n\n setIsStreaming(true);\n setDisplayedText('');\n\n let currentCharIndex = 0;\n\n const streamInterval = setInterval(() => {\n if (currentCharIndex < currentStepContent.length) {\n setDisplayedText((prev) => prev + currentStepContent[currentCharIndex]);\n currentCharIndex++;\n } else {\n setIsStreaming(false);\n clearInterval(streamInterval);\n }\n }, 30); // Faster character-by-character streaming (30ms per character)\n\n return () => {\n clearInterval(streamInterval);\n };\n }, [currentStepContent, isLoading]);\n\n if (!steps \|\| steps.length === 0) {\n return null;\n }\n return (\n <Collapsible open={isThinkingOpen} onOpenChange={setIsThinkingOpen}>\n <div className=\"mb-3\">\n {/ Show badge only when not loading (at the end) /}\n {!isLoading && (\n <CollapsibleTrigger className=\"flex items-center gap-2 hover:opacity-70 transition-opacity\">\n <Badge variant=\"custom1\" className=\"gap-1.5\">\n Thought for\n {isThinkingOpen ? (\n <ChevronDownIcon style={{ transform: 'rotate(180deg)' }} />\n ) : (\n <ChevronDownIcon />\n )}\n </Badge>\n </CollapsibleTrigger>\n )}\n\n {/ Show streaming text during loading */}\n {!isThinkingOpen && isLoading && (displayedText \|\| isStreaming) && (\n <div className=\"text-muted-foreground text-sm opacity-70 font-mono whitespace-pre-wrap\">\n {displayedText}\n {isStreaming && <span className=\"animate-pulse\">\|</span>}\n </div>\n )}\n </div>\n\n <CollapsibleContent>\n <div className=\"border-l-2 pl-4 mb-4 space-y-2\">\n {filteredSteps.map((step, index) => (\n <div key={step.id} className=\"text-muted-foreground space-y-1\">\n <div className=\"opacity-60\">Step {index + 1}</div>\n <div className=\"whitespace-pre-wrap\">\n {formatStepContent(step, index, filteredSteps)}\n </div>\n </div>\n ))}\n </div>\n </CollapsibleContent>\n </Collapsible>\n );\n};\n\nexport default AgentThinking;\n"]}
1	+ {"version":3,"file":"AgentThinking.js","sourceRoot":"","sources":["../../../src/components/Chat/AgentThinking.tsx"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable max-len /\n'use client';\n\nimport { FC, useMemo } from 'react';\nimport { useState, useEffect } from 'react';\nimport { AgentStep } from 'types/flowise.type';\nimport { ChevronDownIcon } from './Icons';\nimport {\n Collapsible,\n CollapsibleContent,\n CollapsibleTrigger,\n} from './ui/collapsible';\nimport { Badge } from './ui/badge';\n\ninterface Props {\n steps: AgentStep[];\n isLoading?: boolean;\n}\n\nconst AgentThinking: FC<Props> = ({ steps, isLoading }) => {\n const [isThinkingOpen, setIsThinkingOpen] = useState(false);\n const [displayedText, setDisplayedText] = useState('');\n const [isStreaming, setIsStreaming] = useState(false);\n\n const formatStepContent = (\n step: AgentStep,\n stepIndex?: number,\n allSteps?: AgentStep[]\n ) => {\n // Simple, clean formatting\n let content = step.content \|\| '';\n\n // Enhanced tool detection and formatting\n if (content.startsWith('Invoking ')) {\n // Extract tool name from \"Invoking \"tool_name\" with {...}\" pattern\n const toolMatch = content.match(/^Invoking\\s+\"([^\"]+)\"/);\n if (toolMatch) {\n const toolName = toolMatch[1];\n // Only show the tool name, remove all content/parameters\n content = `Starting ${toolName}`;\n } else {\n // Fallback: just remove \"Invoking \"\n content = content.replace(/^Invoking\\s+/, '').trim();\n }\n } else if (content.startsWith('Starting unknown-tool')) {\n // For unknown-tool cases, try to get context from previous steps to identify the tool\n let toolName = 'tool';\n\n const stepsToSearch = allSteps \|\| steps;\n if (stepIndex !== undefined && stepIndex > 0) {\n // Look at the previous step to find the tool that was invoked\n for (let i = stepIndex - 1; i >= 0; i--) {\n const prevStep = stepsToSearch[i];\n const prevContent = prevStep?.content \|\| '';\n const toolMatch = prevContent.match(/^Invoking\\s+\"([^\"]+)\"/);\n if (toolMatch) {\n toolName = toolMatch[1];\n break;\n }\n }\n }\n\n content = content.replace(/unknown-tool/gi, toolName);\n } else if (content === 'Completed tool') {\n // For completed tool messages, try to get context from previous steps\n let toolName = 'tool';\n\n const stepsToSearch = allSteps \|\| steps;\n if (stepIndex !== undefined) {\n // Look backwards through all steps to find the most recent tool invocation\n for (let i = stepIndex - 1; i >= 0; i--) {\n const prevStep = stepsToSearch[i];\n const prevContent = prevStep?.content \|\| '';\n\n // Check for both processed and original formats\n const toolMatch = prevContent.match(\n /^(?:Invoking\\s+\"([^\"]+)\"\|Starting\\s+([^\\s]+))/\n );\n if (toolMatch) {\n toolName = toolMatch[1] \|\| toolMatch[2];\n break;\n }\n }\n }\n\n content = `Completed ${toolName}`;\n } else {\n // Clean up other common prefixes\n content = content\n .replace(/^Using tool:\\s+/, '')\n .replace(/^Action:\\s+/, '')\n .replace(/^Tuyệt vời!\\s+/, '')\n .trim();\n }\n\n // Replace any remaining \"unknown-tool\" references\n content = content.replace(/unknown-tool/gi, 'tool');\n\n // If content is too long, truncate it\n if (content.length > 300) {\n content = content.substring(0, 300) + '...';\n }\n\n return content \|\| 'Processing...';\n };\n const processSteps = (steps: AgentStep[]) => {\n const processed: AgentStep[] = [];\n\n for (let i = 0; i < steps.length; i++) {\n const step = steps[i];\n const content = step.content \|\| '';\n\n // Skip exact duplicates\n if (processed.some((p) => p.content === content)) {\n continue;\n }\n\n // Skip standalone \"Starting unknown-tool\" that follows an invocation\n if (content === 'Starting unknown-tool' && i > 0) {\n const prevContent = steps[i - 1]?.content \|\| '';\n if (prevContent.startsWith('Invoking ')) {\n continue;\n }\n }\n\n // Skip standalone \"Completed tool\" without context\n if (content === 'Completed tool' && processed.length > 0) {\n // Try to find the matching tool start\n const lastStep = processed[processed.length - 1];\n if (lastStep?.content?.startsWith('Starting ')) {\n // Update the last step to show completion instead of adding new step\n const toolMatch = lastStep.content.match(/^Starting ([^\\\\s]+)/);\n if (toolMatch) {\n lastStep.content = `Completed ${toolMatch[1]}`;\n }\n continue;\n }\n }\n\n processed.push(step);\n }\n\n return processed;\n };\n const filteredSteps = useMemo(() => processSteps(steps), [steps]);\n // Get the current (latest) step for inline display\n const currentStepContent = useMemo(() => {\n const currentStep = filteredSteps[filteredSteps.length - 1];\n return formatStepContent(\n currentStep,\n filteredSteps.length - 1,\n filteredSteps\n );\n }, [steps]);\n\n // Character-by-character streaming animation effect for better JSON/structured data handling\n useEffect(() => {\n if (!isLoading \|\| !currentStepContent) {\n setDisplayedText('');\n setIsStreaming(false);\n return;\n }\n\n setIsStreaming(true);\n setDisplayedText('');\n\n let currentCharIndex = 0;\n\n const streamInterval = setInterval(() => {\n if (currentCharIndex < currentStepContent.length) {\n setDisplayedText((prev) => prev + currentStepContent[currentCharIndex]);\n currentCharIndex++;\n } else {\n setIsStreaming(false);\n clearInterval(streamInterval);\n }\n }, 30); // Faster character-by-character streaming (30ms per character)\n\n return () => {\n clearInterval(streamInterval);\n };\n }, [currentStepContent, isLoading]);\n\n if (!steps \|\| steps.length === 0) {\n return null;\n }\n return (\n <Collapsible open={isThinkingOpen} onOpenChange={setIsThinkingOpen}>\n <div className=\"mb-3\">\n {/ Show badge only when not loading (at the end) /}\n {!isLoading && (\n <CollapsibleTrigger className=\"flex items-center gap-2 hover:opacity-70 transition-opacity\">\n <Badge variant=\"custom1\" className=\"gap-1.5\">\n Thought for\n {isThinkingOpen ? (\n <ChevronDownIcon style={{ transform: 'rotate(180deg)' }} />\n ) : (\n <ChevronDownIcon />\n )}\n </Badge>\n </CollapsibleTrigger>\n )}\n\n {/ Show streaming text during loading */}\n {!isThinkingOpen && isLoading && (displayedText \|\| isStreaming) && (\n <div className=\"text-muted-foreground text-sm opacity-70 font-mono whitespace-pre-wrap\">\n {displayedText}\n {isStreaming && <span className=\"animate-pulse\">\|</span>}\n </div>\n )}\n </div>\n\n <CollapsibleContent>\n <div className=\"border-l-2 pl-4 mb-4 space-y-2\">\n {filteredSteps.map((step, index) => (\n <div key={step.id} className=\"text-muted-foreground space-y-1\">\n <div className=\"opacity-60\">Step {index + 1}</div>\n <div className=\"whitespace-pre-wrap\">\n {formatStepContent(step, index, filteredSteps)}\n </div>\n </div>\n ))}\n </div>\n </CollapsibleContent>\n </Collapsible>\n );\n};\n\nexport default AgentThinking;\n"]}

package/.rollup.cache/Users/tungthai/Desktop/Develop/clik-ai-chatbot-embedded/dist/components/Chat/BookMeetingForm.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BookMeetingForm.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/BookMeetingForm.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,EAAE,EAAuB,MAAM,OAAO,CAAC;AAYhD,KAAK,SAAS,GAAG;IACf,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,QAAA,MAAM,eAAe,EAAE,EAAE,CAAC,SAAS,~~CA4XlC~~,CAAC;AAEF,eAAe,eAAe,CAAC"}
1	+ {"version":3,"file":"BookMeetingForm.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/BookMeetingForm.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,EAAE,EAAuB,MAAM,OAAO,CAAC;AAYhD,KAAK,SAAS,GAAG;IACf,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,QAAA,MAAM,eAAe,EAAE,EAAE,CAAC,SAAS,CA+XlC,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/.rollup.cache/Users/tungthai/Desktop/Develop/clik-ai-chatbot-embedded/dist/components/Chat/BookMeetingForm.js CHANGED Viewed

@@ -77,7 +77,8 @@ const BookMeetingForm = ({ chatId, brandAlias, userId }) => {
         if (isEmptyString(formData.channel)) {
             errors.channel = messages?.channelError || 'Channel is required';
         }
-        if (isEmptyString(formData.host)) {
+        if (isEmptyString(formData.host) &&
+            formData?.channel !== CHANNEL_OPTIONS.PHONE_CALL.value) {
             errors.host = messages?.hostError || 'Host is required';
         }
         if (formData?.channel === CHANNEL_OPTIONS.PHONE_CALL.value &&

package/.rollup.cache/Users/tungthai/Desktop/Develop/clik-ai-chatbot-embedded/dist/components/Chat/BookMeetingForm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BookMeetingForm.js","sourceRoot":"","sources":["../../../src/components/Chat/BookMeetingForm.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,eAAe,EACf,gBAAgB,EAChB,YAAY,GACb,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC1D,OAAO,EAAM,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAChD,OAAO,EAAE,kBAAkB,EAAS,MAAM,0BAA0B,CAAC;AACrE,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AACjE,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAE9D,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,gBAAgB,MAAM,uBAAuB,CAAC;AACrD,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,OAAO,MAAM,cAAc,CAAC;AACnC,OAAO,gBAAgB,MAAM,uBAAuB,CAAC;AAQrD,MAAM,eAAe,GAAkB,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,EAAE,EAAE;IACxE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,gBAAgB,EAAE,CAAC;IAE9C,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC;QACvC,SAAS,EAAE,IAAI,IAAI,EAAE,CAAC,WAAW,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;QACjD,SAAS,EAAE,EAAE;QACb,QAAQ,EAAE,gBAAgB,CAAC,cAAc,CAAC,KAAK;QAC/C,OAAO,EAAE,EAAE;QACX,IAAI,EAAE,EAAE;QACR,eAAe,EAAE,EAAW;KAC7B,CAAC,CAAC;IACH,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,EAAoB,CAAC;IACrE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAa,EAAE,CAAC,CAAC;IACrD,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEhD,MAAM,YAAY,GAAG,CAAC,CAAsC,EAAE,EAAE;QAC9D,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,CAAC,CAAC,MAAM,CAAC;QACjC,WAAW,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;YACzB,GAAG,QAAQ;YACX,CAAC,IAAI,CAAC,EAAE,KAAK;SACd,CAAC,CAAC,CAAC;IACN,CAAC,CAAC;IAEF,MAAM,kBAAkB,GAAG,CAAC,KAAa,EAAE,IAAY,EAAE,EAAE;QACzD,WAAW,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;YACzB,GAAG,QAAQ;YACX,CAAC,IAAI,CAAC,EAAE,KAAK;SACd,CAAC,CAAC,CAAC;IACN,CAAC,CAAC;IAEF,MAAM,eAAe,GAAG,CAAC,OAAe,EAAE,OAAe,EAAE,EAAE;QAC3D,MAAM,GAAG,GAAG,IAAI,IAAI,CAAC,OAAO,CAAC,CAAC;QAC9B,MAAM,CAAC,KAAK,EAAE,OAAO,CAAC,GAAG,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;QAExD,IACE,KAAK,CAAC,KAAK,CAAC;YACZ,KAAK,CAAC,OAAO,CAAC;YACd,KAAK,GAAG,CAAC;YACT,KAAK,GAAG,EAAE;YACV,OAAO,GAAG,CAAC;YACX,OAAO,GAAG,EAAE,EACZ,CAAC;YACD,MAAM,IAAI,KAAK,CAAC,wBAAwB,OAAO,EAAE,CAAC,CAAC;QACrD,CAAC;QAED,MAAM,IAAI,GAAG,IAAI,IAAI,CACnB,GAAG,CAAC,WAAW,EAAE,EACjB,GAAG,CAAC,QAAQ,EAAE,EACd,GAAG,CAAC,OAAO,EAAE,EACb,KAAK,EACL,OAAO,CACR,CAAC;QACF,OAAO,IAAI,CAAC;IACd,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,GAAG,EAAE;QACxB,MAAM,MAAM,GAAe,EAAE,CAAC;QAC9B,MAAM,QAAQ,GAAG,KAAK,EAAE,eAAe,EAAE,QAAQ,CAAC;QAElD,IAAI,aAAa,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAE,CAAC;YACtC,MAAM,CAAC,SAAS,GAAG,QAAQ,EAAE,cAAc,IAAI,kBAAkB,CAAC;QACpE,CAAC;aAAM,IAAI,QAAQ,EAAE,SAAS,EAAE,CAAC;YAC/B,IAAI,CAAC;gBACH,MAAM,UAAU,GAAG,eAAe,CAChC,QAAQ,CAAC,SAAS,EAClB,QAAQ,CAAC,SAAS,CACnB,CAAC;gBACF,IAAI,UAAU,GAAG,IAAI,IAAI,EAAE,EAAE,CAAC;oBAC5B,MAAM,CAAC,SAAS;wBACd,QAAQ,EAAE,kBAAkB,IAAI,qBAAqB,CAAC;gBAC1D,CAAC;YACH,CAAC;YAAC,OAAO,CAAM,EAAE,CAAC;gBAChB,MAAM,CAAC,SAAS,GAAG,CAAC,CAAC,OAAO,CAAC;YAC/B,CAAC;QACH,CAAC;QAED,IAAI,aAAa,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC;YACrC,MAAM,CAAC,QAAQ,GAAG,QAAQ,EAAE,aAAa,IAAI,sBAAsB,CAAC;QACtE,CAAC;QAED,IAAI,aAAa,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC;YACpC,MAAM,CAAC,OAAO,GAAG,QAAQ,EAAE,YAAY,IAAI,qBAAqB,CAAC;QACnE,CAAC;QACD,IAAI,aAAa,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC;YACjC,MAAM,CAAC,IAAI,GAAG,QAAQ,EAAE,SAAS,IAAI,kBAAkB,CAAC;QAC1D,CAAC;QAED,IACE,QAAQ,EAAE,OAAO,KAAK,eAAe,CAAC,UAAU,CAAC,KAAK;YACtD,CAAC,kBAAkB,CAAC,QAAQ,EAAE,eAAwB,CAAC,EACvD,CAAC;YACD,MAAM,CAAC,IAAI,GAAG,QAAQ,EAAE,kBAAkB,IAAI,sBAAsB,CAAC;QACvE,CAAC;QAED,OAAO,MAAM,CAAC;IAChB,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,KAAK,EAAE,CAAmC,EAAE,EAAE;QACjE,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,UAAU,CAAC,IAAI,CAAC,CAAC;QACjB,IAAI,CAAC;YACH,MAAM,gBAAgB,GAAG,YAAY,EAAE,CAAC;YACxC,IAAI,MAAM,CAAC,IAAI,CAAC,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;gBAC1C,SAAS,CAAC,gBAAgB,CAAC,CAAC;gBAC5B,OAAO;YACT,CAAC;YAED,SAAS,CAAC,EAAE,CAAC,CAAC;YACd,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,eAAe,EAAE,GACtE,QAAQ,CAAC;YACX,MAAM,WAAW,GAAoB;gBACnC,SAAS;gBACT,SAAS;gBACT,QAAQ;gBACR,OAAO;gBACP,KAAK,EAAE,cAAc;gBACrB,MAAM;gBACN,KAAK,EAAE,IAAI,UAAU,EAAE;gBACvB,MAAM;gBACN,IAAI,EACF,QAAQ,EAAE,OAAO,KAAK,eAAe,CAAC,UAAU,CAAC,KAAK;oBACpD,CAAC,CAAC,eAAe;oBACjB,CAAC,CAAC,IAAI;aACX,CAAC;YAEF,MAAM,GAAG,GAAG,MAAM,iBAAiB,CAAC,WAAW,EAAE,OAAO,CAAC,CAAC;YAE1D,IAAI,GAAG,EAAE,EAAE,EAAE,CAAC;gBACZ,YAAY,CAAC,OAAO,CAAC,eAAe,EAAE,GAAG,CAAC,EAAE,CAAC,CAAC;gBAC9C,WAAW,CAAC,IAAI,CAAC,CAAC;gBAClB,eAAe,CAAC;oBACd,OAAO,EACL,KAAK,EAAE,eAAe,EAAE,QAAQ,EAAE,aAAa;wBAC/C,mBAAmB;oBACrB,MAAM,EAAE,GAAG;iBACZ,CAAC,CAAC;YACL,CAAC;QACH,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;YACrB,WAAW,CAAC,KAAK,CAAC,CAAC;YACnB,eAAe,CAAC;gBACd,OAAO,EACL,KAAK,EAAE,eAAe,EAAE,QAAQ,EAAE,WAAW,IAAI,kBAAkB;gBACrE,MAAM,EAAE,GAAG;aACZ,CAAC,CAAC;QACL,CAAC;gBAAS,CAAC;YACT,UAAU,CAAC,KAAK,CAAC,CAAC;QACpB,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,kBAAkB,GAAG,KAAK,EAAE,MAAc,EAAE,EAAE;QAClD,IAAI,CAAC,MAAM;YAAE,OAAO;QAEpB,MAAM,GAAG,GAAG,MAAM,cAAc,CAAC,OAAO,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE,CAAC,CAAC;QAC1D,IAAI,CAAC,GAAG,IAAI,CAAC,GAAG,EAAE,MAAM,EAAE,CAAC;YACzB,OAAO;QACT,CAAC;QAED,WAAW,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;YACzB,GAAG,QAAQ;YACX,IAAI,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,YAAY;SACnC,CAAC,CAAC,CAAC;IACN,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,MAAM,GAAG,YAAY,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;QAC9C,IAAI,MAAM,EAAE,CAAC;YACX,kBAAkB,CAAC,MAAM,CAAC,CAAC;QAC7B,CAAC;IACH,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,KAAC,MAAM,CAAC,GAAG,IACT,SAAS,EAAC,4CAA4C,EACtD,OAAO,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,EAC7B,OAAO,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,YAE7B,gBACE,SAAS,EAAC,+DAA+D,EACzE,QAAQ,EAAE,YAAY,aAEtB,cAAK,SAAS,EAAC,wCAAwC,YACpD,KAAK,EAAE,eAAe,EAAE,KAAK,IAAI,cAAc,GAC5C,EAEN,eAAK,SAAS,EAAC,qBAAqB,aAElC,eAAK,SAAS,EAAC,yBAAyB,aACtC,gBACE,SAAS,EAAC,6DAA6D,EACvE,OAAO,EAAC,WAAW,YAElB,KAAK,EAAE,eAAe,EAAE,SAAS,IAAI,MAAM,GACtC,EAER,cAAK,SAAS,EAAC,QAAQ,YACrB,KAAC,gBAAgB,IACf,QAAQ,EAAE,CAAC,IAAiB,EAAE,EAAE;4CAC9B,IAAI,CAAC,IAAI;gDAAE,OAAO;4CAElB,WAAW,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;gDACzB,GAAG,QAAQ;gDACX,SAAS,EAAE,IAAI,CAAC,WAAW,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;6CAC5C,CAAC,CAAC,CAAC;wCACN,CAAC,EACD,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,IAAI,IAAI,CAAC,QAAQ,EAAE,SAAS,CAAC,GACpC,GACE,IACF,EAGN,eAAK,SAAS,EAAC,eAAe,aAC5B,eAAK,SAAS,EAAC,yBAAyB,aAEtC,eAAK,SAAS,EAAC,2BAA2B,aACxC,gBACE,SAAS,EAAC,uDAAuD,EACjE,OAAO,EAAC,WAAW,YAElB,KAAK,EAAE,eAAe,EAAE,SAAS,IAAI,MAAM,GACtC,EAER,wBACE,KAAC,SAAS,IACR,IAAI,EAAC,WAAW,EAChB,OAAO,EAAE,YAAY,EACrB,eAAe,EAAC,mEAAmE,EACnF,WAAW,EACT,KAAK,EAAE,eAAe,EAAE,SAAS,IAAI,aAAa,EAEpD,QAAQ,EAAE,kBAAkB,EAC5B,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,MAAM,EAAE,SAAS,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE,GACpD,GACE,IACF,EAEN,eAAK,SAAS,EAAC,2BAA2B,aACxC,gBACE,SAAS,EAAC,uDAAuD,EACjE,OAAO,EAAC,UAAU,YAEjB,KAAK,EAAE,eAAe,EAAE,aAAa,IAAI,UAAU,GAC9C,EAER,wBACE,KAAC,SAAS,IACR,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,gBAAgB,CAAC,EACxC,wBAAwB,EAAC,OAAO,EAChC,eAAe,EAAC,2DAA2D,EAC3E,WAAW,EACT,KAAK,EAAE,eAAe,EAAE,aAAa,IAAI,iBAAiB,EAE5D,QAAQ,EAAE,kBAAkB,EAC5B,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAC,IAAI,EACjB,SAAS,EAAE,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE,GACnD,GACE,IACF,IACF,EAEL,MAAM,CAAC,SAAS,IAAI,CACnB,YAAG,SAAS,EAAC,sBAAsB,YAAE,MAAM,CAAC,SAAS,GAAK,CAC3D,EACA,MAAM,CAAC,QAAQ,IAAI,CAClB,YAAG,SAAS,EAAC,sBAAsB,YAAE,MAAM,CAAC,QAAQ,GAAK,CAC1D,IACG,EAGN,eAAK,SAAS,EAAC,eAAe,aAC5B,eAAK,SAAS,EAAC,yBAAyB,aACtC,gBACE,SAAS,EAAC,6DAA6D,EACvE,OAAO,EAAC,SAAS,YAEhB,KAAK,EAAE,eAAe,EAAE,YAAY,IAAI,SAAS,GAC5C,EAER,cAAK,SAAS,EAAC,QAAQ,YACrB,KAAC,iBAAiB,IAChB,IAAI,EAAC,SAAS,EACd,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,eAAe,CAAC,EACvC,WAAW,EACT,KAAK,EAAE,eAAe,EAAE,YAAY,IAAI,gBAAgB,EAE1D,QAAQ,EAAE,kBAAkB,EAC5B,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE,GAClD,GACE,IACF,EACL,MAAM,CAAC,OAAO,IAAI,CACjB,YAAG,SAAS,EAAC,sBAAsB,YAAE,MAAM,CAAC,OAAO,GAAK,CACzD,IACG,EAGN,eAAK,SAAS,EAAC,eAAe,aAC5B,eAAK,SAAS,EAAC,yBAAyB,aACtC,gBACE,SAAS,EAAC,6DAA6D,EACvE,OAAO,EAAC,MAAM,YAEb,KAAK,EAAE,eAAe,EAAE,SAAS,IAAI,MAAM,GACtC,EAER,cAAK,SAAS,EAAC,sBAAsB,YAClC,QAAQ,EAAE,OAAO,KAAK,eAAe,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,CACxD,KAAC,gBAAgB,IACf,QAAQ,EAAE,CAAC,GAAU,EAAE,EAAE;oDACvB,WAAW,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;wDACzB,GAAG,QAAQ;wDACX,eAAe,EAAE,GAAG;qDACrB,CAAC,CAAC,CAAC;gDACN,CAAC,EACD,WAAW,EACT,KAAK,EAAE,eAAe,EAAE,sBAAsB;oDAC9C,cAAc,EAEhB,KAAK,EAAE,QAAQ,EAAE,eAAe,EAChC,QAAQ,EAAE,QAAQ,EAClB,oBAAoB,EAAE,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE,GAC3D,CACH,CAAC,CAAC,CAAC,CACF,gBACE,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,MAAM,EACX,EAAE,EAAC,MAAM,EACT,SAAS,EAAE;wGACyE,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE,EAAE,EAC3H,WAAW,EACT,KAAK,EAAE,eAAe,EAAE,gBAAgB;oDACxC,eAAe,EAEjB,QAAQ,QACR,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,YAAY,EACtB,KAAK,EAAE,QAAQ,EAAE,IAAI,GACrB,CACH,GACG,IACF,EACL,MAAM,CAAC,IAAI,IAAI,CACd,YAAG,SAAS,EAAC,sBAAsB,YAAE,MAAM,CAAC,IAAI,GAAK,CACtD,IACG,EAEN,eAAK,SAAS,EAAC,2CAA2C,aACvD,YAAY,IAAI,CACf,cAAK,SAAS,EAAC,8CAA8C,YAC3D,YACE,SAAS,EAAE,+BAA+B,YAAY,EAAE,MAAM,KAAK,GAAG,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,cAAc,EAAE,YAE3G,YAAY,CAAC,OAAO,GACnB,GACA,CACP,EACD,cAAK,SAAS,EAAC,QAAQ,YACrB,iBACE,SAAS,EAAE,4NAA4N,OAAO,CAAC,CAAC,CAAC,kCAAkC,CAAC,CAAC,CAAC,EAAE,EAAE,EAC1R,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,QAAQ,YAEjB,OAAO,CAAC,CAAC,CAAC,CACT,KAAC,OAAO,KAAG,CACZ,CAAC,CAAC,CAAC,CACF,GAAG,KAAK,EAAE,OAAO,EAAE,aAAa,IAAI,QAAQ,EAAE,CAC/C,GACM,GACL,IACF,IACF,IACD,GACI,CACd,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,eAAe,CAAC","sourcesContent":["import {\n CHANNEL_OPTIONS,\n DURATION_OPTIONS,\n TIME_OPTIONS,\n} from 'commons/constants';\nimport { FormErrors, StatusSubmitType } from 'constants/form';\nimport { motion } from 'framer-motion';\nimport { useConfiguration } from 'hooks/useConfiguration';\nimport { FC, useEffect, useState } from 'react';\nimport { isValidPhoneNumber, Value } from 'react-phone-number-input';\nimport { createBookMeeting } from 'services/bookMeeting.service';\nimport { getUserContact } from 'services/userContact.service';\nimport { BookMeetingType } from 'types/bookMeeting.type';\nimport { isEmptyString } from 'utils/functionUtils';\nimport DataPickerCustom from './ui/DataPickerCustom';\nimport { SelectBox } from './ui/SelectBox';\nimport { SelectBoxWithIcon } from './ui/SelectBoxWithIcon';\nimport Spinner from './ui/Spinner';\nimport PhoneNumberInput from './ui/PhoneNumberInput';\n\ntype PropsType = {\n chatId: string;\n brandAlias: string;\n userId: string;\n};\n\nconst BookMeetingForm: FC<PropsType> = ({ chatId, brandAlias, userId }) => {\n const { theme, apiHost } = useConfiguration();\n\n const [loading, setLoading] = useState(false);\n const [formData, setFormData] = useState({\n startDate: new Date().toISOString().split('T')[0],\n startTime: '',\n duration: DURATION_OPTIONS.THIRTY_MINUTES.value,\n channel: '',\n host: '',\n hostPhoneNumber: '' as Value,\n });\n const [statusSubmit, setStatusSubmit] = useState<StatusSubmitType>();\n const [errors, setErrors] = useState<FormErrors>({});\n const [disabled, setDisabled] = useState(false);\n\n const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n const { name, value } = e.target;\n setFormData((prevData) => ({\n ...prevData,\n [name]: value,\n }));\n };\n\n const handleChangeSelect = (value: string, name: string) => {\n setFormData((prevData) => ({\n ...prevData,\n [name]: value,\n }));\n };\n\n const parseTimeToDate = (timeStr: string, dateStr: string) => {\n const now = new Date(dateStr);\n const [hours, minutes] = timeStr.split(':').map(Number);\n\n if (\n isNaN(hours) \|\|\n isNaN(minutes) \|\|\n hours < 0 \|\|\n hours > 23 \|\|\n minutes < 0 \|\|\n minutes > 59\n ) {\n throw new Error(`Invalid time format: ${timeStr}`);\n }\n\n const date = new Date(\n now.getFullYear(),\n now.getMonth(),\n now.getDate(),\n hours,\n minutes\n );\n return date;\n };\n\n const validateForm = () => {\n const errors: FormErrors = {};\n const messages = theme?.bookMeetingForm?.messages;\n\n if (isEmptyString(formData.startTime)) {\n errors.startTime = messages?.startTimeError \|\| 'Time is required';\n } else if (formData?.startDate) {\n try {\n const parsedDate = parseTimeToDate(\n formData.startTime,\n formData.startDate\n );\n if (parsedDate < new Date()) {\n errors.startTime =\n messages?.startTimeInThePast \|\| 'Time is in the past';\n }\n } catch (e: any) {\n errors.startTime = e.message;\n }\n }\n\n if (isEmptyString(formData.duration)) {\n errors.duration = messages?.durationError \|\| 'Duration is required';\n }\n\n if (isEmptyString(formData.channel)) {\n errors.channel = messages?.channelError \|\| 'Channel is required';\n }\n if (isEmptyString(formData.host)) {\n errors.host = messages?.hostError \|\| 'Host is required';\n }\n\n if (\n formData?.channel === CHANNEL_OPTIONS.PHONE_CALL.value &&\n !isValidPhoneNumber(formData?.hostPhoneNumber as Value)\n ) {\n errors.host = messages?.invalidPhoneNumber \|\| 'Invalid phone number';\n }\n\n return errors;\n };\n\n const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {\n e.preventDefault();\n setLoading(true);\n try {\n const validationErrors = validateForm();\n if (Object.keys(validationErrors)?.length) {\n setErrors(validationErrors);\n return;\n }\n\n setErrors({});\n const { startDate, startTime, duration, channel, host, hostPhoneNumber } =\n formData;\n const requestData: BookMeetingType = {\n startDate,\n startTime,\n duration,\n channel,\n title: 'Book Meeting',\n chatId,\n brand: `/${brandAlias}`,\n userId,\n host:\n formData?.channel === CHANNEL_OPTIONS.PHONE_CALL.value\n ? hostPhoneNumber\n : host,\n };\n\n const res = await createBookMeeting(requestData, apiHost);\n\n if (res?.id) {\n localStorage.setItem('bookMeetingId', res.id);\n setDisabled(true);\n setStatusSubmit({\n message:\n theme?.bookMeetingForm?.messages?.submitSuccess \|\|\n 'Submit successful',\n status: 200,\n });\n }\n } catch (error) {\n console.error(error);\n setDisabled(false);\n setStatusSubmit({\n message:\n theme?.bookMeetingForm?.messages?.submitError \|\| 'Failed to submit',\n status: 500,\n });\n } finally {\n setLoading(false);\n }\n };\n\n const getUserContactData = async (userId: string) => {\n if (!userId) return;\n\n const res = await getUserContact(apiHost, { id: userId });\n if (!res \|\| !res?.length) {\n return;\n }\n\n setFormData((prevData) => ({\n ...prevData,\n host: res[0]?.emails?.primaryEmail,\n }));\n };\n\n useEffect(() => {\n const userId = localStorage.getItem('userId');\n if (userId) {\n getUserContactData(userId);\n }\n }, []);\n\n return (\n <motion.div\n className=\"w-full mx-auto max-w-[358px] group/message\"\n initial={{ y: 5, opacity: 0 }}\n animate={{ y: 0, opacity: 1 }}\n >\n <form\n className=\"flex flex-col gap-3 bg-white px-3 py-3 pb-4 rounded-lg w-full\"\n onSubmit={handleSubmit}\n >\n <div className=\"text-[#18181B] font-semibold text-base\">\n {theme?.bookMeetingForm?.title \|\| 'Book meeting'}\n </div>\n\n <div className=\"flex flex-col gap-3\">\n {/* Date /}\n <div className=\"flex items-center gap-2\">\n <label\n className=\"w-1/4 text-[#18181B] font-medium text-[14px] leading-[14px]\"\n htmlFor=\"startDate\"\n >\n {theme?.bookMeetingForm?.labelDate \|\| 'Date'}\n </label>\n\n <div className=\"w-full\">\n <DataPickerCustom\n onChange={(date: Date \| null) => {\n if (!date) return;\n\n setFormData((prevData) => ({\n ...prevData,\n startDate: date.toISOString().split('T')[0],\n }));\n }}\n disabled={disabled}\n value={new Date(formData?.startDate)}\n />\n </div>\n </div>\n\n {/ Time and Duration /}\n <div className=\"flex flex-col\">\n <div className=\"flex items-center gap-3\">\n {/ Time /}\n <div className=\"flex flex-col gap-2 w-1/2\">\n <label\n className=\"text-[#18181B] font-medium text-[14px] leading-[14px]\"\n htmlFor=\"startTime\"\n >\n {theme?.bookMeetingForm?.labelTime \|\| 'Time'}\n </label>\n\n <div>\n <SelectBox\n name=\"startTime\"\n options={TIME_OPTIONS}\n optionClassName=\"text-[#18181B] h-[40px] py-2 pr-2 pl-3 border rounded-lg bg-white\"\n placeholder={\n theme?.bookMeetingForm?.labelTime \|\| 'Select Time'\n }\n onChange={handleChangeSelect}\n disabled={disabled}\n className={errors?.startTime ? 'border-red-500' : ''}\n />\n </div>\n </div>\n {/ Duration /}\n <div className=\"flex flex-col gap-2 w-1/2\">\n <label\n className=\"text-[#18181B] font-medium text-[14px] leading-[14px]\"\n htmlFor=\"duration\"\n >\n {theme?.bookMeetingForm?.labelDuration \|\| 'Duration'}\n </label>\n\n <div>\n <SelectBox\n name=\"duration\"\n options={Object.values(DURATION_OPTIONS)}\n optionContainerClassName=\"gap-4\"\n optionClassName=\"!p-0 !h-[24px] hover:bg-transparent hover:!text-[#1E6EB4]\"\n placeholder={\n theme?.bookMeetingForm?.labelDuration \|\| 'Select Duration'\n }\n onChange={handleChangeSelect}\n disabled={disabled}\n defaultValue=\"30\"\n className={errors?.duration ? 'border-red-500' : ''}\n />\n </div>\n </div>\n </div>\n\n {errors.startTime && (\n <p className=\"text-red-500 text-sm\">{errors.startTime}</p>\n )}\n {errors.duration && (\n <p className=\"text-red-500 text-sm\">{errors.duration}</p>\n )}\n </div>\n\n {/ Channel /}\n <div className=\"flex flex-col\">\n <div className=\"flex gap-2 items-center\">\n <label\n className=\"w-1/4 text-[#18181B] font-medium text-[14px] leading-[14px]\"\n htmlFor=\"channel\"\n >\n {theme?.bookMeetingForm?.labelChannel \|\| 'Channel'}\n </label>\n\n <div className=\"w-full\">\n <SelectBoxWithIcon\n name=\"channel\"\n options={Object.values(CHANNEL_OPTIONS)}\n placeholder={\n theme?.bookMeetingForm?.labelChannel \|\| 'Select Channel'\n }\n onChange={handleChangeSelect}\n disabled={disabled}\n className={errors?.channel ? 'border-red-500' : ''}\n />\n </div>\n </div>\n {errors.channel && (\n <p className=\"text-red-500 text-sm\">{errors.channel}</p>\n )}\n </div>\n\n {/ Host */}\n <div className=\"flex flex-col\">\n <div className=\"flex gap-2 items-center\">\n <label\n className=\"w-1/4 text-[#18181B] font-medium text-[14px] leading-[14px]\"\n htmlFor=\"host\"\n >\n {theme?.bookMeetingForm?.labelHost \|\| 'Host'}\n </label>\n\n <div className=\"flex flex-col w-full\">\n {formData?.channel === CHANNEL_OPTIONS.PHONE_CALL.value ? (\n <PhoneNumberInput\n onChange={(val: Value) => {\n setFormData((prevData) => ({\n ...prevData,\n hostPhoneNumber: val,\n }));\n }}\n placeholder={\n theme?.bookMeetingForm?.placeholderPhoneNumber \|\|\n 'Phone number'\n }\n value={formData?.hostPhoneNumber}\n disabled={disabled}\n numberInputClassName={errors?.host ? '!border-red-500' : ''}\n />\n ) : (\n <input\n type=\"email\"\n name=\"host\"\n id=\"host\"\n className={`w-full rounded-lg border border-[#e0e0e0] bg-white pt-2 pr-[8px] pb-2 pl-3 text-base font-medium text-[#18181B] outline-none focus:border-[#6A64F1] focus:shadow-md h-[40px] \n disabled:cursor-not-allowed disabled:!bg-gray-100 disabled:!text-gray-500 ${errors?.host ? '!border-red-500' : ''}`}\n placeholder={\n theme?.bookMeetingForm?.placeholderEmail \|\|\n 'Email address'\n }\n required\n disabled={disabled}\n onChange={handleChange}\n value={formData?.host}\n />\n )}\n </div>\n </div>\n {errors.host && (\n <p className=\"text-red-500 text-sm\">{errors.host}</p>\n )}\n </div>\n\n <div className=\"flex flex-col items-center justify-center\">\n {statusSubmit && (\n <div className=\"flex items-center w-full justify-center mb-2\">\n <p\n className={`text-green-500 text-sm mt-1 ${statusSubmit?.status === 200 ? 'text-green-500' : 'text-red-500'}`}\n >\n {statusSubmit.message}\n </p>\n </div>\n )}\n <div className=\"w-full\">\n <button\n className={`shadow bg-[#1E6EB4] hover:bg-[#4096ff] focus:shadow-outline focus:outline-none text-white font-bold py-2 px-8 rounded-lg w-full h-[40px] disabled:cursor-not-allowed disabled:!bg-[#0000000a] disabled:!text-[#00000040] ${loading ? 'flex items-center justify-center' : ''}`}\n type=\"submit\"\n disabled={disabled}\n >\n {loading ? (\n <Spinner />\n ) : (\n `${theme?.buttons?.textBtnSubmit \|\| 'Submit'}`\n )}\n </button>\n </div>\n </div>\n </div>\n </form>\n </motion.div>\n );\n};\n\nexport default BookMeetingForm;\n"]}
1	+ {"version":3,"file":"BookMeetingForm.js","sourceRoot":"","sources":["../../../src/components/Chat/BookMeetingForm.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n CHANNEL_OPTIONS,\n DURATION_OPTIONS,\n TIME_OPTIONS,\n} from 'commons/constants';\nimport { FormErrors, StatusSubmitType } from 'constants/form';\nimport { motion } from 'framer-motion';\nimport { useConfiguration } from 'hooks/useConfiguration';\nimport { FC, useEffect, useState } from 'react';\nimport { isValidPhoneNumber, Value } from 'react-phone-number-input';\nimport { createBookMeeting } from 'services/bookMeeting.service';\nimport { getUserContact } from 'services/userContact.service';\nimport { BookMeetingType } from 'types/bookMeeting.type';\nimport { isEmptyString } from 'utils/functionUtils';\nimport DataPickerCustom from './ui/DataPickerCustom';\nimport { SelectBox } from './ui/SelectBox';\nimport { SelectBoxWithIcon } from './ui/SelectBoxWithIcon';\nimport Spinner from './ui/Spinner';\nimport PhoneNumberInput from './ui/PhoneNumberInput';\n\ntype PropsType = {\n chatId: string;\n brandAlias: string;\n userId: string;\n};\n\nconst BookMeetingForm: FC<PropsType> = ({ chatId, brandAlias, userId }) => {\n const { theme, apiHost } = useConfiguration();\n\n const [loading, setLoading] = useState(false);\n const [formData, setFormData] = useState({\n startDate: new Date().toISOString().split('T')[0],\n startTime: '',\n duration: DURATION_OPTIONS.THIRTY_MINUTES.value,\n channel: '',\n host: '',\n hostPhoneNumber: '' as Value,\n });\n const [statusSubmit, setStatusSubmit] = useState<StatusSubmitType>();\n const [errors, setErrors] = useState<FormErrors>({});\n const [disabled, setDisabled] = useState(false);\n\n const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n const { name, value } = e.target;\n setFormData((prevData) => ({\n ...prevData,\n [name]: value,\n }));\n };\n\n const handleChangeSelect = (value: string, name: string) => {\n setFormData((prevData) => ({\n ...prevData,\n [name]: value,\n }));\n };\n\n const parseTimeToDate = (timeStr: string, dateStr: string) => {\n const now = new Date(dateStr);\n const [hours, minutes] = timeStr.split(':').map(Number);\n\n if (\n isNaN(hours) \|\|\n isNaN(minutes) \|\|\n hours < 0 \|\|\n hours > 23 \|\|\n minutes < 0 \|\|\n minutes > 59\n ) {\n throw new Error(`Invalid time format: ${timeStr}`);\n }\n\n const date = new Date(\n now.getFullYear(),\n now.getMonth(),\n now.getDate(),\n hours,\n minutes\n );\n return date;\n };\n\n const validateForm = () => {\n const errors: FormErrors = {};\n const messages = theme?.bookMeetingForm?.messages;\n\n if (isEmptyString(formData.startTime)) {\n errors.startTime = messages?.startTimeError \|\| 'Time is required';\n } else if (formData?.startDate) {\n try {\n const parsedDate = parseTimeToDate(\n formData.startTime,\n formData.startDate\n );\n if (parsedDate < new Date()) {\n errors.startTime =\n messages?.startTimeInThePast \|\| 'Time is in the past';\n }\n } catch (e: any) {\n errors.startTime = e.message;\n }\n }\n\n if (isEmptyString(formData.duration)) {\n errors.duration = messages?.durationError \|\| 'Duration is required';\n }\n\n if (isEmptyString(formData.channel)) {\n errors.channel = messages?.channelError \|\| 'Channel is required';\n }\n if (\n isEmptyString(formData.host) &&\n formData?.channel !== CHANNEL_OPTIONS.PHONE_CALL.value\n ) {\n errors.host = messages?.hostError \|\| 'Host is required';\n }\n\n if (\n formData?.channel === CHANNEL_OPTIONS.PHONE_CALL.value &&\n !isValidPhoneNumber(formData?.hostPhoneNumber as Value)\n ) {\n errors.host = messages?.invalidPhoneNumber \|\| 'Invalid phone number';\n }\n\n return errors;\n };\n\n const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {\n e.preventDefault();\n setLoading(true);\n try {\n const validationErrors = validateForm();\n if (Object.keys(validationErrors)?.length) {\n setErrors(validationErrors);\n return;\n }\n\n setErrors({});\n const { startDate, startTime, duration, channel, host, hostPhoneNumber } =\n formData;\n const requestData: BookMeetingType = {\n startDate,\n startTime,\n duration,\n channel,\n title: 'Book Meeting',\n chatId,\n brand: `/${brandAlias}`,\n userId,\n host:\n formData?.channel === CHANNEL_OPTIONS.PHONE_CALL.value\n ? hostPhoneNumber\n : host,\n };\n\n const res = await createBookMeeting(requestData, apiHost);\n\n if (res?.id) {\n localStorage.setItem('bookMeetingId', res.id);\n setDisabled(true);\n setStatusSubmit({\n message:\n theme?.bookMeetingForm?.messages?.submitSuccess \|\|\n 'Submit successful',\n status: 200,\n });\n }\n } catch (error) {\n console.error(error);\n setDisabled(false);\n setStatusSubmit({\n message:\n theme?.bookMeetingForm?.messages?.submitError \|\| 'Failed to submit',\n status: 500,\n });\n } finally {\n setLoading(false);\n }\n };\n\n const getUserContactData = async (userId: string) => {\n if (!userId) return;\n\n const res = await getUserContact(apiHost, { id: userId });\n if (!res \|\| !res?.length) {\n return;\n }\n\n setFormData((prevData) => ({\n ...prevData,\n host: res[0]?.emails?.primaryEmail,\n }));\n };\n\n useEffect(() => {\n const userId = localStorage.getItem('userId');\n if (userId) {\n getUserContactData(userId);\n }\n }, []);\n\n return (\n <motion.div\n className=\"w-full mx-auto max-w-[358px] group/message\"\n initial={{ y: 5, opacity: 0 }}\n animate={{ y: 0, opacity: 1 }}\n >\n <form\n className=\"flex flex-col gap-3 bg-white px-3 py-3 pb-4 rounded-lg w-full\"\n onSubmit={handleSubmit}\n >\n <div className=\"text-[#18181B] font-semibold text-base\">\n {theme?.bookMeetingForm?.title \|\| 'Book meeting'}\n </div>\n\n <div className=\"flex flex-col gap-3\">\n {/* Date /}\n <div className=\"flex items-center gap-2\">\n <label\n className=\"w-1/4 text-[#18181B] font-medium text-[14px] leading-[14px]\"\n htmlFor=\"startDate\"\n >\n {theme?.bookMeetingForm?.labelDate \|\| 'Date'}\n </label>\n\n <div className=\"w-full\">\n <DataPickerCustom\n onChange={(date: Date \| null) => {\n if (!date) return;\n\n setFormData((prevData) => ({\n ...prevData,\n startDate: date.toISOString().split('T')[0],\n }));\n }}\n disabled={disabled}\n value={new Date(formData?.startDate)}\n />\n </div>\n </div>\n\n {/ Time and Duration /}\n <div className=\"flex flex-col\">\n <div className=\"flex items-center gap-3\">\n {/ Time /}\n <div className=\"flex flex-col gap-2 w-1/2\">\n <label\n className=\"text-[#18181B] font-medium text-[14px] leading-[14px]\"\n htmlFor=\"startTime\"\n >\n {theme?.bookMeetingForm?.labelTime \|\| 'Time'}\n </label>\n\n <div>\n <SelectBox\n name=\"startTime\"\n options={TIME_OPTIONS}\n optionClassName=\"text-[#18181B] h-[40px] py-2 pr-2 pl-3 border rounded-lg bg-white\"\n placeholder={\n theme?.bookMeetingForm?.labelTime \|\| 'Select Time'\n }\n onChange={handleChangeSelect}\n disabled={disabled}\n className={errors?.startTime ? 'border-red-500' : ''}\n />\n </div>\n </div>\n {/ Duration /}\n <div className=\"flex flex-col gap-2 w-1/2\">\n <label\n className=\"text-[#18181B] font-medium text-[14px] leading-[14px]\"\n htmlFor=\"duration\"\n >\n {theme?.bookMeetingForm?.labelDuration \|\| 'Duration'}\n </label>\n\n <div>\n <SelectBox\n name=\"duration\"\n options={Object.values(DURATION_OPTIONS)}\n optionContainerClassName=\"gap-4\"\n optionClassName=\"!p-0 !h-[24px] hover:bg-transparent hover:!text-[#1E6EB4]\"\n placeholder={\n theme?.bookMeetingForm?.labelDuration \|\| 'Select Duration'\n }\n onChange={handleChangeSelect}\n disabled={disabled}\n defaultValue=\"30\"\n className={errors?.duration ? 'border-red-500' : ''}\n />\n </div>\n </div>\n </div>\n\n {errors.startTime && (\n <p className=\"text-red-500 text-sm\">{errors.startTime}</p>\n )}\n {errors.duration && (\n <p className=\"text-red-500 text-sm\">{errors.duration}</p>\n )}\n </div>\n\n {/ Channel /}\n <div className=\"flex flex-col\">\n <div className=\"flex gap-2 items-center\">\n <label\n className=\"w-1/4 text-[#18181B] font-medium text-[14px] leading-[14px]\"\n htmlFor=\"channel\"\n >\n {theme?.bookMeetingForm?.labelChannel \|\| 'Channel'}\n </label>\n\n <div className=\"w-full\">\n <SelectBoxWithIcon\n name=\"channel\"\n options={Object.values(CHANNEL_OPTIONS)}\n placeholder={\n theme?.bookMeetingForm?.labelChannel \|\| 'Select Channel'\n }\n onChange={handleChangeSelect}\n disabled={disabled}\n className={errors?.channel ? 'border-red-500' : ''}\n />\n </div>\n </div>\n {errors.channel && (\n <p className=\"text-red-500 text-sm\">{errors.channel}</p>\n )}\n </div>\n\n {/ Host */}\n <div className=\"flex flex-col\">\n <div className=\"flex gap-2 items-center\">\n <label\n className=\"w-1/4 text-[#18181B] font-medium text-[14px] leading-[14px]\"\n htmlFor=\"host\"\n >\n {theme?.bookMeetingForm?.labelHost \|\| 'Host'}\n </label>\n\n <div className=\"flex flex-col w-full\">\n {formData?.channel === CHANNEL_OPTIONS.PHONE_CALL.value ? (\n <PhoneNumberInput\n onChange={(val: Value) => {\n setFormData((prevData) => ({\n ...prevData,\n hostPhoneNumber: val,\n }));\n }}\n placeholder={\n theme?.bookMeetingForm?.placeholderPhoneNumber \|\|\n 'Phone number'\n }\n value={formData?.hostPhoneNumber}\n disabled={disabled}\n numberInputClassName={errors?.host ? '!border-red-500' : ''}\n />\n ) : (\n <input\n type=\"email\"\n name=\"host\"\n id=\"host\"\n className={`w-full rounded-lg border border-[#e0e0e0] bg-white pt-2 pr-[8px] pb-2 pl-3 text-base font-medium text-[#18181B] outline-none focus:border-[#6A64F1] focus:shadow-md h-[40px] \n disabled:cursor-not-allowed disabled:!bg-gray-100 disabled:!text-gray-500 ${errors?.host ? '!border-red-500' : ''}`}\n placeholder={\n theme?.bookMeetingForm?.placeholderEmail \|\|\n 'Email address'\n }\n required\n disabled={disabled}\n onChange={handleChange}\n value={formData?.host}\n />\n )}\n </div>\n </div>\n {errors.host && (\n <p className=\"text-red-500 text-sm\">{errors.host}</p>\n )}\n </div>\n\n <div className=\"flex flex-col items-center justify-center\">\n {statusSubmit && (\n <div className=\"flex items-center w-full justify-center mb-2\">\n <p\n className={`text-green-500 text-sm mt-1 ${statusSubmit?.status === 200 ? 'text-green-500' : 'text-red-500'}`}\n >\n {statusSubmit.message}\n </p>\n </div>\n )}\n <div className=\"w-full\">\n <button\n className={`shadow bg-[#1E6EB4] hover:bg-[#4096ff] focus:shadow-outline focus:outline-none text-white font-bold py-2 px-8 rounded-lg w-full h-[40px] disabled:cursor-not-allowed disabled:!bg-[#0000000a] disabled:!text-[#00000040] ${loading ? 'flex items-center justify-center' : ''}`}\n type=\"submit\"\n disabled={disabled}\n >\n {loading ? (\n <Spinner />\n ) : (\n `${theme?.buttons?.textBtnSubmit \|\| 'Submit'}`\n )}\n </button>\n </div>\n </div>\n </div>\n </form>\n </motion.div>\n );\n};\n\nexport default BookMeetingForm;\n"]}

package/.rollup.cache/Users/tungthai/Desktop/Develop/clik-ai-chatbot-embedded/dist/components/Chat/Chat.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Chat.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/Chat.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAY,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,eAAe,EAAe,MAAM,0BAA0B,CAAC;AAkBxE,KAAK,SAAS,GAAG;IACf,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,eAAe,CAAC,EAAE,eAAe,EAAE,CAAC;IACpC,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,EAAE,CAAC,SAAS,~~CAkI9B~~,CAAC"}
1	+ {"version":3,"file":"Chat.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/Chat.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAY,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,eAAe,EAAe,MAAM,0BAA0B,CAAC;AAkBxE,KAAK,SAAS,GAAG;IACf,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,eAAe,CAAC,EAAE,eAAe,EAAE,CAAC;IACpC,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,EAAE,CAAC,SAAS,CAuI9B,CAAC"}

package/.rollup.cache/Users/tungthai/Desktop/Develop/clik-ai-chatbot-embedded/dist/components/Chat/Chat.js CHANGED Viewed

@@ -32,11 +32,12 @@ export const Chat = ({ id, agentId, initialMessages = [] }) => {
         setDropdownOpen(false);
     };
     const hasMessages = (messages?.length || 0) > 0;
-    const isThinking = isLoading &&
-        hasMessages &&
-        messages[messages.length - 1].role === 'userMessage';
+    const isThinking = isLoading && hasMessages;
     return (_jsx(_Fragment, { children: _jsxs("div", { className: "flex flex-col min-w-0 h-full relative bg-background", children: [_jsx("div", { className: "absolute left-4 top-4 z-10", children: _jsxs(DropdownMenu, { open: dropdownOpen, onOpenChange: setDropdownOpen, children: [_jsx(DropdownMenuTrigger, { className: "outline-none", children: _jsx("div", { className: "w-[40px] h-[40px] flex items-center justify-center p-1 bg-white rounded-full outline-none", children: _jsx(MenuIcon, { size: 20 }) }) }), _jsx(DropdownMenuContent, { side: "right", children: _jsx(DropdownMenuItem, { children: _jsx("div", { onClick: handleCreateNewChat, children: "New chat" }) }) })] }) }), _jsxs("div", { ref: messagesContainerRef, className: "flex flex-col min-w-0 gap-[16px] flex-1 overflow-y-scroll pt-[16px]", children: [!hasMessages && _jsx(Overview, { bot: bot }), hasMessages &&
-                            messages.map((message, index) => (_jsx(PreviewMessage, { bot: bot, chatId: id, message: message, isLoading: isLoading && (messages || []).length - 1 === index, enableTTS: enableTTS }, message.id))), isThinking && _jsx(ThinkingMessage, { bot: bot }), _jsx("div", { ref: messagesEndRef, className: "shrink-0 min-w-[24px] min-h-[24px]" })] }), _jsx(AnimatePresence, { children: showScrollToTop && (_jsx(motion.button, { initial: { opacity: 0, scale: 0.8 }, animate: { opacity: 1, scale: 1 }, exit: { opacity: 0, scale: 0.8 }, transition: { duration: 0.2 }, onClick: (e) => {
+                            messages.map((message, index) => (_jsxs(_Fragment, { children: [isThinking &&
+                                        index === messages.length - 1 &&
+                                        messages[messages.length - 1]?.role === 'apiMessage' && (_jsx(ThinkingMessage, { bot: bot })), _jsx(PreviewMessage, { bot: bot, chatId: id, message: message, isLoading: isLoading && (messages || []).length - 1 === index, enableTTS: enableTTS }, message.id)] }))), isThinking &&
+                            messages[messages.length - 1]?.role === 'userMessage' && (_jsx(ThinkingMessage, { bot: bot })), _jsx("div", { ref: messagesEndRef, className: "shrink-0 min-w-[24px] min-h-[24px]" })] }), _jsx(AnimatePresence, { children: showScrollToTop && (_jsx(motion.button, { initial: { opacity: 0, scale: 0.8 }, animate: { opacity: 1, scale: 1 }, exit: { opacity: 0, scale: 0.8 }, transition: { duration: 0.2 }, onClick: (e) => {
                             e.preventDefault();
                             e.stopPropagation();
                             scrollToTop();

package/.rollup.cache/Users/tungthai/Desktop/Develop/clik-ai-chatbot-embedded/dist/components/Chat/Chat.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Chat.js","sourceRoot":"","sources":["../../../src/components/Chat/Chat.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,QAAQ,EAAE,MAAM,OAAO,CAAC;AAErC,OAAO,cAAc,EAAE,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAC5D,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AACpE,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAChE,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AACnC,OAAO,EACL,YAAY,EACZ,gBAAgB,EAChB,mBAAmB,EACnB,mBAAmB,GACpB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,MAAM,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AACxD,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAQvC,MAAM,CAAC,MAAM,IAAI,GAAkB,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,eAAe,GAAG,EAAE,EAAE,EAAE,EAAE;IAC3E,MAAM,EACJ,QAAQ,GAAG,EAAE,EACb,WAAW,EACX,YAAY,EACZ,KAAK,GAAG,EAAE,EACV,QAAQ,EACR,SAAS,EACT,IAAI,EACJ,MAAM,EACN,MAAM,EACN,GAAG,EACH,SAAS,EACT,YAAY,EACZ,WAAW,GACZ,GAAG,OAAO,CAAC,EAAE,EAAE,EAAE,eAAe,EAAE,OAAO,EAAE,CAAC,CAAC;IAC9C,MAAM,EAAE,OAAO,EAAE,GAAG,gBAAgB,EAAE,CAAC;IACvC,MAAM,CAAC,oBAAoB,EAAE,cAAc,EAAE,AAAD,EAAG,eAAe,EAAE,WAAW,CAAC,GAC1E,kBAAkB,EAAkB,CAAC;IACvC,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAqB,EAAE,CAAC,CAAC;IACvE,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxD,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,WAAW,EAAE,CAAC;IAE/C,MAAM,mBAAmB,GAAG,CAAC,CAAmC,EAAE,EAAE;QAClE,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,IAAI,EAAE,GAAW,EAAE,CAAC;QACpB,IAAI,SAAS,EAAE,CAAC;YACd,EAAE,GAAG,SAAS,EAAE,CAAC;QACnB,CAAC;QACD,IAAI,SAAS,EAAE,CAAC,aAAa,CAAC,EAAE,CAAC;YAC/B,SAAS,CAAC,aAAa,CAAC,CAAC,EAAE,CAAC,CAAC;QAC/B,CAAC;QACD,qCAAqC;QACrC,eAAe,CAAC,KAAK,CAAC,CAAC;IACzB,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,CAAC,QAAQ,EAAE,MAAM,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC;IAChD,MAAM,UAAU,~~GACd~~,SAAS~~;QACT~~,~~WAAW;QACX,QAAQ,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,~~IAAI,~~KAAK~~,~~aAAa,~~CAAC;~~IAEvD~~,OAAO,CACL,4BACE,eAAK,SAAS,EAAC,qDAAqD,aAElE,cAAK,SAAS,EAAC,4BAA4B,YACzC,MAAC,YAAY,IAAC,IAAI,EAAE,YAAY,EAAE,YAAY,EAAE,eAAe,aAC7D,KAAC,mBAAmB,IAAC,SAAS,EAAC,cAAc,YAC3C,cAAK,SAAS,EAAC,2FAA2F,YACxG,KAAC,QAAQ,IAAC,IAAI,EAAE,EAAE,GAAI,GAClB,GACc,EACtB,KAAC,mBAAmB,IAAC,IAAI,EAAC,OAAO,YAC/B,KAAC,gBAAgB,cACf,cAAK,OAAO,EAAE,mBAAmB,yBAAgB,GAChC,GACC,IACT,GACX,EACN,eACE,GAAG,EAAE,oBAAoB,EACzB,SAAS,EAAC,qEAAqE,aAE9E,CAAC,WAAW,IAAI,KAAC,QAAQ,IAAC,GAAG,EAAE,GAAG,GAAI,EAEtC,WAAW;4BACV,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE,CAAC,CAC/B,KAAC,cAAc,IAEb,GAAG,EAAE,GAAG,EACR,MAAM,EAAE,EAAE,EACV,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,IAAI,CAAC,QAAQ,IAAI,EAAE,CAAC,CAAC,MAAM,GAAG,CAAC,KAAK,KAAK,EAC7D,SAAS,EAAE,SAAS,IALf,OAAO,CAAC,EAAE,CAMf,~~CACH~~,CAAC,EACH,UAAU,IAAI,KAAC,eAAe,IAAC,GAAG,EAAE,GAAG,GAAI,~~EAE5C~~,cACE,GAAG,EAAE,cAAc,EACnB,SAAS,EAAC,oCAAoC,GAC9C,IACE,EAGN,KAAC,eAAe,cACb,eAAe,IAAI,CAClB,KAAC,MAAM,CAAC,MAAM,IACZ,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,EACnC,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,EACjC,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,EAChC,UAAU,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,EAC7B,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;4BACb,CAAC,CAAC,cAAc,EAAE,CAAC;4BACnB,CAAC,CAAC,eAAe,EAAE,CAAC;4BACpB,WAAW,EAAE,CAAC;wBAChB,CAAC,EACD,SAAS,EAAC,2JAA2J,gBAC1J,eAAe,YAE1B,KAAC,OAAO,IAAC,IAAI,EAAE,EAAE,EAAE,SAAS,EAAC,eAAe,GAAG,GACjC,CACjB,GACe,EAElB,eAAM,SAAS,EAAC,gEAAgE,YAC9E,KAAC,eAAe,IACd,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,EACxB,MAAM,EAAE,MAAM,EACd,WAAW,EAAE,WAAW,EACxB,cAAc,EAAE,cAAc,EAC9B,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,OAAO,EAChB,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAE,SAAS,EACpB,gBAAgB,EAAE,WAAW,GAC7B,GACG,IACH,GACL,CACJ,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { FC, useState } from 'react';\nimport { ChatMessageType, IFileUpload } from '../../types/flowise.type';\nimport PreviewMessage, { ThinkingMessage } from './Message';\nimport { useChat } from '../../hooks/useChat';\nimport { useScrollContainer } from '../../hooks/useScrollContainer';\nimport { MultimodalInput } from './MultimodalInput';\nimport { Overview } from './Overview';\nimport { useConfiguration } from '../../hooks/useConfiguration';\nimport { MenuIcon } from './Icons';\nimport {\n DropdownMenu,\n DropdownMenuItem,\n DropdownMenuContent,\n DropdownMenuTrigger,\n} from './ui/DropdownMenu';\nimport { useChatData } from 'hooks/useChatData';\nimport { motion, AnimatePresence } from 'framer-motion';\nimport { ArrowUp } from 'lucide-react';\n\ntype PropsType = {\n id?: string;\n initialMessages?: ChatMessageType[];\n agentId?: string;\n};\n\nexport const Chat: FC<PropsType> = ({ id, agentId, initialMessages = [] }) => {\n const {\n messages = [],\n setMessages,\n handleSubmit,\n input = '',\n setInput,\n isLoading,\n stop,\n chatId,\n append,\n bot,\n enableTTS,\n setEnableTTS,\n suggestions,\n } = useChat({ id, initialMessages, agentId });\n const { apiHost } = useConfiguration();\n const [messagesContainerRef, messagesEndRef, , showScrollToTop, scrollToTop] =\n useScrollContainer<HTMLDivElement>();\n const [attachments, setAttachments] = useState<Array<IFileUpload>>([]);\n const [dropdownOpen, setDropdownOpen] = useState(false);\n const { listeners, createNew } = useChatData();\n\n const handleCreateNewChat = (e: React.MouseEvent<HTMLDivElement>) => {\n e.preventDefault();\n e.stopPropagation();\n let id: string = '';\n if (createNew) {\n id = createNew();\n }\n if (listeners?.['ON_NEW_CHAT']) {\n listeners['ON_NEW_CHAT'](id);\n }\n // Đóng dropdown sau khi tạo chat mới\n setDropdownOpen(false);\n };\n\n const hasMessages = (messages?.length \|\| 0) > 0;\n const isThinking ~~=\n~~ isLoading ~~&&\n~~ hasMessages ~~&&\n messages[messages.length - 1].role === 'userMessage'~~;\n\n return (\n <>\n <div className=\"flex flex-col min-w-0 h-full relative bg-background\">\n {/* <Header title={theme?.header?.title} language={language} /> /}\n <div className=\"absolute left-4 top-4 z-10\">\n <DropdownMenu open={dropdownOpen} onOpenChange={setDropdownOpen}>\n <DropdownMenuTrigger className=\"outline-none\">\n <div className=\"w-[40px] h-[40px] flex items-center justify-center p-1 bg-white rounded-full outline-none\">\n <MenuIcon size={20} />\n </div>\n </DropdownMenuTrigger>\n <DropdownMenuContent side=\"right\">\n <DropdownMenuItem>\n <div onClick={handleCreateNewChat}>New chat</div>\n </DropdownMenuItem>\n </DropdownMenuContent>\n </DropdownMenu>\n </div>\n <div\n ref={messagesContainerRef}\n className=\"flex flex-col min-w-0 gap-[16px] flex-1 overflow-y-scroll pt-[16px]\"\n >\n {!hasMessages && <Overview bot={bot} />}\n\n {hasMessages &&\n messages.map((message, index) => (\n <PreviewMessage\n key={message.id}\n bot={bot}\n chatId={id}\n message={message}\n isLoading={isLoading && (messages \|\| []).length - 1 === index}\n enableTTS={enableTTS}\n />\n ))}\n {isThinking && <ThinkingMessage bot={bot} />}\n\n <div\n ref={messagesEndRef}\n className=\"shrink-0 min-w-[24px] min-h-[24px]\"\n />\n </div>\n\n {/ Scroll to Top Button */}\n <AnimatePresence>\n {showScrollToTop && (\n <motion.button\n initial={{ opacity: 0, scale: 0.8 }}\n animate={{ opacity: 1, scale: 1 }}\n exit={{ opacity: 0, scale: 0.8 }}\n transition={{ duration: 0.2 }}\n onClick={(e) => {\n e.preventDefault();\n e.stopPropagation();\n scrollToTop();\n }}\n className=\"absolute w-[28px] h-[28px] left-[50%] top-[16px] z-50 bg-white shadow-lg rounded-full flex items-center justify-center hover:bg-gray-50 transition-colors\"\n aria-label=\"Scroll to top\"\n >\n <ArrowUp size={16} className=\"text-zinc-900\" />\n </motion.button>\n )}\n </AnimatePresence>\n\n <form className=\"flex mx-auto px-4 bg-background pb-4 gap-2 w-full md:max-w-3xl\">\n <MultimodalInput\n input={input}\n setInput={setInput}\n chatId={chatId}\n handleSubmit={handleSubmit}\n isLoading={isLoading}\n stop={stop}\n messages={messages}\n setMessages={setMessages}\n append={append}\n attachments={attachments}\n setAttachments={setAttachments}\n bot={bot}\n apiHost={apiHost}\n setEnableTTS={setEnableTTS}\n enableTTS={enableTTS}\n suggestedActions={suggestions}\n />\n </form>\n </div>\n </>\n );\n};\n"]}
1	+ {"version":3,"file":"Chat.js","sourceRoot":"","sources":["../../../src/components/Chat/Chat.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, useState } from 'react';\nimport { ChatMessageType, IFileUpload } from '../../types/flowise.type';\nimport PreviewMessage, { ThinkingMessage } from './Message';\nimport { useChat } from '../../hooks/useChat';\nimport { useScrollContainer } from '../../hooks/useScrollContainer';\nimport { MultimodalInput } from './MultimodalInput';\nimport { Overview } from './Overview';\nimport { useConfiguration } from '../../hooks/useConfiguration';\nimport { MenuIcon } from './Icons';\nimport {\n DropdownMenu,\n DropdownMenuItem,\n DropdownMenuContent,\n DropdownMenuTrigger,\n} from './ui/DropdownMenu';\nimport { useChatData } from 'hooks/useChatData';\nimport { motion, AnimatePresence } from 'framer-motion';\nimport { ArrowUp } from 'lucide-react';\n\ntype PropsType = {\n id?: string;\n initialMessages?: ChatMessageType[];\n agentId?: string;\n};\n\nexport const Chat: FC<PropsType> = ({ id, agentId, initialMessages = [] }) => {\n const {\n messages = [],\n setMessages,\n handleSubmit,\n input = '',\n setInput,\n isLoading,\n stop,\n chatId,\n append,\n bot,\n enableTTS,\n setEnableTTS,\n suggestions,\n } = useChat({ id, initialMessages, agentId });\n const { apiHost } = useConfiguration();\n const [messagesContainerRef, messagesEndRef, , showScrollToTop, scrollToTop] =\n useScrollContainer<HTMLDivElement>();\n const [attachments, setAttachments] = useState<Array<IFileUpload>>([]);\n const [dropdownOpen, setDropdownOpen] = useState(false);\n const { listeners, createNew } = useChatData();\n\n const handleCreateNewChat = (e: React.MouseEvent<HTMLDivElement>) => {\n e.preventDefault();\n e.stopPropagation();\n let id: string = '';\n if (createNew) {\n id = createNew();\n }\n if (listeners?.['ON_NEW_CHAT']) {\n listeners['ON_NEW_CHAT'](id);\n }\n // Đóng dropdown sau khi tạo chat mới\n setDropdownOpen(false);\n };\n\n const hasMessages = (messages?.length \|\| 0) > 0;\n const isThinking = isLoading && hasMessages;\n return (\n <>\n <div className=\"flex flex-col min-w-0 h-full relative bg-background\">\n {/* <Header title={theme?.header?.title} language={language} /> /}\n <div className=\"absolute left-4 top-4 z-10\">\n <DropdownMenu open={dropdownOpen} onOpenChange={setDropdownOpen}>\n <DropdownMenuTrigger className=\"outline-none\">\n <div className=\"w-[40px] h-[40px] flex items-center justify-center p-1 bg-white rounded-full outline-none\">\n <MenuIcon size={20} />\n </div>\n </DropdownMenuTrigger>\n <DropdownMenuContent side=\"right\">\n <DropdownMenuItem>\n <div onClick={handleCreateNewChat}>New chat</div>\n </DropdownMenuItem>\n </DropdownMenuContent>\n </DropdownMenu>\n </div>\n <div\n ref={messagesContainerRef}\n className=\"flex flex-col min-w-0 gap-[16px] flex-1 overflow-y-scroll pt-[16px]\"\n >\n {!hasMessages && <Overview bot={bot} />}\n\n {hasMessages &&\n messages.map((message, index) => (\n <>\n {isThinking &&\n index === messages.length - 1 &&\n messages[messages.length - 1]?.role === 'apiMessage' && (\n <ThinkingMessage bot={bot} />\n )}\n <PreviewMessage\n key={message.id}\n bot={bot}\n chatId={id}\n message={message}\n isLoading={isLoading && (messages \|\| []).length - 1 === index}\n enableTTS={enableTTS}\n />\n </>\n ))}\n {isThinking &&\n messages[messages.length - 1]?.role === 'userMessage' && (\n <ThinkingMessage bot={bot} />\n )}\n <div\n ref={messagesEndRef}\n className=\"shrink-0 min-w-[24px] min-h-[24px]\"\n />\n </div>\n\n {/ Scroll to Top Button */}\n <AnimatePresence>\n {showScrollToTop && (\n <motion.button\n initial={{ opacity: 0, scale: 0.8 }}\n animate={{ opacity: 1, scale: 1 }}\n exit={{ opacity: 0, scale: 0.8 }}\n transition={{ duration: 0.2 }}\n onClick={(e) => {\n e.preventDefault();\n e.stopPropagation();\n scrollToTop();\n }}\n className=\"absolute w-[28px] h-[28px] left-[50%] top-[16px] z-50 bg-white shadow-lg rounded-full flex items-center justify-center hover:bg-gray-50 transition-colors\"\n aria-label=\"Scroll to top\"\n >\n <ArrowUp size={16} className=\"text-zinc-900\" />\n </motion.button>\n )}\n </AnimatePresence>\n\n <form className=\"flex mx-auto px-4 bg-background pb-4 gap-2 w-full md:max-w-3xl\">\n <MultimodalInput\n input={input}\n setInput={setInput}\n chatId={chatId}\n handleSubmit={handleSubmit}\n isLoading={isLoading}\n stop={stop}\n messages={messages}\n setMessages={setMessages}\n append={append}\n attachments={attachments}\n setAttachments={setAttachments}\n bot={bot}\n apiHost={apiHost}\n setEnableTTS={setEnableTTS}\n enableTTS={enableTTS}\n suggestedActions={suggestions}\n />\n </form>\n </div>\n </>\n );\n};\n"]}

package/.rollup.cache/Users/tungthai/Desktop/Develop/clik-ai-chatbot-embedded/dist/components/Chat/Message.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Message.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/Message.tsx"],"names":[],"mappings":"AAEA,OAAO,~~KAAiC~~,MAAM,OAAO,CAAC;~~AAGtD~~,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,eAAe,EAAa,MAAM,0BAA0B,CAAC;AAsCtE,KAAK,SAAS,GAAG;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,eAAe,CAAC;IACzB,SAAS,EAAE,OAAO,CAAC;IACnB,GAAG,EAAE,OAAO,GAAG,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AA2MF,eAAO,MAAM,eAAe,YAAa;IAAE,GAAG,EAAE,OAAO,GAAG,IAAI,CAAA;CAAE,~~4CAyC~~/D,CAAC;;AAEF,wBAA0C"}
1	+ {"version":3,"file":"Message.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/Message.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAGhE,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,eAAe,EAAa,MAAM,0BAA0B,CAAC;AAsCtE,KAAK,SAAS,GAAG;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,eAAe,CAAC;IACzB,SAAS,EAAE,OAAO,CAAC;IACnB,GAAG,EAAE,OAAO,GAAG,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AA2MF,eAAO,MAAM,eAAe,YAAa;IAAE,GAAG,EAAE,OAAO,GAAG,IAAI,CAAA;CAAE,4CAqD/D,CAAC;;AAEF,wBAA0C"}

package/.rollup.cache/Users/tungthai/Desktop/Develop/clik-ai-chatbot-embedded/dist/components/Chat/Message.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { motion } from 'framer-motion';
 import { useConfiguration } from 'hooks/useConfiguration';
-import React, { useEffect, useMemo } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { LOCATION_TOOLS } from '../../constants/toolNames';
 import { useChatData } from '../../hooks/useChatData';
 import { cn } from '../../utils/commonUtils';
@@ -51,7 +51,7 @@ const PreviewMessage = ({ chatId, message, bot, enableTTS, isLoading, }) => {
             output: tool.toolOutput,
         });
     }, [usedTools]);
-    return (_jsxs(motion.div, { className: "w-full mx-auto max-w-3xl px-4 group/message", initial: { y: 5, opacity: 0 }, animate: { y: 0, opacity: 1 }, "data-role": role, children: [_jsx("div", { className: "flex justify-end text-[14px]", children: message?.fileUploads && !!message.fileUploads.length && (_jsx(PreviewAttachment, { attachment: message.fileUploads[0] })) }), _jsxs("div", { className: cn(`group-data-[role=user]/message:bg-[#FFF] group-data-[role=user]/message:rounded-[24px] text-[#18181B] group-data-[role=user]/message:px-[16px] group-data-[role=user]/message:py-[10px] flex gap-4  w-full group-data-[role=user]/message:w-fit group-data-[role=user]/message:ml-auto group-data-[role=user]/message:max-w-2xl overflow-x-hidden break-all`), style: {
+    return (_jsxs(motion.div, { className: "w-full mx-auto max-w-3xl px-4 group/message", initial: { y: 5, opacity: 0 }, animate: { y: 0, opacity: 1 }, "data-role": role, children: [_jsx("div", { className: "flex justify-end text-[14px]", children: message?.fileUploads && !!message.fileUploads.length && (_jsx(PreviewAttachment, { attachment: message.fileUploads[0] })) }), _jsxs("div", { className: cn(`group-data-[role=user]/message:bg-[#FFF] group-data-[role=user]/message:rounded-[24px] text-[#18181B] group-data-[role=user]/message:px-[16px] group-data-[role=user]/message:py-[10px] flex gap-4  w-full group-data-[role=user]/message:w-fit group-data-[role=user]/message:ml-auto group-data-[role=user]/message:max-w-2xl overflow-x-hidden `), style: {
                     backgroundColor: getMessageBackgroundColor(role, theme),
                 }, children: [shouldShowAvatar(theme, message.role) && (_jsx("div", { className: "size-8 flex items-center rounded-full justify-center ring-1 shrink-0 ring-border", children: assistantAvatar ? (_jsx("img", { src: assistantAvatar, alt: bot?.name ?? 'User Avatar', width: 24, height: 24, className: "rounded-full" })) : (_jsx(SparklesIcon, { size: 14 })) })), _jsxs("div", { className: "flex flex-col gap-2 w-full", children: [message?.agentSteps && !!message.agentSteps.length && (_jsx(AgentThinking, { steps: message.agentSteps, isLoading: isLoading })), !!messageContent && (_jsx("div", { className: "flex flex-col gap-4", style: {
                                     color: getMessageTextColor(role, theme),
@@ -65,11 +65,20 @@ const PreviewMessage = ({ chatId, message, bot, enableTTS, isLoading, }) => {
 };
 export const ThinkingMessage = ({ bot }) => {
     const role = 'assistant';
+    const [dotCount, setDotCount] = useState(0);
     const { theme } = useConfiguration();
     const assistantAvatar = getAvatarSource(role, theme, bot?.avatar);
+    // Animate dots splashing effect
+    useEffect(() => {
+        const interval = setInterval(() => {
+            setDotCount((prev) => (prev + 1) % 4); // Cycle through 0, 1, 2, 3 dots
+        }, 500); // Change every 500ms
+        return () => clearInterval(interval);
+    }, []);
+    const dots = '.'.repeat(dotCount);
     return (_jsx(motion.div, { className: "w-full mx-auto max-w-3xl px-4 group/message", initial: { y: 5, opacity: 0 }, animate: { y: 0, opacity: 1, transition: { delay: 1 } }, "data-role": role, children: _jsxs("div", { className: cn('flex gap-4 group-data-[role=user]/message:px-3 w-full group-data-[role=user]/message:w-fit group-data-[role=user]/message:ml-auto group-data-[role=user]/message:max-w-2xl group-data-[role=user]/message:py-2 rounded-xl', {
                 'group-data-[role=user]/message:bg-muted': true,
-            }), children: [shouldShowAvatar(theme, 'apiMessage') && (_jsx("div", { className: "size-8 flex items-center rounded-full justify-center ring-1 shrink-0 ring-border", children: _jsx("img", { src: assistantAvatar, alt: bot?.name ?? 'User Avatar', width: 24, height: 24, className: "rounded-full" }) })), _jsx("div", { className: "flex flex-col gap-2 w-full", children: _jsx("div", { className: "flex flex-col gap-4 text-muted-foreground", children: "Thinking..." }) })] }) }));
+            }), children: [shouldShowAvatar(theme, 'apiMessage') && (_jsx("div", { className: "size-8 flex items-center rounded-full justify-center ring-1 shrink-0 ring-border", children: _jsx("img", { src: assistantAvatar, alt: bot?.name ?? 'User Avatar', width: 24, height: 24, className: "rounded-full" }) })), _jsx("div", { className: "flex flex-col gap-2 w-full", children: _jsxs("div", { className: "text-muted-foreground text-sm opacity-70 font-mono whitespace-pre-wrap", children: ["Thinking", dots] }) })] }) }));
 };
 export default React.memo(PreviewMessage);
 //# sourceMappingURL=Message.js.map

package/.rollup.cache/Users/tungthai/Desktop/Develop/clik-ai-chatbot-embedded/dist/components/Chat/Message.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Message.js","sourceRoot":"","sources":["../../../src/components/Chat/Message.tsx"],"names":[],"mappings":"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","sourcesContent":["import { motion } from 'framer-motion';\nimport { useConfiguration } from 'hooks/useConfiguration';\nimport React, { FC, useEffect, useMemo } from 'react';\nimport { LOCATION_TOOLS } from '../../constants/toolNames';\nimport { useChatData } from '../../hooks/useChatData';\nimport { BotType } from '../../types/bot.type';\nimport { ChatMessageType, ToolUsage } from '../../types/flowise.type';\nimport { cn } from '../../utils/commonUtils';\nimport {\n getAvatarSource,\n getMessageBackgroundColor,\n getMessageTextColor,\n getRole,\n shouldShowAvatar,\n} from '../../utils/messageUtils';\nimport {\n categorizeTools,\n hasFocusToolOutput,\n isDisplayBookingFormTool,\n isDisplayBookingListTool,\n isDisplayContactFormTool,\n isDisplayProductDetailTool,\n isDisplayProductListTool,\n isDisplayScenariosTool,\n isHtmlContent,\n isWeatherTool,\n parseToolOutput,\n removeToolOutputFromContent,\n} from '../../utils/toolUtils';\nimport AgentThinking from './AgentThinking';\nimport AudioPlayer from './AudioPlayer';\nimport BookMeetingForm from './BookMeetingForm';\nimport BookMeetingList from './BookMeetingList';\nimport { HtmlContent } from './HtmlContent';\nimport { SparklesIcon } from './Icons';\nimport { LocationCard } from './LocationCard';\nimport { Markdown } from './Markdown';\nimport { PreviewAttachment } from './PreviewAttachment';\nimport ProductDetail from './ProductDetail';\nimport ProductList from './ProductList';\nimport ScenariosList from './ScenariosList';\nimport UserContactForm from './UserContactForm';\nimport { Weather } from './Weather';\n\ntype PropsType = {\n chatId?: string;\n message: ChatMessageType;\n isLoading: boolean;\n bot: BotType \| null;\n enableTTS?: boolean;\n};\n\nconst PreviewMessage: FC<PropsType> = ({\n chatId,\n message,\n bot,\n enableTTS,\n isLoading,\n}) => {\n const { theme, overrideConfig, apiHost } = useConfiguration();\n const { listeners } = useChatData();\n\n const usedTools = useMemo(() => {\n return categorizeTools(message.usedTools \|\| [], !!message.new);\n }, [message.usedTools, message.new]);\n\n const role = useMemo(() => {\n return getRole(message.role);\n }, [message.role]);\n\n const assistantAvatar = getAvatarSource(role, theme, bot?.avatar);\n\n const focusToolOutput = useMemo(() => {\n return hasFocusToolOutput(message.usedTools \|\| []);\n }, [message.usedTools]);\n\n const messageContent = useMemo(() => {\n if (!focusToolOutput) {\n return message.content;\n }\n\n return removeToolOutputFromContent(\n message.content,\n message.usedTools \|\| []\n );\n }, [focusToolOutput, message.content, message.usedTools]);\n\n useEffect(() => {\n const cmdTool = usedTools?.cmdToolResult as any;\n if (!cmdTool \|\| !listeners?.['CMD_CALLBACK']) {\n return;\n }\n\n const tool = cmdTool as ToolUsage;\n listeners['CMD_CALLBACK']({\n tool: tool.tool,\n output: tool.toolOutput,\n });\n }, [usedTools]);\n\n return (\n <motion.div\n className=\"w-full mx-auto max-w-3xl px-4 group/message\"\n initial={{ y: 5, opacity: 0 }}\n animate={{ y: 0, opacity: 1 }}\n data-role={role}\n >\n <div className=\"flex justify-end text-[14px]\">\n {message?.fileUploads && !!message.fileUploads.length && (\n <PreviewAttachment attachment={message.fileUploads[0]} />\n )}\n </div>\n <div\n className={cn(\n `group-data-[role=user]/message:bg-[#FFF] group-data-[role=user]/message:rounded-[24px] text-[#18181B] group-data-[role=user]/message:px-[16px] group-data-[role=user]/message:py-[10px] flex gap-4 w-full group-data-[role=user]/message:w-fit group-data-[role=user]/message:ml-auto group-data-[role=user]/message:max-w-2xl overflow-x-hidden break-all`\n )}\n style={{\n backgroundColor: getMessageBackgroundColor(role, theme),\n }}\n >\n {shouldShowAvatar(theme, message.role) && (\n <div className=\"size-8 flex items-center rounded-full justify-center ring-1 shrink-0 ring-border\">\n {assistantAvatar ? (\n <img\n src={assistantAvatar}\n alt={bot?.name ?? 'User Avatar'}\n width={24}\n height={24}\n className=\"rounded-full\"\n />\n ) : (\n <SparklesIcon size={14} />\n )}\n </div>\n )}\n\n <div className=\"flex flex-col gap-2 w-full\">\n {/* Agent Thinking Display /}\n {message?.agentSteps && !!message.agentSteps.length && (\n <AgentThinking steps={message.agentSteps} isLoading={isLoading} />\n )}\n\n {/ Message Content /}\n {!!messageContent && (\n <div\n className=\"flex flex-col gap-4\"\n style={{\n color: getMessageTextColor(role, theme),\n }}\n >\n <Markdown\n usedTools={focusToolOutput ? undefined : message?.usedTools}\n >\n {messageContent as string}\n </Markdown>\n </div>\n )}\n\n {/ Audio Player /}\n {!focusToolOutput && (role === 'assistant' \|\| message?.ttsUrl) && (\n <AudioPlayer\n chatId={chatId}\n message={message}\n autoplay={!!enableTTS}\n />\n )}\n\n {/ Custom Tool Results */}\n {!!usedTools?.customToolResults?.length && (\n <div className=\"flex flex-col gap-4 custom-tools\">\n {usedTools.customToolResults.map((usedTool, index) => {\n const { tool, toolOutput, toolInput } = usedTool;\n const outputData = parseToolOutput(toolOutput);\n return (\n <div key={`${tool}-${index}`} className=\"custom-tool-result\">\n {!!outputData && isWeatherTool(tool) && (\n <Weather weatherAtLocation={outputData} />\n )}\n {!!outputData?.data?.getCMSLocationInfoDetail &&\n tool === LOCATION_TOOLS.GET_ASSIGNED_LOCATION_DETAIL && (\n <LocationCard\n location={outputData.data.getCMSLocationInfoDetail}\n />\n )}\n {!!outputData &&\n tool === LOCATION_TOOLS.SEARCH_TRAVELING_PLACES && (\n <div className=\"flex flex-row overflow-x-auto\">\n {outputData.map((place: any) => (\n <div\n key={place.id}\n className=\"flex-shrink-0 pr-2 max-w-full\"\n >\n <LocationCard location={place} />\n </div>\n ))}\n </div>\n )}\n {!!toolOutput && isDisplayProductListTool(tool) && (\n <ProductList\n productCodes={(outputData as any).product_codes}\n tourCode={overrideConfig?.vars?.TOUR_CODE}\n languageCode={overrideConfig?.vars?.LANGUAGE_CODE}\n apiUrl={overrideConfig?.vars?.CLIK_GRAPHQL_API}\n />\n )}\n {!!toolOutput && isDisplayProductDetailTool(tool) && (\n <ProductDetail\n productCode={(outputData as any).product_code}\n tourCode={overrideConfig?.vars?.TOUR_CODE}\n languageCode={overrideConfig?.vars?.LANGUAGE_CODE}\n apiUrl={overrideConfig?.vars?.CLIK_GRAPHQL_API}\n />\n )}\n {!!toolOutput && isDisplayScenariosTool(tool) && (\n <ScenariosList\n scenarioCodes={(outputData as any)?.scenario_codes}\n tourCode={overrideConfig?.vars?.TOUR_CODE}\n languageCode={overrideConfig?.vars?.LANGUAGE_CODE}\n apiUrl={overrideConfig?.vars?.CLIK_GRAPHQL_API}\n />\n )}\n {!!toolOutput && isDisplayBookingFormTool(tool) && (\n <BookMeetingForm\n chatId={chatId \|\| ''}\n brandAlias={overrideConfig?.vars?.BRAND_ALIAS}\n userId={overrideConfig?.vars?.USER_ID}\n />\n )}\n {!!toolOutput && isDisplayContactFormTool(tool) && (\n <UserContactForm />\n )}\n {!!toolOutput && isHtmlContent(usedTool) && (\n <HtmlContent content={outputData.content} />\n )}\n\n {!!toolOutput && isDisplayBookingListTool(tool) && (\n <BookMeetingList\n apiHost={apiHost}\n userId={overrideConfig?.vars?.USER_ID}\n theme={theme}\n />\n )}\n </div>\n );\n })}\n </div>\n )}\n </div>\n </div>\n </motion.div>\n );\n};\n\nexport const ThinkingMessage = ({ bot }: { bot: BotType \| null }) => {\n const role = 'assistant';\n\n const { theme } = useConfiguration();\n\n const assistantAvatar = getAvatarSource(role, theme, bot?.avatar);\n\n return (\n <motion.div\n className=\"w-full mx-auto max-w-3xl px-4 group/message\"\n initial={{ y: 5, opacity: 0 }}\n animate={{ y: 0, opacity: 1, transition: { delay: 1 } }}\n data-role={role}\n >\n <div\n className={cn(\n 'flex gap-4 group-data-[role=user]/message:px-3 w-full group-data-[role=user]/message:w-fit group-data-[role=user]/message:ml-auto group-data-[role=user]/message:max-w-2xl group-data-[role=user]/message:py-2 rounded-xl',\n {\n 'group-data-[role=user]/message:bg-muted': true,\n }\n )}\n >\n {shouldShowAvatar(theme, 'apiMessage') && (\n <div className=\"size-8 flex items-center rounded-full justify-center ring-1 shrink-0 ring-border\">\n <img\n src={assistantAvatar}\n alt={bot?.name ?? 'User Avatar'}\n width={24}\n height={24}\n className=\"rounded-full\"\n />\n </div>\n )}\n <div className=\"flex flex-col gap-2 w-full\">\n <div className=\"flex flex-col gap-4 text-muted-foreground\">\n Thinking...\n </div>\n </div>\n </div>\n </motion.div>\n );\n};\n\nexport default React.memo(PreviewMessage);\n"]}
1	+ {"version":3,"file":"Message.js","sourceRoot":"","sources":["../../../src/components/Chat/Message.tsx"],"names":[],"mappings":"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","sourcesContent":["import { motion } from 'framer-motion';\nimport { useConfiguration } from 'hooks/useConfiguration';\nimport React, { FC, useEffect, useMemo, useState } from 'react';\nimport { LOCATION_TOOLS } from '../../constants/toolNames';\nimport { useChatData } from '../../hooks/useChatData';\nimport { BotType } from '../../types/bot.type';\nimport { ChatMessageType, ToolUsage } from '../../types/flowise.type';\nimport { cn } from '../../utils/commonUtils';\nimport {\n getAvatarSource,\n getMessageBackgroundColor,\n getMessageTextColor,\n getRole,\n shouldShowAvatar,\n} from '../../utils/messageUtils';\nimport {\n categorizeTools,\n hasFocusToolOutput,\n isDisplayBookingFormTool,\n isDisplayBookingListTool,\n isDisplayContactFormTool,\n isDisplayProductDetailTool,\n isDisplayProductListTool,\n isDisplayScenariosTool,\n isHtmlContent,\n isWeatherTool,\n parseToolOutput,\n removeToolOutputFromContent,\n} from '../../utils/toolUtils';\nimport AgentThinking from './AgentThinking';\nimport AudioPlayer from './AudioPlayer';\nimport BookMeetingForm from './BookMeetingForm';\nimport BookMeetingList from './BookMeetingList';\nimport { HtmlContent } from './HtmlContent';\nimport { SparklesIcon } from './Icons';\nimport { LocationCard } from './LocationCard';\nimport { Markdown } from './Markdown';\nimport { PreviewAttachment } from './PreviewAttachment';\nimport ProductDetail from './ProductDetail';\nimport ProductList from './ProductList';\nimport ScenariosList from './ScenariosList';\nimport UserContactForm from './UserContactForm';\nimport { Weather } from './Weather';\n\ntype PropsType = {\n chatId?: string;\n message: ChatMessageType;\n isLoading: boolean;\n bot: BotType \| null;\n enableTTS?: boolean;\n};\n\nconst PreviewMessage: FC<PropsType> = ({\n chatId,\n message,\n bot,\n enableTTS,\n isLoading,\n}) => {\n const { theme, overrideConfig, apiHost } = useConfiguration();\n const { listeners } = useChatData();\n\n const usedTools = useMemo(() => {\n return categorizeTools(message.usedTools \|\| [], !!message.new);\n }, [message.usedTools, message.new]);\n\n const role = useMemo(() => {\n return getRole(message.role);\n }, [message.role]);\n\n const assistantAvatar = getAvatarSource(role, theme, bot?.avatar);\n\n const focusToolOutput = useMemo(() => {\n return hasFocusToolOutput(message.usedTools \|\| []);\n }, [message.usedTools]);\n\n const messageContent = useMemo(() => {\n if (!focusToolOutput) {\n return message.content;\n }\n\n return removeToolOutputFromContent(\n message.content,\n message.usedTools \|\| []\n );\n }, [focusToolOutput, message.content, message.usedTools]);\n\n useEffect(() => {\n const cmdTool = usedTools?.cmdToolResult as any;\n if (!cmdTool \|\| !listeners?.['CMD_CALLBACK']) {\n return;\n }\n\n const tool = cmdTool as ToolUsage;\n listeners['CMD_CALLBACK']({\n tool: tool.tool,\n output: tool.toolOutput,\n });\n }, [usedTools]);\n\n return (\n <motion.div\n className=\"w-full mx-auto max-w-3xl px-4 group/message\"\n initial={{ y: 5, opacity: 0 }}\n animate={{ y: 0, opacity: 1 }}\n data-role={role}\n >\n <div className=\"flex justify-end text-[14px]\">\n {message?.fileUploads && !!message.fileUploads.length && (\n <PreviewAttachment attachment={message.fileUploads[0]} />\n )}\n </div>\n <div\n className={cn(\n `group-data-[role=user]/message:bg-[#FFF] group-data-[role=user]/message:rounded-[24px] text-[#18181B] group-data-[role=user]/message:px-[16px] group-data-[role=user]/message:py-[10px] flex gap-4 w-full group-data-[role=user]/message:w-fit group-data-[role=user]/message:ml-auto group-data-[role=user]/message:max-w-2xl overflow-x-hidden `\n )}\n style={{\n backgroundColor: getMessageBackgroundColor(role, theme),\n }}\n >\n {shouldShowAvatar(theme, message.role) && (\n <div className=\"size-8 flex items-center rounded-full justify-center ring-1 shrink-0 ring-border\">\n {assistantAvatar ? (\n <img\n src={assistantAvatar}\n alt={bot?.name ?? 'User Avatar'}\n width={24}\n height={24}\n className=\"rounded-full\"\n />\n ) : (\n <SparklesIcon size={14} />\n )}\n </div>\n )}\n\n <div className=\"flex flex-col gap-2 w-full\">\n {/* Agent Thinking Display /}\n {message?.agentSteps && !!message.agentSteps.length && (\n <AgentThinking steps={message.agentSteps} isLoading={isLoading} />\n )}\n\n {/ Message Content /}\n {!!messageContent && (\n <div\n className=\"flex flex-col gap-4\"\n style={{\n color: getMessageTextColor(role, theme),\n }}\n >\n <Markdown\n usedTools={focusToolOutput ? undefined : message?.usedTools}\n >\n {messageContent as string}\n </Markdown>\n </div>\n )}\n\n {/ Audio Player /}\n {!focusToolOutput && (role === 'assistant' \|\| message?.ttsUrl) && (\n <AudioPlayer\n chatId={chatId}\n message={message}\n autoplay={!!enableTTS}\n />\n )}\n\n {/ Custom Tool Results */}\n {!!usedTools?.customToolResults?.length && (\n <div className=\"flex flex-col gap-4 custom-tools\">\n {usedTools.customToolResults.map((usedTool, index) => {\n const { tool, toolOutput, toolInput } = usedTool;\n const outputData = parseToolOutput(toolOutput);\n return (\n <div key={`${tool}-${index}`} className=\"custom-tool-result\">\n {!!outputData && isWeatherTool(tool) && (\n <Weather weatherAtLocation={outputData} />\n )}\n {!!outputData?.data?.getCMSLocationInfoDetail &&\n tool === LOCATION_TOOLS.GET_ASSIGNED_LOCATION_DETAIL && (\n <LocationCard\n location={outputData.data.getCMSLocationInfoDetail}\n />\n )}\n {!!outputData &&\n tool === LOCATION_TOOLS.SEARCH_TRAVELING_PLACES && (\n <div className=\"flex flex-row overflow-x-auto\">\n {outputData.map((place: any) => (\n <div\n key={place.id}\n className=\"flex-shrink-0 pr-2 max-w-full\"\n >\n <LocationCard location={place} />\n </div>\n ))}\n </div>\n )}\n {!!toolOutput && isDisplayProductListTool(tool) && (\n <ProductList\n productCodes={(outputData as any).product_codes}\n tourCode={overrideConfig?.vars?.TOUR_CODE}\n languageCode={overrideConfig?.vars?.LANGUAGE_CODE}\n apiUrl={overrideConfig?.vars?.CLIK_GRAPHQL_API}\n />\n )}\n {!!toolOutput && isDisplayProductDetailTool(tool) && (\n <ProductDetail\n productCode={(outputData as any).product_code}\n tourCode={overrideConfig?.vars?.TOUR_CODE}\n languageCode={overrideConfig?.vars?.LANGUAGE_CODE}\n apiUrl={overrideConfig?.vars?.CLIK_GRAPHQL_API}\n />\n )}\n {!!toolOutput && isDisplayScenariosTool(tool) && (\n <ScenariosList\n scenarioCodes={(outputData as any)?.scenario_codes}\n tourCode={overrideConfig?.vars?.TOUR_CODE}\n languageCode={overrideConfig?.vars?.LANGUAGE_CODE}\n apiUrl={overrideConfig?.vars?.CLIK_GRAPHQL_API}\n />\n )}\n {!!toolOutput && isDisplayBookingFormTool(tool) && (\n <BookMeetingForm\n chatId={chatId \|\| ''}\n brandAlias={overrideConfig?.vars?.BRAND_ALIAS}\n userId={overrideConfig?.vars?.USER_ID}\n />\n )}\n {!!toolOutput && isDisplayContactFormTool(tool) && (\n <UserContactForm />\n )}\n {!!toolOutput && isHtmlContent(usedTool) && (\n <HtmlContent content={outputData.content} />\n )}\n\n {!!toolOutput && isDisplayBookingListTool(tool) && (\n <BookMeetingList\n apiHost={apiHost}\n userId={overrideConfig?.vars?.USER_ID}\n theme={theme}\n />\n )}\n </div>\n );\n })}\n </div>\n )}\n </div>\n </div>\n </motion.div>\n );\n};\n\nexport const ThinkingMessage = ({ bot }: { bot: BotType \| null }) => {\n const role = 'assistant';\n const [dotCount, setDotCount] = useState(0);\n\n const { theme } = useConfiguration();\n\n const assistantAvatar = getAvatarSource(role, theme, bot?.avatar);\n\n // Animate dots splashing effect\n useEffect(() => {\n const interval = setInterval(() => {\n setDotCount((prev) => (prev + 1) % 4); // Cycle through 0, 1, 2, 3 dots\n }, 500); // Change every 500ms\n\n return () => clearInterval(interval);\n }, []);\n\n const dots = '.'.repeat(dotCount);\n\n return (\n <motion.div\n className=\"w-full mx-auto max-w-3xl px-4 group/message\"\n initial={{ y: 5, opacity: 0 }}\n animate={{ y: 0, opacity: 1, transition: { delay: 1 } }}\n data-role={role}\n >\n <div\n className={cn(\n 'flex gap-4 group-data-[role=user]/message:px-3 w-full group-data-[role=user]/message:w-fit group-data-[role=user]/message:ml-auto group-data-[role=user]/message:max-w-2xl group-data-[role=user]/message:py-2 rounded-xl',\n {\n 'group-data-[role=user]/message:bg-muted': true,\n }\n )}\n >\n {shouldShowAvatar(theme, 'apiMessage') && (\n <div className=\"size-8 flex items-center rounded-full justify-center ring-1 shrink-0 ring-border\">\n <img\n src={assistantAvatar}\n alt={bot?.name ?? 'User Avatar'}\n width={24}\n height={24}\n className=\"rounded-full\"\n />\n </div>\n )}\n <div className=\"flex flex-col gap-2 w-full\">\n <div className=\"text-muted-foreground text-sm opacity-70 font-mono whitespace-pre-wrap\">\n Thinking{dots}\n </div>\n </div>\n </div>\n </motion.div>\n );\n};\n\nexport default React.memo(PreviewMessage);\n"]}

package/.rollup.cache/Users/tungthai/Desktop/Develop/clik-ai-chatbot-embedded/dist/components/Chat/MultimodalInput.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MultimodalInput.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/MultimodalInput.tsx"],"names":[],"mappings":"AACA,OAAO,EAEL,EAAE,EAKH,MAAM,OAAO,CAAC;~~AAIf~~,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AASnD,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAqBxE,KAAK,SAAS,GAAG;IACf,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,SAAS,EAAE,OAAO,CAAC;IACnB,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,QAAQ,EAAE,eAAe,EAAE,CAAC;IAC5B,WAAW,EAAE,CAAC,QAAQ,EAAE,eAAe,EAAE,KAAK,IAAI,CAAC;IACnD,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,CACZ,KAAK,CAAC,EAAE;QAAE,cAAc,CAAC,EAAE,MAAM,IAAI,CAAA;KAAE,EACvC,KAAK,CAAC,EAAE,WAAW,EAAE,KAClB,IAAI,CAAC;IACV,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACrD,WAAW,CAAC,EAAE,WAAW,EAAE,CAAC;IAC5B,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,EAAE,WAAW,EAAE,KAAK,WAAW,EAAE,KAAK,IAAI,CAAC;IACzE,GAAG,EAAE,OAAO,GAAG,IAAI,CAAC;IACpB,OAAO,EAAE,MAAM,CAAC;IAChB,YAAY,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,SAAS,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,EAAE,cAAc,EAAE,CAAC;CACrC,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,SAAS,~~CA4oBzC~~,CAAC"}
1	+ {"version":3,"file":"MultimodalInput.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/MultimodalInput.tsx"],"names":[],"mappings":"AACA,OAAO,EAEL,EAAE,EAKH,MAAM,OAAO,CAAC;AAKf,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AASnD,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAqBxE,KAAK,SAAS,GAAG;IACf,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,SAAS,EAAE,OAAO,CAAC;IACnB,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,QAAQ,EAAE,eAAe,EAAE,CAAC;IAC5B,WAAW,EAAE,CAAC,QAAQ,EAAE,eAAe,EAAE,KAAK,IAAI,CAAC;IACnD,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,CACZ,KAAK,CAAC,EAAE;QAAE,cAAc,CAAC,EAAE,MAAM,IAAI,CAAA;KAAE,EACvC,KAAK,CAAC,EAAE,WAAW,EAAE,KAClB,IAAI,CAAC;IACV,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACrD,WAAW,CAAC,EAAE,WAAW,EAAE,CAAC;IAC5B,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,EAAE,WAAW,EAAE,KAAK,WAAW,EAAE,KAAK,IAAI,CAAC;IACzE,GAAG,EAAE,OAAO,GAAG,IAAI,CAAC;IACpB,OAAO,EAAE,MAAM,CAAC;IAChB,YAAY,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,SAAS,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,EAAE,cAAc,EAAE,CAAC;CACrC,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,SAAS,CA8oBzC,CAAC"}

package/.rollup.cache/Users/tungthai/Desktop/Develop/clik-ai-chatbot-embedded/dist/components/Chat/MultimodalInput.js CHANGED Viewed

@@ -3,6 +3,7 @@ import { LAYOUT_MODE } from 'commons/constants';
 import { useCallback, useEffect, useRef, useState, } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 import { Volume2, Paperclip } from 'lucide-react';
+import { useMediaQuery } from 'react-responsive';
 import { useLocalStorage, useWindowSize } from 'usehooks-ts';
 import { useAudioRecording } from '../../hooks/useAudioRecording';
 import { useChatData } from '../../hooks/useChatData';
@@ -24,6 +25,7 @@ export const MultimodalInput = ({ input, setInput, isLoading, stop, messages, se
     const textareaRef = useRef(null);
     const inputRef = useRef(null);
     const setInputRef = useRef(null);
+    const isMobile = useMediaQuery({ query: '(max-width: 640px)' });
     const { width } = useWindowSize();
     const defaultRows = theme?.suggestion?.defaultRows || 1;
     const expandedRows = theme?.suggestion?.expandedRows || 2;
@@ -344,7 +346,7 @@ export const MultimodalInput = ({ input, setInput, isLoading, stop, messages, se
                                             setDropdownOpen(false);
                                         }, className: "flex items-center gap-2 px-4", children: [_jsx(Paperclip, { size: 16 }), _jsx("span", { className: "text-[14px]", children: "Upload File" })] }), _jsxs(DropdownMenuItem, { onClick: () => {
                                             setEnableTTS(!enableTTS);
-                                        }, className: `flex items-center gap-2 px-4 ${enableTTS ? 'bg-[#CBE1F3] text-[#0A82F7]' : ''}`, children: [_jsx(Volume2, {}), _jsx("span", { className: "text-[14px]", children: theme?.buttons?.textBtnSpeak || 'Speak' })] })] })] })), _jsxs("div", { className: "block flex-1 min-w-0 relative", children: [_jsx(AnimatePresence, { mode: "wait", children: !isRecording && (_jsxs(_Fragment, { children: [_jsx(motion.input, { type: "text", id: "input-multimodal-container", readOnly: readonly, ref: inputRef, placeholder: placeholder, value: input, onChange: handleInput, className: cn(`h-[40px] outline-none text-base bg-muted bg-[#ffffff] scrollbar-hidden p-[12px] pr-[68px] rounded-[24px] backdrop-blur-[50px] w-full  ${readonly ? 'hidden' : ''}`, className), autoFocus: true, initial: { opacity: 0, height: 0 }, animate: { opacity: 1, height: 40 }, exit: { opacity: 0, height: 0 }, transition: {
+                                        }, className: `flex items-center gap-2 px-4 ${enableTTS ? 'bg-[#CBE1F3] text-[#0A82F7]' : ''}`, children: [_jsx(Volume2, {}), _jsx("span", { className: "text-[14px]", children: theme?.buttons?.textBtnSpeak || 'Speak' })] })] })] })), _jsxs("div", { className: "block flex-1 min-w-0 relative", children: [_jsx(AnimatePresence, { mode: "wait", children: !isRecording && (_jsxs(_Fragment, { children: [_jsx(motion.input, { type: "text", id: "input-multimodal-container", readOnly: readonly, ref: inputRef, placeholder: placeholder, value: input, onChange: handleInput, className: cn(`h-[40px] outline-none text-base bg-muted bg-[#ffffff] scrollbar-hidden p-[12px] pr-[68px] rounded-[24px] backdrop-blur-[50px] w-full  ${readonly ? 'hidden' : ''}`, className), autoFocus: !isMobile, initial: { opacity: 0, height: 0 }, animate: { opacity: 1, height: 40 }, exit: { opacity: 0, height: 0 }, transition: {
                                                 duration: 0.2,
                                                 ease: 'easeInOut',
                                             }, style: {
@@ -372,7 +374,7 @@ export const MultimodalInput = ({ input, setInput, isLoading, stop, messages, se
                                                 display: isMultiline || transcribing ? 'block' : 'none',
                                             }, children: _jsx(Textarea, { readOnly: readonly, ref: textareaRef, placeholder: placeholder, value: input, onChange: handleInput, className: cn(`min-h-[24px] max-h-[160px] resize-none text-base bg-muted bg-[#ffffff] scrollbar-hidden p-[12px] pb-[32px] rounded-[24px] border border-[#E5E5E5] shadow-[0px_2px_6px_0px_rgba(0,0,0,0.08)] backdrop-blur-[50px] ${suggestedActionRows === expandedRows && 'p-[12px]'} `, className), style: {
                                                     height: suggestedActionRows === expandedRows ? 60 : undefined,
-                                                }, autoFocus: true, onKeyDown: (event) => {
+                                                }, autoFocus: !isMobile, onKeyDown: (event) => {
                                                     if (isRecording) {
                                                         return;
                                                     }