+
+ {chatLog.map((msg) => (
+
+
+ ))}
+
+ {/* Loading Indicator */}
+ {isLoading && (
+
+
+ )}
+
+
+
+
+ {/* Avatar */}
+
+
+ {msg.role === "user" ? : }
+
+
+ {/* Message Content */}
+
+ {msg.person && msg.role === "bot" && (
+
+ {msg.person}
+
+ )}
+
+
+
+ {msg.type === "done" && (
+
+
+ Complete
+
+ )}
+ {msg.type === "done" ?
+
+ {/* Options Buttons */}
+ {msg.role === "bot" && msg.type === "options" && msg.options && msg.options.length > 0 && (
+ {msg.text}
: msg.text}
+
+ {msg.options.map((opt, idx) => {
+ const isSelected = msg.selectedOption === opt;
+ const hasSelection = !!msg.selectedOption;
+
+ return (
+ handleOptionClick(opt, msg.id)}
+ disabled={hasSelection || isLoading}
+ className={clsx(
+ "group relative w-full text-left px-4 py-3 rounded-xl transition-all duration-200 overflow-hidden",
+ isSelected
+ ? "bg-indigo-600 border-2 border-indigo-600 text-white shadow-lg shadow-indigo-500/25"
+ : hasSelection
+ ? "bg-neutral-100 dark:bg-neutral-800/50 border border-neutral-200 dark:border-neutral-700 opacity-50 cursor-not-allowed"
+ : "bg-white dark:bg-neutral-900 border border-indigo-200 dark:border-indigo-900/50 hover:border-indigo-500 dark:hover:border-indigo-500 hover:bg-indigo-50 dark:hover:bg-indigo-900/20 cursor-pointer"
+ )}
+ >
+
+ {isSelected && }
+ {opt}
+
+ {!hasSelection && (
+
+ )}
+
+ );
+ })}
+
+ )}
+
+
+
+
+
+
+
+
+ Typing...
+
+
+