chordia-ui 3.9.2 → 3.9.4

package/src/components/chat/ChatWelcome.jsx

@@ -0,0 +1,386 @@
+"use client";
+
+import React from "react";
+import {
+  Users,
+  Compass,
+  Smile,
+  Frown,
+  ShieldCheck,
+  AlertTriangle,
+  Clock,
+  Repeat,
+  Target,
+  Award,
+  TrendingUp,
+  TrendingDown,
+  MessageSquare,
+  Activity,
+  PieChart,
+  LineChart,
+  Search,
+  PhoneCall,
+  Calendar,
+  BarChart3,
+  FileText,
+  DollarSign,
+  History,
+} from "lucide-react";
+
+// Maps the backend's icon-name strings to lucide icon components.
+const ICON_MAP = {
+  users: Users,
+  compass: Compass,
+  smile: Smile,
+  frown: Frown,
+  "shield-check": ShieldCheck,
+  "alert-triangle": AlertTriangle,
+  clock: Clock,
+  repeat: Repeat,
+  target: Target,
+  award: Award,
+  "trending-up": TrendingUp,
+  "trending-down": TrendingDown,
+  "message-square": MessageSquare,
+  activity: Activity,
+  "pie-chart": PieChart,
+  "line-chart": LineChart,
+  search: Search,
+  "phone-call": PhoneCall,
+  calendar: Calendar,
+  "bar-chart-3": BarChart3,
+};
+
+/**
+ * ChatWelcome
+ * Empty / new-chat welcome screen: brand symbol, greeting, a compose input
+ * and a grid of "Suggested Topics" prompt cards.
+ *
+ * Props:
+ *   greeting       - heading text
+ *   placeholder    - compose input placeholder
+ *   value          - controlled compose value
+ *   onChange       - (string) => void
+ *   onSubmit       - () => void              // invoked by the Send button / Enter
+ *   onKeyDown      - optional textarea keydown passthrough (e.g. Enter-to-send)
+ *   topics         - [{ icon, title, prompt }]  // icon: a known icon-name string
+ *                                                  (see ICON_MAP) or a lucide component
+ *   onTopicSelect  - (prompt) => void
+ *   disabled       - disables input + cards (e.g. no project / streaming)
+ *   sendDisabled   - optional override for the Send button's disabled state
+ *   logo           - optional ReactNode to replace the built-in brand symbol
+ */
+
+const COLORS = {
+  strong: "#2e3236", // grey/strong
+  muted: "#808183", // grey/muted
+  border: "#808183",
+  cardBorder: "#b2b2b0", // neutral/300
+  hoverBg: "#f3f7f7", // grey/hover — matches thread card hover
+  hoverBorder: "#d9d9d9", // grey/absent — matches thread card hover
+  iconBg: "#e6e6e6", // neutral/100
+  ink: "#0b0b0b", // neutral/900
+  sendText: "#f2f2f0", // neutral/50
+  sendBg: "#0B0B0B", // base/strong (black)
+  sendDisabledBg: "#ECEEF2",
+  sendDisabledText: "#9CA3AF",
+};
+
+// Decorative icon palette — cycled across cards whose `icon` is missing or
+// unrecognized. Suggestion text always comes from the caller (e.g. an API).
+const FALLBACK_ICONS = [Users, TrendingUp, FileText, Calendar, DollarSign, BarChart3];
+
+// Resolve a topic's `icon` (a known icon-name string, a lucide component, or
+// nothing) to a renderable component.
+function resolveIcon(icon, index) {
+  if (typeof icon === "string") {
+    return ICON_MAP[icon] || FALLBACK_ICONS[index % FALLBACK_ICONS.length];
+  }
+  return icon || FALLBACK_ICONS[index % FALLBACK_ICONS.length];
+}
+
+// Chordia brand symbol: a dark disc with five concentric green rings.
+export function BrandSymbol({ size = 48 }) {
+  return (
+    <div
+      style={{
+        width: size,
+        height: size,
+        borderRadius: "9999px",
+        background: "#2e3236",
+        overflow: "hidden",
+        position: "relative",
+        flexShrink: 0,
+      }}
+      aria-hidden="true"
+    >
+      <svg
+        viewBox="0 0 40.1436 40.1436"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        style={{ position: "absolute", inset: "8.33%", display: "block" }}
+      >
+        <path d="M38.7803 20.0713C38.7803 15.3098 37.002 10.9639 34.0723 7.66113C30.6441 3.7964 25.6419 1.36331 20.0713 1.36328C14.5958 1.36328 9.67176 3.71492 6.24902 7.46484C3.2131 10.7919 1.36329 15.2146 1.36328 20.0723C1.36328 25.4538 3.63513 30.3049 7.27441 33.7188L7.5918 34.0098C10.9101 36.9752 15.4232 38.7803 20.0723 38.7803C24.8742 38.7803 29.2527 36.9725 32.5654 33.998C36.3821 30.5709 38.7803 25.6014 38.7803 20.0713ZM40.1436 20.0713C40.1435 26.0044 37.5678 31.3371 33.4756 35.0117C29.9225 38.202 25.2231 40.1436 20.0723 40.1436C14.919 40.1436 9.93329 38.0823 6.3418 34.7129C2.43938 31.0522 0 25.8457 0 20.0723C1.16301e-05 14.8616 1.98619 10.1142 5.24219 6.5459C8.91209 2.52517 14.1968 0 20.0713 0C26.0479 3.16876e-05 31.416 2.61368 35.0918 6.75781C38.2339 10.3002 40.1436 14.964 40.1436 20.0713Z" fill="#E8D4A3" />
+        <path d="M36.3329 20.0725C36.3329 15.8532 34.7227 12.0101 32.0829 9.12519L32.081 9.12324C29.1125 5.85837 24.8319 3.80981 20.0712 3.80976C15.3004 3.80976 11.0105 5.86398 8.0351 9.13691C5.40915 12.0255 3.80853 15.8614 3.80853 20.0725C3.80858 24.7008 6.06831 28.4553 9.26166 31.4572C12.2161 34.2351 15.9065 36.3342 20.0712 36.3342C24.2887 36.3341 28.131 34.7276 31.0195 32.093L31.3222 31.8107C34.411 28.852 36.3329 24.6868 36.3329 20.0725ZM37.5253 20.0725C37.5253 25.1849 35.3251 29.7853 31.8222 32.9748C28.7228 35.8015 24.5971 37.5265 20.0712 37.5266C15.4922 37.5266 11.5242 35.2213 8.44525 32.3264C5.09746 29.1794 2.61718 25.1312 2.61713 20.0725C2.61713 15.5535 4.33486 11.4345 7.15228 8.33515C10.3441 4.82411 14.9505 2.61836 20.0712 2.61836C25.1807 2.6184 29.7769 4.81737 32.9619 8.31953C35.7951 11.4157 37.5253 15.5436 37.5253 20.0725Z" fill="#C1D89F" />
+        <path d="M33.8868 20.0725C33.8868 16.3937 32.4371 13.0596 30.0919 10.5842C27.5739 7.92608 24.0201 6.25613 20.0714 6.25609C16.0052 6.25609 12.3494 8.01185 9.82142 10.8079C7.60429 13.2591 6.25501 16.508 6.25501 20.0725C6.25509 23.9518 8.49268 26.595 11.2511 29.1965C13.8273 31.6258 16.5284 33.8879 20.0714 33.8879C23.7055 33.8879 27.0114 32.4826 29.4757 30.1868C32.1895 27.6665 33.8868 24.0684 33.8868 20.0725ZM34.9093 20.0725C34.9093 24.3641 33.0841 28.2293 30.171 30.9348C27.5252 33.3999 23.9742 34.9104 20.0714 34.9104C16.0773 34.9104 13.1053 32.3484 10.5509 29.9397H10.5499C7.76745 27.3154 5.2336 24.4103 5.23353 20.0725C5.23353 16.245 6.68314 12.7541 9.06361 10.1223L9.32142 9.84496C12.023 7.00547 15.8408 5.23461 20.0714 5.23461C24.3152 5.23465 28.1332 7.02997 30.8341 9.88109C33.3498 12.5365 34.9093 16.1189 34.9093 20.0725Z" fill="#9BDB9C" />
+        <path d="M31.4395 20.0714C31.4395 16.9342 30.1592 14.1018 28.1026 12.0441C26.0462 9.98654 23.2107 8.70232 20.0714 8.70227H19.9923C16.6632 8.72458 13.6734 10.1773 11.6075 12.4786C9.8004 14.4925 8.70126 17.1527 8.70126 20.0714C8.70131 21.6405 9.25407 22.8047 10.0919 23.8497C10.9514 24.9218 12.0707 25.8275 13.2393 26.9337C13.7746 27.4408 14.2979 27.9914 14.8097 28.5109C15.3269 29.0358 15.84 29.5377 16.3809 29.9747C17.4581 30.845 18.6195 31.4415 20.0704 31.4415C23.1212 31.4414 25.8897 30.2383 27.9298 28.2814V28.2804C30.0922 26.2142 31.4395 23.2082 31.4395 20.0714ZM32.2911 20.0714C32.2911 23.3411 30.9334 26.4713 28.7335 28.6847L28.5186 28.8956C26.3265 30.9984 23.3497 32.293 20.0704 32.2931C18.356 32.2931 17.0107 31.578 15.8458 30.6368C15.2658 30.1682 14.725 29.6381 14.2032 29.1085C13.6759 28.5734 13.1755 28.0456 12.6544 27.5519V27.5529C11.5516 26.509 10.335 25.5147 9.42685 24.382C8.49711 23.2222 7.84975 21.8758 7.8497 20.0714C7.8497 16.9344 9.03178 14.0733 10.9737 11.9093H10.9747C13.2113 9.41789 16.4584 7.84973 20.0704 7.84973H20.2462L20.2491 7.85364C23.5553 7.90127 26.5354 9.27265 28.7042 11.4425L29.1085 11.8663C31.0791 14.0333 32.2911 16.9075 32.2911 20.0714Z" fill="#74DF98" />
+        <path d="M28.9943 20.0726C28.9943 17.475 27.8846 15.1376 26.1134 13.5062C24.5338 12.0514 22.4294 11.1609 20.1154 11.1497H20.0705C17.4138 11.1497 15.0293 12.3095 13.3947 14.1517C11.9962 15.7271 11.1476 17.8001 11.1476 20.0726C11.1477 21.2559 11.6747 21.9577 12.4513 22.5892C12.85 22.9133 13.2999 23.2072 13.7853 23.5413C14.2637 23.8706 14.7654 24.2328 15.2287 24.6741C15.6677 25.0922 16.0479 25.5869 16.4035 26.0774C16.765 26.5764 17.0961 27.0626 17.4581 27.5052C18.1755 28.3819 18.9427 28.9954 20.0705 28.9954C22.537 28.9953 24.769 27.9944 26.3849 26.3763C27.9975 24.7615 28.9942 22.5337 28.9943 20.0726ZM29.6749 20.0726C29.6749 22.7214 28.6023 25.1204 26.8673 26.8577C25.1288 28.5986 22.7252 29.676 20.0705 29.6761C18.6374 29.6761 17.696 28.8721 16.9308 27.9368C16.5518 27.4736 16.1974 26.9548 15.8517 26.4778C15.5879 26.1138 15.3251 25.7685 15.0451 25.4612L14.7589 25.1673C14.3366 24.7649 13.8722 24.4282 13.3996 24.1028C12.9342 23.7825 12.448 23.4651 12.0216 23.1185C11.1476 22.4078 10.466 21.5291 10.466 20.0726C10.466 17.6272 11.38 15.3949 12.8849 13.6995L13.2238 13.3362C14.9319 11.6 17.2966 10.5141 19.9162 10.4729L19.921 10.4671H20.0714C22.5803 10.4672 24.8639 11.4299 26.5744 13.0052C28.4798 14.7601 29.6749 17.2765 29.6749 20.0726Z" fill="#4DE294" />
+      </svg>
+    </div>
+  );
+}
+
+export default function ChatWelcome({
+  greeting = "Hello! I'm here to assist you. How can I help you today?",
+  placeholder = "Ask Compass about conversations, agents, quality, performance...",
+  value = "",
+  onChange,
+  onSubmit,
+  onKeyDown,
+  topics = [],
+  onTopicSelect,
+  disabled = false,
+  sendDisabled,
+  logo,
+  onBrowseHistory, // optional: renders a "Browse History" button below the topics
+}) {
+  const canSend = sendDisabled != null ? !sendDisabled : !disabled && !!value.trim();
+
+  return (
+    <div
+      style={{
+        flex: 1,
+        minHeight: 0,
+        overflowY: "auto",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: "16px",
+        padding: "32px",
+      }}
+    >
+      {logo || <BrandSymbol size={48} />}
+
+      <h2
+        style={{
+          margin: 0,
+          fontSize: "24px",
+          fontWeight: 550,
+          lineHeight: "normal",
+          color: COLORS.strong,
+          textAlign: "center",
+          whiteSpace: "nowrap",
+          maxWidth: "100%",
+        }}
+      >
+        {greeting}
+      </h2>
+
+      {/* Compose input */}
+      <div
+        style={{
+          width: "100%",
+          maxWidth: "744px",
+          display: "flex",
+          alignItems: "flex-end",
+          gap: "12px",
+          padding: "12px",
+          background: "#FFFFFF",
+          border: `1px solid ${COLORS.border}`,
+          borderRadius: "8px",
+        }}
+      >
+        <style>{`.cui-welcome-compose::placeholder { color: ${COLORS.muted}; opacity: 1; }`}</style>
+        <textarea
+          value={value}
+          onChange={(e) => onChange?.(e.target.value)}
+          onKeyDown={onKeyDown}
+          placeholder={placeholder}
+          disabled={disabled}
+          rows={1}
+          className="cui-welcome-compose"
+          style={{
+            flex: 1,
+            minWidth: 0,
+            border: "none",
+            outline: "none",
+            resize: "none",
+            background: "transparent",
+            fontSize: "15px",
+            lineHeight: 1.5,
+            color: COLORS.strong,
+            fontFamily: "inherit",
+            maxHeight: "120px",
+          }}
+        />
+        <button
+          type="button"
+          onClick={() => onSubmit?.()}
+          disabled={!canSend}
+          style={{
+            flexShrink: 0,
+            display: "inline-flex",
+            alignItems: "center",
+            justifyContent: "center",
+            height: "28px",
+            padding: "0 12px",
+            borderRadius: "8px",
+            border: "none",
+            fontSize: "14px",
+            fontWeight: 400,
+            lineHeight: "24px",
+            color: canSend ? COLORS.sendText : COLORS.sendDisabledText,
+            background: canSend ? COLORS.sendBg : COLORS.sendDisabledBg,
+            cursor: canSend ? "pointer" : "not-allowed",
+          }}
+        >
+          Send
+        </button>
+      </div>
+
+      {/* Suggested topics */}
+      {topics?.length > 0 && (
+        <div
+          style={{
+            width: "100%",
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            gap: "16px",
+            marginTop: "8px",
+          }}
+        >
+          <div
+            style={{
+              fontSize: "14px",
+              fontWeight: 600,
+              lineHeight: "normal",
+              color: COLORS.strong,
+              whiteSpace: "nowrap",
+            }}
+          >
+            Suggested Topics
+          </div>
+          <div
+            style={{
+              display: "flex",
+              flexWrap: "wrap",
+              gap: "16px",
+              justifyContent: "center",
+              maxWidth: "744px",
+            }}
+          >
+            {topics.map((topic, index) => {
+              const Icon = resolveIcon(topic.icon, index);
+              return (
+                <button
+                  key={topic.id ?? `${topic.title || ""}-${topic.prompt}-${index}`}
+                  type="button"
+                  disabled={disabled}
+                  onClick={() => {
+                    if (disabled) return;
+                    onTopicSelect?.(topic.prompt);
+                  }}
+                  style={{
+                    width: "233px",
+                    minHeight: "82px",
+                    display: "flex",
+                    alignItems: "flex-start",
+                    gap: "16px",
+                    padding: "16px",
+                    background: "#FFFFFF",
+                    border: `1px solid ${COLORS.cardBorder}`,
+                    borderRadius: "8px",
+                    cursor: disabled ? "not-allowed" : "pointer",
+                    textAlign: "left",
+                    transition: "border-color 0.12s ease, background 0.12s ease",
+                  }}
+                  onMouseEnter={(e) => {
+                    if (disabled) return;
+                    e.currentTarget.style.borderColor = COLORS.hoverBorder;
+                    e.currentTarget.style.background = COLORS.hoverBg;
+                  }}
+                  onMouseLeave={(e) => {
+                    e.currentTarget.style.borderColor = COLORS.cardBorder;
+                    e.currentTarget.style.background = "#FFFFFF";
+                  }}
+                >
+                  <div
+                    style={{
+                      flexShrink: 0,
+                      width: "34px",
+                      height: "34px",
+                      borderRadius: "9999px",
+                      background: COLORS.iconBg,
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      color: COLORS.ink,
+                    }}
+                  >
+                    {Icon ? <Icon size={16} /> : null}
+                  </div>
+                  <div style={{ flex: 1, minWidth: 0, display: "flex", flexDirection: "column", gap: "6px" }}>
+                    {topic.title && (
+                      <div style={{ fontSize: "13px", fontWeight: 600, color: COLORS.ink, lineHeight: 1.2 }}>
+                        {topic.title}
+                      </div>
+                    )}
+                    <div
+                      title={topic.prompt}
+                      style={{
+                        fontSize: "13px",
+                        fontWeight: 400,
+                        color: COLORS.ink,
+                        lineHeight: 1.2,
+                        // Clamp the description to 3 lines, then ellipsis.
+                        // Full text is available via the title tooltip.
+                        display: "-webkit-box",
+                        WebkitBoxOrient: "vertical",
+                        WebkitLineClamp: 3,
+                        overflow: "hidden",
+                        textOverflow: "ellipsis",
+                      }}
+                    >
+                      {topic.prompt}
+                    </div>
+                  </div>
+                </button>
+              );
+            })}
+          </div>
+        </div>
+      )}
+
+      {/* Browse History */}
+      {onBrowseHistory && (
+        <button
+          type="button"
+          onClick={onBrowseHistory}
+          style={{
+            display: "inline-flex",
+            alignItems: "center",
+            justifyContent: "center",
+            gap: "8px",
+            padding: "12px 16px",
+            borderRadius: "10px",
+            border: "1px solid #bfbfbf",
+            background: "#FFFFFF",
+            color: "#323232",
+            fontSize: "14px",
+            fontWeight: 400,
+            lineHeight: "24px",
+            cursor: "pointer",
+            transition: "background 0.12s ease",
+          }}
+          onMouseEnter={(e) => (e.currentTarget.style.background = COLORS.hoverBg)}
+          onMouseLeave={(e) => (e.currentTarget.style.background = "#FFFFFF")}
+        >
+          <History size={20} color="#676767" />
+          Browse History
+        </button>
+      )}
+    </div>
+  );
+}