@triadxyz/widgets 0.0.1

package/README.md

@@ -0,0 +1 @@
+# triadmarkets-widgets

package/dist/index.d.mts

@@ -0,0 +1,44 @@
+import React from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface ButtonWidgetProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    label: string;
+    variant?: 'primary' | 'secondary';
+}
+declare const ButtonWidget: React.FC<ButtonWidgetProps>;
+
+interface ChatMessage {
+    authority: string;
+    name: string;
+    image: string;
+    predictionsCount: number;
+    message: string;
+    timestamp: number;
+}
+
+interface LiveChatTheme {
+    primaryColor?: string;
+    background?: string;
+    textColor?: string;
+}
+interface LiveChatClassNames {
+    container?: string;
+    header?: string;
+    messages?: string;
+    input?: string;
+    button?: string;
+}
+interface LiveChatProps {
+    isOpen: boolean;
+    onClose: () => void;
+    title?: string;
+    theme?: LiveChatTheme;
+    classNames?: LiveChatClassNames;
+    renderMessage?: (message: ChatMessage) => React.ReactNode;
+    renderHeader?: () => React.ReactNode;
+    authority: string;
+    customerAuthority: string;
+}
+declare function LiveChat({ isOpen, onClose, title, theme, classNames, renderMessage, renderHeader, authority, customerAuthority, }: LiveChatProps): react_jsx_runtime.JSX.Element | null;
+
+export { ButtonWidget, type ButtonWidgetProps, LiveChat, type LiveChatClassNames, type LiveChatProps, type LiveChatTheme };

package/dist/index.d.ts

@@ -0,0 +1,44 @@
+import React from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface ButtonWidgetProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    label: string;
+    variant?: 'primary' | 'secondary';
+}
+declare const ButtonWidget: React.FC<ButtonWidgetProps>;
+
+interface ChatMessage {
+    authority: string;
+    name: string;
+    image: string;
+    predictionsCount: number;
+    message: string;
+    timestamp: number;
+}
+
+interface LiveChatTheme {
+    primaryColor?: string;
+    background?: string;
+    textColor?: string;
+}
+interface LiveChatClassNames {
+    container?: string;
+    header?: string;
+    messages?: string;
+    input?: string;
+    button?: string;
+}
+interface LiveChatProps {
+    isOpen: boolean;
+    onClose: () => void;
+    title?: string;
+    theme?: LiveChatTheme;
+    classNames?: LiveChatClassNames;
+    renderMessage?: (message: ChatMessage) => React.ReactNode;
+    renderHeader?: () => React.ReactNode;
+    authority: string;
+    customerAuthority: string;
+}
+declare function LiveChat({ isOpen, onClose, title, theme, classNames, renderMessage, renderHeader, authority, customerAuthority, }: LiveChatProps): react_jsx_runtime.JSX.Element | null;
+
+export { ButtonWidget, type ButtonWidgetProps, LiveChat, type LiveChatClassNames, type LiveChatProps, type LiveChatTheme };

package/dist/index.js

@@ -0,0 +1,9 @@
+'use strict';var jsxRuntime=require('react/jsx-runtime'),react=require('react'),lucideReact=require('lucide-react'),clsx=require('clsx'),tailwindMerge=require('tailwind-merge'),S=require('socket.io-client'),dateFns=require('date-fns');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var S__default=/*#__PURE__*/_interopDefault(S);var W=({label:s,variant:n="primary",className:p="",...m})=>jsxRuntime.jsx("button",{className:`px-4 py-2 rounded-lg font-medium transition-colors ${{primary:"bg-blue-600 text-white hover:bg-blue-700",secondary:"bg-gray-200 text-gray-800 hover:bg-gray-300"}[n]} ${p}`,...m,children:s});function d(...s){return tailwindMerge.twMerge(clsx.clsx(s))}var T=S__default.default("https://beta.triadfi.co",{path:"/socket.io",reconnection:true,reconnectionAttempts:5,reconnectionDelay:1e3,randomizationFactor:.5,timeout:5e3,transports:["websocket"]}),a=T;function w({authority:s,customerAuthority:n}){let[p,m]=react.useState([]),[i,u]=react.useState(0);return react.useEffect(()=>{if(!(!n))return a.connected||a.connect(),a.emit("chat:join",{authority:s,customerAuthority:n},r=>{r.error&&console.error("join error",r.error);}),a.off("chat:history"),a.on("chat:history",r=>{m(c=>c.length?c:r);}),a.off("chat:message"),a.on("chat:message",r=>{m(c=>[...c,r]);}),a.off("chat:users"),a.on("chat:users",r=>{u(r.count);}),()=>{a.off("chat:history"),a.off("chat:message"),a.off("chat:users");}},[s,n]),{messages:p,onlineCount:i,sendMessage:r=>{a.emit("chat:message",{authority:s,customerAuthority:n,message:r},c=>{c.error&&console.error("send error",c.error);});}}}function se({isOpen:s,onClose:n,title:p="Live Chat",theme:m,classNames:i,renderMessage:u,renderHeader:f,authority:r,customerAuthority:c}){let[l,g]=react.useState(""),x=react.useRef(null),h=m?.primaryColor||"#FF3D00",L=m?.background||"var(--chat-bg)",{sendMessage:R,onlineCount:D,messages:b}=w({authority:r||"random",customerAuthority:c}),z=()=>{x.current?.scrollIntoView({behavior:"smooth"});};react.useEffect(()=>{z();},[b]);let v=()=>{l.trim()&&(g(""),R(l));},k=t=>{t.key==="Enter"&&!t.shiftKey&&(t.preventDefault(),v());};return s?jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("style",{children:`
+        :root {
+          --chat-bg: #ffffff;
+        }
+        .dark {
+          --chat-bg: #15181D;
+        }
+      `}),jsxRuntime.jsxs("div",{onClick:t=>t.stopPropagation(),className:d("fixed right-6 z-[110] hidden lg:flex flex-col overflow-hidden rounded-3xl shadow-2xl",i?.container),style:{top:"75px",width:"340px",height:"800px",maxHeight:"calc(100vh - 90px)",background:L},children:[f?f():jsxRuntime.jsxs("div",{className:d("flex items-center justify-between px-6 py-4 border-b border-black/10 dark:border-white/10",i?.header),children:[jsxRuntime.jsxs("div",{className:"flex items-center gap-3",children:[jsxRuntime.jsx("h2",{className:"text-lg font-semibold text-triad-dark-100 dark:text-white",children:p}),jsxRuntime.jsxs("div",{className:"flex items-center gap-1.5",children:[jsxRuntime.jsx("div",{className:"size-2 rounded-full bg-green-500 animate-pulse"}),jsxRuntime.jsxs("span",{className:"text-xs text-black/50 dark:text-white/50",children:[D," online"]})]})]}),jsxRuntime.jsx("button",{onClick:n,children:jsxRuntime.jsx(lucideReact.X,{size:18})})]}),jsxRuntime.jsxs("div",{className:d("flex-1 overflow-y-auto px-6 py-4 space-y-4",i?.messages),children:[b.map((t,y)=>u?u(t):jsxRuntime.jsxs("div",{className:`flex flex-col gap-1 ${t.authority===r?"items-end":"items-start"}`,children:[t.authority!==r&&jsxRuntime.jsx("span",{className:"text-xs font-medium text-triad-dark-100 dark:text-white",children:t.name}),jsxRuntime.jsx("div",{className:d("max-w-[75%] rounded-2xl px-4 py-2.5",t.authority===r?"text-white rounded-br-sm":"bg-black/5 dark:bg-white/5 text-triad-dark-100 dark:text-white rounded-bl-sm"),style:t.authority===r?{backgroundColor:h}:void 0,children:jsxRuntime.jsx("p",{className:"text-sm break-words",children:t.message})}),jsxRuntime.jsx("span",{className:"text-[10px] opacity-50",children:dateFns.format(t.timestamp,"HH:mm")})]},y)),jsxRuntime.jsx("div",{ref:x})]}),jsxRuntime.jsx("div",{className:"px-6 py-4 border-t border-black/10 dark:border-white/10",children:jsxRuntime.jsxs("div",{className:"flex items-center gap-2",children:[jsxRuntime.jsx("input",{value:l,onChange:t=>g(t.target.value),onKeyDown:k,placeholder:"Digite sua mensagem...",className:d("flex-1 px-4 py-2.5 rounded-xl bg-black/5 dark:bg-white/5 dark:text-white text-sm outline-none",i?.input)}),jsxRuntime.jsx("button",{onClick:v,disabled:!l.trim(),className:d("flex items-center justify-center size-10 rounded-xl transition-colors",i?.button),style:{backgroundColor:l.trim()?h:void 0,opacity:l.trim()?1:.5},children:jsxRuntime.jsx(lucideReact.Send,{size:18,className:"dark:text-white text-app-gay-400"})})]})})]}),jsxRuntime.jsx("div",{className:"fixed inset-0 z-[110] flex flex-col lg:hidden bg-white dark:bg-[#15181D]",children:jsxRuntime.jsxs("div",{className:"flex-1 flex flex-col",children:[jsxRuntime.jsxs("div",{className:"flex items-center justify-between px-4 py-4 border-b",children:[jsxRuntime.jsx("h2",{children:p}),jsxRuntime.jsx("button",{onClick:n,children:jsxRuntime.jsx(lucideReact.X,{})})]}),jsxRuntime.jsxs("div",{className:"flex-1 overflow-y-auto px-4 py-4 space-y-4",children:[b.map((t,y)=>jsxRuntime.jsx("div",{children:t.message},y)),jsxRuntime.jsx("div",{ref:x})]}),jsxRuntime.jsxs("div",{className:"p-4 border-t flex gap-2",children:[jsxRuntime.jsx("input",{value:l,onChange:t=>g(t.target.value),onKeyDown:k,className:"flex-1"}),jsxRuntime.jsx("button",{className:d(i?.button),style:{backgroundColor:l.trim()?h:void 0,opacity:l.trim()?1:.5},onClick:v,children:jsxRuntime.jsx(lucideReact.Send,{className:"dark:text-white text-app-gay-400"})})]})]})})]}):null}exports.ButtonWidget=W;exports.LiveChat=se;//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ButtonWidget.tsx","../src/utils/cn.ts","../src/utils/socket.ts","../src/hooks/useChat.ts","../src/components/LiveChat.tsx"],"names":["ButtonWidget","label","variant","className","props","jsx","cn","classes","twMerge","clsx","socket","io","socket_default","useChat","authority","customerAuthority","messages","setMessages","useState","onlineCount","setOnlineCount","useEffect","res","msgs","prev","msg","data","message","LiveChat","isOpen","onClose","title","theme","classNames","renderMessage","renderHeader","inputValue","setInputValue","messagesEndRef","useRef","primary","background","sendMessage","scrollToBottom","handleSendMessage","handleKeyDown","e","jsxs","Fragment","X","idx","format","Send","m"],"mappings":"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","file":"index.js","sourcesContent":["'use client';\n\nimport React from 'react';\n\nexport interface ButtonWidgetProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  label: string;\n  variant?: 'primary' | 'secondary';\n}\n\nexport const ButtonWidget: React.FC<ButtonWidgetProps> = ({ \n  label, \n  variant = 'primary', \n  className = '',\n  ...props \n}) => {\n  const baseStyles = 'px-4 py-2 rounded-lg font-medium transition-colors';\n  const variants = {\n    primary: 'bg-blue-600 text-white hover:bg-blue-700',\n    secondary: 'bg-gray-200 text-gray-800 hover:bg-gray-300'\n  };\n\n  return (\n    <button \n      className={`${baseStyles} ${variants[variant]} ${className}`}\n      {...props}\n    >\n      {label}\n    </button>\n  );\n};\n","import type { ClassValue } from \"clsx\";\nimport { clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...classes: ClassValue[]) {\n  return twMerge(clsx(classes));\n}\n","import io from \"socket.io-client\";\n\nconst socket = io(\"https://beta.triadfi.co\", {\n  path: \"/socket.io\",\n  reconnection: true,\n  reconnectionAttempts: 5,\n  reconnectionDelay: 1000,\n  randomizationFactor: 0.5,\n  timeout: 5000,\n  transports: [\"websocket\"],\n});\n\nexport default socket;\n","import socket from \"@/utils/socket\";\nimport { useEffect, useState } from \"react\";\n\nexport interface ChatMessage {\n  authority: string;\n  name: string;\n  image: string;\n  predictionsCount: number;\n  message: string;\n  timestamp: number;\n}\n\nexport function useChat({\n  authority,\n  customerAuthority,\n}: {\n  authority: string;\n  customerAuthority: string;\n}) {\n  const [messages, setMessages] = useState<ChatMessage[]>([]);\n  const [onlineCount, setOnlineCount] = useState(0);\n\n  useEffect(() => {\n    if (!authority || !customerAuthority) return;\n\n    if (!socket.connected) {\n      socket.connect();\n    }\n\n    socket.emit(\"chat:join\", { authority, customerAuthority }, (res: any) => {\n      if (res.error) {\n        console.error(\"join error\", res.error);\n      }\n    });\n\n    socket.off(\"chat:history\");\n    socket.on(\"chat:history\", (msgs) => {\n      setMessages((prev) => (prev.length ? prev : msgs));\n    });\n\n    socket.off(\"chat:message\");\n    socket.on(\"chat:message\", (msg) => {\n      setMessages((prev) => [...prev, msg]);\n    });\n\n    socket.off(\"chat:users\");\n    socket.on(\"chat:users\", (data) => {\n      setOnlineCount(data.count);\n    });\n\n    return () => {\n      socket.off(\"chat:history\");\n      socket.off(\"chat:message\");\n      socket.off(\"chat:users\");\n    };\n  }, [authority, customerAuthority]);\n\n  const sendMessage = (message: string) => {\n    socket.emit(\n      \"chat:message\",\n      { authority, customerAuthority, message },\n      (res: any) => {\n        if (res.error) {\n          console.error(\"send error\", res.error);\n        }\n      },\n    );\n  };\n\n  return {\n    messages,\n    onlineCount,\n    sendMessage,\n  };\n}\n","\"use client\";\n\nimport React, { useState, useRef, useEffect } from \"react\";\nimport { X, Send } from \"lucide-react\";\nimport { cn } from \"@/utils/cn\";\nimport { useChat, ChatMessage } from \"@/hooks/useChat\";\nimport { format } from \"date-fns\";\n\nexport interface LiveChatTheme {\n  primaryColor?: string;\n  background?: string;\n  textColor?: string;\n}\n\nexport interface LiveChatClassNames {\n  container?: string;\n  header?: string;\n  messages?: string;\n  input?: string;\n  button?: string;\n}\n\nexport interface LiveChatProps {\n  isOpen: boolean;\n  onClose: () => void;\n\n  // ui\n  title?: string;\n\n  // customization\n  theme?: LiveChatTheme;\n  classNames?: LiveChatClassNames;\n\n  // slots\n  renderMessage?: (message: ChatMessage) => React.ReactNode;\n  renderHeader?: () => React.ReactNode;\n  authority: string;\n  customerAuthority: string;\n}\n\nexport function LiveChat({\n  isOpen,\n  onClose,\n  title = \"Live Chat\",\n  theme,\n  classNames,\n  renderMessage,\n  renderHeader,\n  authority,\n  customerAuthority,\n}: LiveChatProps) {\n  const [inputValue, setInputValue] = useState(\"\");\n  const messagesEndRef = useRef<HTMLDivElement>(null);\n  const primary = theme?.primaryColor || \"#FF3D00\";\n  const background = theme?.background || \"var(--chat-bg)\";\n  const { sendMessage, onlineCount, messages } = useChat({\n    authority: authority || \"random\",\n    customerAuthority: customerAuthority,\n  });\n\n  const scrollToBottom = () => {\n    messagesEndRef.current?.scrollIntoView({ behavior: \"smooth\" });\n  };\n\n  useEffect(() => {\n    scrollToBottom();\n  }, [messages]);\n\n  const handleSendMessage = () => {\n    if (!inputValue.trim()) return;\n    setInputValue(\"\");\n    sendMessage(inputValue);\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent) => {\n    if (e.key === \"Enter\" && !e.shiftKey) {\n      e.preventDefault();\n      handleSendMessage();\n    }\n  };\n\n  if (!isOpen) return null;\n\n  return (\n    <>\n      <style>{`\n        :root {\n          --chat-bg: #ffffff;\n        }\n        .dark {\n          --chat-bg: #15181D;\n        }\n      `}</style>\n\n      {/* Desktop */}\n      <div\n        onClick={(e) => e.stopPropagation()}\n        className={cn(\n          \"fixed right-6 z-[110] hidden lg:flex flex-col overflow-hidden rounded-3xl shadow-2xl\",\n          classNames?.container,\n        )}\n        style={{\n          top: \"75px\",\n          width: \"340px\",\n          height: \"800px\",\n          maxHeight: \"calc(100vh - 90px)\",\n          background,\n        }}\n      >\n        {/* Header */}\n        {renderHeader ? (\n          renderHeader()\n        ) : (\n          <div\n            className={cn(\n              \"flex items-center justify-between px-6 py-4 border-b border-black/10 dark:border-white/10\",\n              classNames?.header,\n            )}\n          >\n            <div className=\"flex items-center gap-3\">\n              <h2 className=\"text-lg font-semibold text-triad-dark-100 dark:text-white\">\n                {title}\n              </h2>\n              <div className=\"flex items-center gap-1.5\">\n                <div className=\"size-2 rounded-full bg-green-500 animate-pulse\" />\n                <span className=\"text-xs text-black/50 dark:text-white/50\">\n                  {onlineCount} online\n                </span>\n              </div>\n            </div>\n            <button onClick={onClose}>\n              <X size={18} />\n            </button>\n          </div>\n        )}\n\n        {/* Messages */}\n        <div\n          className={cn(\n            \"flex-1 overflow-y-auto px-6 py-4 space-y-4\",\n            classNames?.messages,\n          )}\n        >\n          {messages.map((message, idx) =>\n            renderMessage ? (\n              renderMessage(message)\n            ) : (\n              <div\n                key={idx}\n                className={`flex flex-col gap-1 ${\n                  message.authority === authority ? \"items-end\" : \"items-start\"\n                }`}\n              >\n                {message.authority !== authority && (\n                  <span className=\"text-xs font-medium text-triad-dark-100 dark:text-white\">\n                    {message.name}\n                  </span>\n                )}\n\n                <div\n                  className={cn(\n                    \"max-w-[75%] rounded-2xl px-4 py-2.5\",\n                    message.authority === authority\n                      ? \"text-white rounded-br-sm\"\n                      : \"bg-black/5 dark:bg-white/5 text-triad-dark-100 dark:text-white rounded-bl-sm\",\n                  )}\n                  style={\n                    message.authority === authority\n                      ? { backgroundColor: primary }\n                      : undefined\n                  }\n                >\n                  <p className=\"text-sm break-words\">{message.message}</p>\n                </div>\n\n                <span className=\"text-[10px] opacity-50\">\n                  {format(message.timestamp, \"HH:mm\")}\n                </span>\n              </div>\n            ),\n          )}\n          <div ref={messagesEndRef} />\n        </div>\n\n        {/* Input */}\n        <div className=\"px-6 py-4 border-t border-black/10 dark:border-white/10\">\n          <div className=\"flex items-center gap-2\">\n            <input\n              value={inputValue}\n              onChange={(e) => setInputValue(e.target.value)}\n              onKeyDown={handleKeyDown}\n              placeholder=\"Digite sua mensagem...\"\n              className={cn(\n                \"flex-1 px-4 py-2.5 rounded-xl bg-black/5 dark:bg-white/5 dark:text-white text-sm outline-none\",\n                classNames?.input,\n              )}\n            />\n\n            <button\n              onClick={handleSendMessage}\n              disabled={!inputValue.trim()}\n              className={cn(\n                \"flex items-center justify-center size-10 rounded-xl transition-colors\",\n                classNames?.button,\n              )}\n              style={{\n                backgroundColor: inputValue.trim() ? primary : undefined,\n                opacity: inputValue.trim() ? 1 : 0.5,\n              }}\n            >\n              <Send size={18} className=\"dark:text-white text-app-gay-400\" />\n            </button>\n          </div>\n        </div>\n      </div>\n\n      {/* Mobile */}\n      <div className=\"fixed inset-0 z-[110] flex flex-col lg:hidden bg-white dark:bg-[#15181D]\">\n        {/* Reaproveita mesma estrutura */}\n        <div className=\"flex-1 flex flex-col\">\n          {/* Header */}\n          <div className=\"flex items-center justify-between px-4 py-4 border-b\">\n            <h2>{title}</h2>\n            <button onClick={onClose}>\n              <X />\n            </button>\n          </div>\n\n          {/* Messages */}\n          <div className=\"flex-1 overflow-y-auto px-4 py-4 space-y-4\">\n            {messages.map((m, idx) => (\n              <div key={idx}>{m.message}</div>\n            ))}\n            <div ref={messagesEndRef} />\n          </div>\n\n          {/* Input */}\n          <div className=\"p-4 border-t flex gap-2\">\n            <input\n              value={inputValue}\n              onChange={(e) => setInputValue(e.target.value)}\n              onKeyDown={handleKeyDown}\n              className=\"flex-1\"\n            />\n            <button\n              className={cn(classNames?.button)}\n              style={{\n                backgroundColor: inputValue.trim() ? primary : undefined,\n                opacity: inputValue.trim() ? 1 : 0.5,\n              }}\n              onClick={handleSendMessage}\n            >\n              <Send className=\"dark:text-white text-app-gay-400\" />\n            </button>\n          </div>\n        </div>\n      </div>\n    </>\n  );\n}\n"]}

package/dist/index.mjs

@@ -0,0 +1,9 @@
+import {jsx,jsxs,Fragment}from'react/jsx-runtime';import {useState,useRef,useEffect}from'react';import {X,Send}from'lucide-react';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';import S from'socket.io-client';import {format}from'date-fns';var W=({label:s,variant:n="primary",className:p="",...m})=>jsx("button",{className:`px-4 py-2 rounded-lg font-medium transition-colors ${{primary:"bg-blue-600 text-white hover:bg-blue-700",secondary:"bg-gray-200 text-gray-800 hover:bg-gray-300"}[n]} ${p}`,...m,children:s});function d(...s){return twMerge(clsx(s))}var T=S("https://beta.triadfi.co",{path:"/socket.io",reconnection:true,reconnectionAttempts:5,reconnectionDelay:1e3,randomizationFactor:.5,timeout:5e3,transports:["websocket"]}),a=T;function w({authority:s,customerAuthority:n}){let[p,m]=useState([]),[i,u]=useState(0);return useEffect(()=>{if(!(!n))return a.connected||a.connect(),a.emit("chat:join",{authority:s,customerAuthority:n},r=>{r.error&&console.error("join error",r.error);}),a.off("chat:history"),a.on("chat:history",r=>{m(c=>c.length?c:r);}),a.off("chat:message"),a.on("chat:message",r=>{m(c=>[...c,r]);}),a.off("chat:users"),a.on("chat:users",r=>{u(r.count);}),()=>{a.off("chat:history"),a.off("chat:message"),a.off("chat:users");}},[s,n]),{messages:p,onlineCount:i,sendMessage:r=>{a.emit("chat:message",{authority:s,customerAuthority:n,message:r},c=>{c.error&&console.error("send error",c.error);});}}}function se({isOpen:s,onClose:n,title:p="Live Chat",theme:m,classNames:i,renderMessage:u,renderHeader:f,authority:r,customerAuthority:c}){let[l,g]=useState(""),x=useRef(null),h=m?.primaryColor||"#FF3D00",L=m?.background||"var(--chat-bg)",{sendMessage:R,onlineCount:D,messages:b}=w({authority:r||"random",customerAuthority:c}),z=()=>{x.current?.scrollIntoView({behavior:"smooth"});};useEffect(()=>{z();},[b]);let v=()=>{l.trim()&&(g(""),R(l));},k=t=>{t.key==="Enter"&&!t.shiftKey&&(t.preventDefault(),v());};return s?jsxs(Fragment,{children:[jsx("style",{children:`
+        :root {
+          --chat-bg: #ffffff;
+        }
+        .dark {
+          --chat-bg: #15181D;
+        }
+      `}),jsxs("div",{onClick:t=>t.stopPropagation(),className:d("fixed right-6 z-[110] hidden lg:flex flex-col overflow-hidden rounded-3xl shadow-2xl",i?.container),style:{top:"75px",width:"340px",height:"800px",maxHeight:"calc(100vh - 90px)",background:L},children:[f?f():jsxs("div",{className:d("flex items-center justify-between px-6 py-4 border-b border-black/10 dark:border-white/10",i?.header),children:[jsxs("div",{className:"flex items-center gap-3",children:[jsx("h2",{className:"text-lg font-semibold text-triad-dark-100 dark:text-white",children:p}),jsxs("div",{className:"flex items-center gap-1.5",children:[jsx("div",{className:"size-2 rounded-full bg-green-500 animate-pulse"}),jsxs("span",{className:"text-xs text-black/50 dark:text-white/50",children:[D," online"]})]})]}),jsx("button",{onClick:n,children:jsx(X,{size:18})})]}),jsxs("div",{className:d("flex-1 overflow-y-auto px-6 py-4 space-y-4",i?.messages),children:[b.map((t,y)=>u?u(t):jsxs("div",{className:`flex flex-col gap-1 ${t.authority===r?"items-end":"items-start"}`,children:[t.authority!==r&&jsx("span",{className:"text-xs font-medium text-triad-dark-100 dark:text-white",children:t.name}),jsx("div",{className:d("max-w-[75%] rounded-2xl px-4 py-2.5",t.authority===r?"text-white rounded-br-sm":"bg-black/5 dark:bg-white/5 text-triad-dark-100 dark:text-white rounded-bl-sm"),style:t.authority===r?{backgroundColor:h}:void 0,children:jsx("p",{className:"text-sm break-words",children:t.message})}),jsx("span",{className:"text-[10px] opacity-50",children:format(t.timestamp,"HH:mm")})]},y)),jsx("div",{ref:x})]}),jsx("div",{className:"px-6 py-4 border-t border-black/10 dark:border-white/10",children:jsxs("div",{className:"flex items-center gap-2",children:[jsx("input",{value:l,onChange:t=>g(t.target.value),onKeyDown:k,placeholder:"Digite sua mensagem...",className:d("flex-1 px-4 py-2.5 rounded-xl bg-black/5 dark:bg-white/5 dark:text-white text-sm outline-none",i?.input)}),jsx("button",{onClick:v,disabled:!l.trim(),className:d("flex items-center justify-center size-10 rounded-xl transition-colors",i?.button),style:{backgroundColor:l.trim()?h:void 0,opacity:l.trim()?1:.5},children:jsx(Send,{size:18,className:"dark:text-white text-app-gay-400"})})]})})]}),jsx("div",{className:"fixed inset-0 z-[110] flex flex-col lg:hidden bg-white dark:bg-[#15181D]",children:jsxs("div",{className:"flex-1 flex flex-col",children:[jsxs("div",{className:"flex items-center justify-between px-4 py-4 border-b",children:[jsx("h2",{children:p}),jsx("button",{onClick:n,children:jsx(X,{})})]}),jsxs("div",{className:"flex-1 overflow-y-auto px-4 py-4 space-y-4",children:[b.map((t,y)=>jsx("div",{children:t.message},y)),jsx("div",{ref:x})]}),jsxs("div",{className:"p-4 border-t flex gap-2",children:[jsx("input",{value:l,onChange:t=>g(t.target.value),onKeyDown:k,className:"flex-1"}),jsx("button",{className:d(i?.button),style:{backgroundColor:l.trim()?h:void 0,opacity:l.trim()?1:.5},onClick:v,children:jsx(Send,{className:"dark:text-white text-app-gay-400"})})]})]})})]}):null}export{W as ButtonWidget,se as LiveChat};//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ButtonWidget.tsx","../src/utils/cn.ts","../src/utils/socket.ts","../src/hooks/useChat.ts","../src/components/LiveChat.tsx"],"names":["ButtonWidget","label","variant","className","props","jsx","cn","classes","twMerge","clsx","socket","io","socket_default","useChat","authority","customerAuthority","messages","setMessages","useState","onlineCount","setOnlineCount","useEffect","res","msgs","prev","msg","data","message","LiveChat","isOpen","onClose","title","theme","classNames","renderMessage","renderHeader","inputValue","setInputValue","messagesEndRef","useRef","primary","background","sendMessage","scrollToBottom","handleSendMessage","handleKeyDown","e","jsxs","Fragment","X","idx","format","Send","m"],"mappings":"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","file":"index.mjs","sourcesContent":["'use client';\n\nimport React from 'react';\n\nexport interface ButtonWidgetProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  label: string;\n  variant?: 'primary' | 'secondary';\n}\n\nexport const ButtonWidget: React.FC<ButtonWidgetProps> = ({ \n  label, \n  variant = 'primary', \n  className = '',\n  ...props \n}) => {\n  const baseStyles = 'px-4 py-2 rounded-lg font-medium transition-colors';\n  const variants = {\n    primary: 'bg-blue-600 text-white hover:bg-blue-700',\n    secondary: 'bg-gray-200 text-gray-800 hover:bg-gray-300'\n  };\n\n  return (\n    <button \n      className={`${baseStyles} ${variants[variant]} ${className}`}\n      {...props}\n    >\n      {label}\n    </button>\n  );\n};\n","import type { ClassValue } from \"clsx\";\nimport { clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...classes: ClassValue[]) {\n  return twMerge(clsx(classes));\n}\n","import io from \"socket.io-client\";\n\nconst socket = io(\"https://beta.triadfi.co\", {\n  path: \"/socket.io\",\n  reconnection: true,\n  reconnectionAttempts: 5,\n  reconnectionDelay: 1000,\n  randomizationFactor: 0.5,\n  timeout: 5000,\n  transports: [\"websocket\"],\n});\n\nexport default socket;\n","import socket from \"@/utils/socket\";\nimport { useEffect, useState } from \"react\";\n\nexport interface ChatMessage {\n  authority: string;\n  name: string;\n  image: string;\n  predictionsCount: number;\n  message: string;\n  timestamp: number;\n}\n\nexport function useChat({\n  authority,\n  customerAuthority,\n}: {\n  authority: string;\n  customerAuthority: string;\n}) {\n  const [messages, setMessages] = useState<ChatMessage[]>([]);\n  const [onlineCount, setOnlineCount] = useState(0);\n\n  useEffect(() => {\n    if (!authority || !customerAuthority) return;\n\n    if (!socket.connected) {\n      socket.connect();\n    }\n\n    socket.emit(\"chat:join\", { authority, customerAuthority }, (res: any) => {\n      if (res.error) {\n        console.error(\"join error\", res.error);\n      }\n    });\n\n    socket.off(\"chat:history\");\n    socket.on(\"chat:history\", (msgs) => {\n      setMessages((prev) => (prev.length ? prev : msgs));\n    });\n\n    socket.off(\"chat:message\");\n    socket.on(\"chat:message\", (msg) => {\n      setMessages((prev) => [...prev, msg]);\n    });\n\n    socket.off(\"chat:users\");\n    socket.on(\"chat:users\", (data) => {\n      setOnlineCount(data.count);\n    });\n\n    return () => {\n      socket.off(\"chat:history\");\n      socket.off(\"chat:message\");\n      socket.off(\"chat:users\");\n    };\n  }, [authority, customerAuthority]);\n\n  const sendMessage = (message: string) => {\n    socket.emit(\n      \"chat:message\",\n      { authority, customerAuthority, message },\n      (res: any) => {\n        if (res.error) {\n          console.error(\"send error\", res.error);\n        }\n      },\n    );\n  };\n\n  return {\n    messages,\n    onlineCount,\n    sendMessage,\n  };\n}\n","\"use client\";\n\nimport React, { useState, useRef, useEffect } from \"react\";\nimport { X, Send } from \"lucide-react\";\nimport { cn } from \"@/utils/cn\";\nimport { useChat, ChatMessage } from \"@/hooks/useChat\";\nimport { format } from \"date-fns\";\n\nexport interface LiveChatTheme {\n  primaryColor?: string;\n  background?: string;\n  textColor?: string;\n}\n\nexport interface LiveChatClassNames {\n  container?: string;\n  header?: string;\n  messages?: string;\n  input?: string;\n  button?: string;\n}\n\nexport interface LiveChatProps {\n  isOpen: boolean;\n  onClose: () => void;\n\n  // ui\n  title?: string;\n\n  // customization\n  theme?: LiveChatTheme;\n  classNames?: LiveChatClassNames;\n\n  // slots\n  renderMessage?: (message: ChatMessage) => React.ReactNode;\n  renderHeader?: () => React.ReactNode;\n  authority: string;\n  customerAuthority: string;\n}\n\nexport function LiveChat({\n  isOpen,\n  onClose,\n  title = \"Live Chat\",\n  theme,\n  classNames,\n  renderMessage,\n  renderHeader,\n  authority,\n  customerAuthority,\n}: LiveChatProps) {\n  const [inputValue, setInputValue] = useState(\"\");\n  const messagesEndRef = useRef<HTMLDivElement>(null);\n  const primary = theme?.primaryColor || \"#FF3D00\";\n  const background = theme?.background || \"var(--chat-bg)\";\n  const { sendMessage, onlineCount, messages } = useChat({\n    authority: authority || \"random\",\n    customerAuthority: customerAuthority,\n  });\n\n  const scrollToBottom = () => {\n    messagesEndRef.current?.scrollIntoView({ behavior: \"smooth\" });\n  };\n\n  useEffect(() => {\n    scrollToBottom();\n  }, [messages]);\n\n  const handleSendMessage = () => {\n    if (!inputValue.trim()) return;\n    setInputValue(\"\");\n    sendMessage(inputValue);\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent) => {\n    if (e.key === \"Enter\" && !e.shiftKey) {\n      e.preventDefault();\n      handleSendMessage();\n    }\n  };\n\n  if (!isOpen) return null;\n\n  return (\n    <>\n      <style>{`\n        :root {\n          --chat-bg: #ffffff;\n        }\n        .dark {\n          --chat-bg: #15181D;\n        }\n      `}</style>\n\n      {/* Desktop */}\n      <div\n        onClick={(e) => e.stopPropagation()}\n        className={cn(\n          \"fixed right-6 z-[110] hidden lg:flex flex-col overflow-hidden rounded-3xl shadow-2xl\",\n          classNames?.container,\n        )}\n        style={{\n          top: \"75px\",\n          width: \"340px\",\n          height: \"800px\",\n          maxHeight: \"calc(100vh - 90px)\",\n          background,\n        }}\n      >\n        {/* Header */}\n        {renderHeader ? (\n          renderHeader()\n        ) : (\n          <div\n            className={cn(\n              \"flex items-center justify-between px-6 py-4 border-b border-black/10 dark:border-white/10\",\n              classNames?.header,\n            )}\n          >\n            <div className=\"flex items-center gap-3\">\n              <h2 className=\"text-lg font-semibold text-triad-dark-100 dark:text-white\">\n                {title}\n              </h2>\n              <div className=\"flex items-center gap-1.5\">\n                <div className=\"size-2 rounded-full bg-green-500 animate-pulse\" />\n                <span className=\"text-xs text-black/50 dark:text-white/50\">\n                  {onlineCount} online\n                </span>\n              </div>\n            </div>\n            <button onClick={onClose}>\n              <X size={18} />\n            </button>\n          </div>\n        )}\n\n        {/* Messages */}\n        <div\n          className={cn(\n            \"flex-1 overflow-y-auto px-6 py-4 space-y-4\",\n            classNames?.messages,\n          )}\n        >\n          {messages.map((message, idx) =>\n            renderMessage ? (\n              renderMessage(message)\n            ) : (\n              <div\n                key={idx}\n                className={`flex flex-col gap-1 ${\n                  message.authority === authority ? \"items-end\" : \"items-start\"\n                }`}\n              >\n                {message.authority !== authority && (\n                  <span className=\"text-xs font-medium text-triad-dark-100 dark:text-white\">\n                    {message.name}\n                  </span>\n                )}\n\n                <div\n                  className={cn(\n                    \"max-w-[75%] rounded-2xl px-4 py-2.5\",\n                    message.authority === authority\n                      ? \"text-white rounded-br-sm\"\n                      : \"bg-black/5 dark:bg-white/5 text-triad-dark-100 dark:text-white rounded-bl-sm\",\n                  )}\n                  style={\n                    message.authority === authority\n                      ? { backgroundColor: primary }\n                      : undefined\n                  }\n                >\n                  <p className=\"text-sm break-words\">{message.message}</p>\n                </div>\n\n                <span className=\"text-[10px] opacity-50\">\n                  {format(message.timestamp, \"HH:mm\")}\n                </span>\n              </div>\n            ),\n          )}\n          <div ref={messagesEndRef} />\n        </div>\n\n        {/* Input */}\n        <div className=\"px-6 py-4 border-t border-black/10 dark:border-white/10\">\n          <div className=\"flex items-center gap-2\">\n            <input\n              value={inputValue}\n              onChange={(e) => setInputValue(e.target.value)}\n              onKeyDown={handleKeyDown}\n              placeholder=\"Digite sua mensagem...\"\n              className={cn(\n                \"flex-1 px-4 py-2.5 rounded-xl bg-black/5 dark:bg-white/5 dark:text-white text-sm outline-none\",\n                classNames?.input,\n              )}\n            />\n\n            <button\n              onClick={handleSendMessage}\n              disabled={!inputValue.trim()}\n              className={cn(\n                \"flex items-center justify-center size-10 rounded-xl transition-colors\",\n                classNames?.button,\n              )}\n              style={{\n                backgroundColor: inputValue.trim() ? primary : undefined,\n                opacity: inputValue.trim() ? 1 : 0.5,\n              }}\n            >\n              <Send size={18} className=\"dark:text-white text-app-gay-400\" />\n            </button>\n          </div>\n        </div>\n      </div>\n\n      {/* Mobile */}\n      <div className=\"fixed inset-0 z-[110] flex flex-col lg:hidden bg-white dark:bg-[#15181D]\">\n        {/* Reaproveita mesma estrutura */}\n        <div className=\"flex-1 flex flex-col\">\n          {/* Header */}\n          <div className=\"flex items-center justify-between px-4 py-4 border-b\">\n            <h2>{title}</h2>\n            <button onClick={onClose}>\n              <X />\n            </button>\n          </div>\n\n          {/* Messages */}\n          <div className=\"flex-1 overflow-y-auto px-4 py-4 space-y-4\">\n            {messages.map((m, idx) => (\n              <div key={idx}>{m.message}</div>\n            ))}\n            <div ref={messagesEndRef} />\n          </div>\n\n          {/* Input */}\n          <div className=\"p-4 border-t flex gap-2\">\n            <input\n              value={inputValue}\n              onChange={(e) => setInputValue(e.target.value)}\n              onKeyDown={handleKeyDown}\n              className=\"flex-1\"\n            />\n            <button\n              className={cn(classNames?.button)}\n              style={{\n                backgroundColor: inputValue.trim() ? primary : undefined,\n                opacity: inputValue.trim() ? 1 : 0.5,\n              }}\n              onClick={handleSendMessage}\n            >\n              <Send className=\"dark:text-white text-app-gay-400\" />\n            </button>\n          </div>\n        </div>\n      </div>\n    </>\n  );\n}\n"]}

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@triadxyz/widgets",
+  "version": "0.0.1",
+  "description": "Shared widgets and logic for Triad Next.js whitelabels",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": false,
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "lint": "eslint src"
+  },
+  "peerDependencies": {
+    "next": "^16.1.7",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4"
+  },
+  "dependencies": {
+    "clsx": "^2.1.1",
+    "date-fns": "^4.1.0",
+    "lucide-react": "^0.476.0",
+    "socket.io-client": "^4.8.3",
+    "tailwind-merge": "^3.5.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0"
+  }
+}

package/src/components/ButtonWidget.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import React from 'react';
+
+export interface ButtonWidgetProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  label: string;
+  variant?: 'primary' | 'secondary';
+}
+
+export const ButtonWidget: React.FC<ButtonWidgetProps> = ({ 
+  label, 
+  variant = 'primary', 
+  className = '',
+  ...props 
+}) => {
+  const baseStyles = 'px-4 py-2 rounded-lg font-medium transition-colors';
+  const variants = {
+    primary: 'bg-blue-600 text-white hover:bg-blue-700',
+    secondary: 'bg-gray-200 text-gray-800 hover:bg-gray-300'
+  };
+
+  return (
+    <button 
+      className={`${baseStyles} ${variants[variant]} ${className}`}
+      {...props}
+    >
+      {label}
+    </button>
+  );
+};

package/src/components/LiveChat.tsx

@@ -0,0 +1,260 @@
+"use client";
+
+import React, { useState, useRef, useEffect } from "react";
+import { X, Send } from "lucide-react";
+import { cn } from "@/utils/cn";
+import { useChat, ChatMessage } from "@/hooks/useChat";
+import { format } from "date-fns";
+
+export interface LiveChatTheme {
+  primaryColor?: string;
+  background?: string;
+  textColor?: string;
+}
+
+export interface LiveChatClassNames {
+  container?: string;
+  header?: string;
+  messages?: string;
+  input?: string;
+  button?: string;
+}
+
+export interface LiveChatProps {
+  isOpen: boolean;
+  onClose: () => void;
+
+  // ui
+  title?: string;
+
+  // customization
+  theme?: LiveChatTheme;
+  classNames?: LiveChatClassNames;
+
+  // slots
+  renderMessage?: (message: ChatMessage) => React.ReactNode;
+  renderHeader?: () => React.ReactNode;
+  authority: string;
+  customerAuthority: string;
+}
+
+export function LiveChat({
+  isOpen,
+  onClose,
+  title = "Live Chat",
+  theme,
+  classNames,
+  renderMessage,
+  renderHeader,
+  authority,
+  customerAuthority,
+}: LiveChatProps) {
+  const [inputValue, setInputValue] = useState("");
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+  const primary = theme?.primaryColor || "#FF3D00";
+  const background = theme?.background || "var(--chat-bg)";
+  const { sendMessage, onlineCount, messages } = useChat({
+    authority: authority || "random",
+    customerAuthority: customerAuthority,
+  });
+
+  const scrollToBottom = () => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  };
+
+  useEffect(() => {
+    scrollToBottom();
+  }, [messages]);
+
+  const handleSendMessage = () => {
+    if (!inputValue.trim()) return;
+    setInputValue("");
+    sendMessage(inputValue);
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleSendMessage();
+    }
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <>
+      <style>{`
+        :root {
+          --chat-bg: #ffffff;
+        }
+        .dark {
+          --chat-bg: #15181D;
+        }
+      `}</style>
+
+      {/* Desktop */}
+      <div
+        onClick={(e) => e.stopPropagation()}
+        className={cn(
+          "fixed right-6 z-[110] hidden lg:flex flex-col overflow-hidden rounded-3xl shadow-2xl",
+          classNames?.container,
+        )}
+        style={{
+          top: "75px",
+          width: "340px",
+          height: "800px",
+          maxHeight: "calc(100vh - 90px)",
+          background,
+        }}
+      >
+        {/* Header */}
+        {renderHeader ? (
+          renderHeader()
+        ) : (
+          <div
+            className={cn(
+              "flex items-center justify-between px-6 py-4 border-b border-black/10 dark:border-white/10",
+              classNames?.header,
+            )}
+          >
+            <div className="flex items-center gap-3">
+              <h2 className="text-lg font-semibold text-triad-dark-100 dark:text-white">
+                {title}
+              </h2>
+              <div className="flex items-center gap-1.5">
+                <div className="size-2 rounded-full bg-green-500 animate-pulse" />
+                <span className="text-xs text-black/50 dark:text-white/50">
+                  {onlineCount} online
+                </span>
+              </div>
+            </div>
+            <button onClick={onClose}>
+              <X size={18} />
+            </button>
+          </div>
+        )}
+
+        {/* Messages */}
+        <div
+          className={cn(
+            "flex-1 overflow-y-auto px-6 py-4 space-y-4",
+            classNames?.messages,
+          )}
+        >
+          {messages.map((message, idx) =>
+            renderMessage ? (
+              renderMessage(message)
+            ) : (
+              <div
+                key={idx}
+                className={`flex flex-col gap-1 ${
+                  message.authority === authority ? "items-end" : "items-start"
+                }`}
+              >
+                {message.authority !== authority && (
+                  <span className="text-xs font-medium text-triad-dark-100 dark:text-white">
+                    {message.name}
+                  </span>
+                )}
+
+                <div
+                  className={cn(
+                    "max-w-[75%] rounded-2xl px-4 py-2.5",
+                    message.authority === authority
+                      ? "text-white rounded-br-sm"
+                      : "bg-black/5 dark:bg-white/5 text-triad-dark-100 dark:text-white rounded-bl-sm",
+                  )}
+                  style={
+                    message.authority === authority
+                      ? { backgroundColor: primary }
+                      : undefined
+                  }
+                >
+                  <p className="text-sm break-words">{message.message}</p>
+                </div>
+
+                <span className="text-[10px] opacity-50">
+                  {format(message.timestamp, "HH:mm")}
+                </span>
+              </div>
+            ),
+          )}
+          <div ref={messagesEndRef} />
+        </div>
+
+        {/* Input */}
+        <div className="px-6 py-4 border-t border-black/10 dark:border-white/10">
+          <div className="flex items-center gap-2">
+            <input
+              value={inputValue}
+              onChange={(e) => setInputValue(e.target.value)}
+              onKeyDown={handleKeyDown}
+              placeholder="Digite sua mensagem..."
+              className={cn(
+                "flex-1 px-4 py-2.5 rounded-xl bg-black/5 dark:bg-white/5 dark:text-white text-sm outline-none",
+                classNames?.input,
+              )}
+            />
+
+            <button
+              onClick={handleSendMessage}
+              disabled={!inputValue.trim()}
+              className={cn(
+                "flex items-center justify-center size-10 rounded-xl transition-colors",
+                classNames?.button,
+              )}
+              style={{
+                backgroundColor: inputValue.trim() ? primary : undefined,
+                opacity: inputValue.trim() ? 1 : 0.5,
+              }}
+            >
+              <Send size={18} className="dark:text-white text-app-gay-400" />
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* Mobile */}
+      <div className="fixed inset-0 z-[110] flex flex-col lg:hidden bg-white dark:bg-[#15181D]">
+        {/* Reaproveita mesma estrutura */}
+        <div className="flex-1 flex flex-col">
+          {/* Header */}
+          <div className="flex items-center justify-between px-4 py-4 border-b">
+            <h2>{title}</h2>
+            <button onClick={onClose}>
+              <X />
+            </button>
+          </div>
+
+          {/* Messages */}
+          <div className="flex-1 overflow-y-auto px-4 py-4 space-y-4">
+            {messages.map((m, idx) => (
+              <div key={idx}>{m.message}</div>
+            ))}
+            <div ref={messagesEndRef} />
+          </div>
+
+          {/* Input */}
+          <div className="p-4 border-t flex gap-2">
+            <input
+              value={inputValue}
+              onChange={(e) => setInputValue(e.target.value)}
+              onKeyDown={handleKeyDown}
+              className="flex-1"
+            />
+            <button
+              className={cn(classNames?.button)}
+              style={{
+                backgroundColor: inputValue.trim() ? primary : undefined,
+                opacity: inputValue.trim() ? 1 : 0.5,
+              }}
+              onClick={handleSendMessage}
+            >
+              <Send className="dark:text-white text-app-gay-400" />
+            </button>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

package/src/hooks/useChat.ts

@@ -0,0 +1,75 @@
+import socket from "@/utils/socket";
+import { useEffect, useState } from "react";
+
+export interface ChatMessage {
+  authority: string;
+  name: string;
+  image: string;
+  predictionsCount: number;
+  message: string;
+  timestamp: number;
+}
+
+export function useChat({
+  authority,
+  customerAuthority,
+}: {
+  authority: string;
+  customerAuthority: string;
+}) {
+  const [messages, setMessages] = useState<ChatMessage[]>([]);
+  const [onlineCount, setOnlineCount] = useState(0);
+
+  useEffect(() => {
+    if (!authority || !customerAuthority) return;
+
+    if (!socket.connected) {
+      socket.connect();
+    }
+
+    socket.emit("chat:join", { authority, customerAuthority }, (res: any) => {
+      if (res.error) {
+        console.error("join error", res.error);
+      }
+    });
+
+    socket.off("chat:history");
+    socket.on("chat:history", (msgs) => {
+      setMessages((prev) => (prev.length ? prev : msgs));
+    });
+
+    socket.off("chat:message");
+    socket.on("chat:message", (msg) => {
+      setMessages((prev) => [...prev, msg]);
+    });
+
+    socket.off("chat:users");
+    socket.on("chat:users", (data) => {
+      setOnlineCount(data.count);
+    });
+
+    return () => {
+      socket.off("chat:history");
+      socket.off("chat:message");
+      socket.off("chat:users");
+    };
+  }, [authority, customerAuthority]);
+
+  const sendMessage = (message: string) => {
+    socket.emit(
+      "chat:message",
+      { authority, customerAuthority, message },
+      (res: any) => {
+        if (res.error) {
+          console.error("send error", res.error);
+        }
+      },
+    );
+  };
+
+  return {
+    messages,
+    onlineCount,
+    sendMessage,
+  };
+}

package/src/index.ts

@@ -0,0 +1,2 @@
+export * from "./components/ButtonWidget";
+export * from "./components/LiveChat";

package/src/utils/cn.ts

@@ -0,0 +1,7 @@
+import type { ClassValue } from "clsx";
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...classes: ClassValue[]) {
+  return twMerge(clsx(classes));
+}

package/src/utils/socket.ts

@@ -0,0 +1,13 @@
+import io from "socket.io-client";
+
+const socket = io("https://beta.triadfi.co", {
+  path: "/socket.io",
+  reconnection: true,
+  reconnectionAttempts: 5,
+  reconnectionDelay: 1000,
+  randomizationFactor: 0.5,
+  timeout: 5000,
+  transports: ["websocket"],
+});
+
+export default socket;

package/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "es2020",
+    "module": "esnext",
+    "jsx": "react-jsx",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "declaration": true,
+    "sourceMap": true,
+    "strict": true,
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}

package/tsup.config.ts

@@ -0,0 +1,13 @@
+import { defineConfig } from 'tsup';
+
+export default defineConfig({
+  entry: ['src/index.ts'],
+  format: ['cjs', 'esm'], // Build for commonJS and ESmodules
+  dts: true, // Generate declaration file (.d.ts)
+  splitting: false,
+  sourcemap: true,
+  clean: true,
+  treeshake: true,
+  external: ['react', 'react-dom', 'next'], // Never bundle Next/React
+  minify: true
+});