@triadxyz/widgets 0.0.1 → 0.0.2

package/.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@triadxyz/widgets",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "Shared widgets and logic for Triad Next.js whitelabels",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

package/src/components/LiveChat.tsx

@@ -34,8 +34,13 @@ export interface LiveChatProps {
   // slots
   renderMessage?: (message: ChatMessage) => React.ReactNode;
   renderHeader?: () => React.ReactNode;
-  authority: string;
+  authority: string | null;
   customerAuthority: string;
+  onConnectWallet?: () => void;
+  fallbackMessages?: {
+    connectWallet: string;
+    description: string;
+  };
 }
 
 export function LiveChat({
@@ -48,13 +53,16 @@ export function LiveChat({
   renderHeader,
   authority,
   customerAuthority,
+  fallbackMessages,
+  onConnectWallet,
 }: 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",
+    authority: authority || undefined,
     customerAuthority: customerAuthority,
   });
 
@@ -102,7 +110,7 @@ export function LiveChat({
         style={{
           top: "75px",
           width: "340px",
-          height: "800px",
+          height: !authority ? "auto" : "800px",
           maxHeight: "calc(100vh - 90px)",
           background,
         }}
@@ -123,94 +131,133 @@ export function LiveChat({
               </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">
+                <span className="text-xs text-app-gray-400 dark:text-app-gray-100">
                   {onlineCount} online
                 </span>
               </div>
             </div>
             <button onClick={onClose}>
-              <X size={18} />
+              <X className="dark:text-white text-black" 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>
-                )}
-
+        {authority && (
+          <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
-                  className={cn(
-                    "max-w-[75%] rounded-2xl px-4 py-2.5",
+                  key={idx}
+                  className={`flex flex-col gap-1 ${
                     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
-                  }
+                      ? "items-end"
+                      : "items-start"
+                  }`}
                 >
-                  <p className="text-sm break-words">{message.message}</p>
+                  {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">
+          {!authority ? (
+            <div className="flex flex-col items-center justify-center gap-3 py-4 px-3 text-center">
+              {/* Icon */}
+              <div
+                className="flex items-center justify-center size-12 rounded-2xl"
+                style={{
+                  background: `${primary}15`,
+                }}
+              >
+                <span className="text-xl">💬</span>
+              </div>
 
-                <span className="text-[10px] opacity-50">
-                  {format(message.timestamp, "HH:mm")}
+              {/* Text */}
+              <div className="flex flex-col gap-1">
+                <span className="text-sm font-semibold text-black dark:text-white">
+                  {fallbackMessages?.connectWallet || "Entre no chat"}
+                </span>
+                <span className="text-xs text-black/60 dark:text-white max-w-[220px]">
+                  {fallbackMessages?.description ||
+                    "Conecte sua carteira para participar das conversas em tempo real"}
                 </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 */}
+              {onConnectWallet && (
+                <button
+                  onClick={onConnectWallet}
+                  style={{ backgroundColor: primary }}
+                  className="mt-2 w-full max-w-[220px] px-4 py-2.5 text-white text-sm font-semibold rounded-xl transition-all hover:opacity-90 active:scale-95 shadow-sm"
+                >
+                  Conectar Carteira
+                </button>
               )}
-            />
+            </div>
+          ) : (
+            <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>
+              <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>
 
@@ -235,23 +282,50 @@ export function LiveChat({
           </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 className="p-4 border-t flex flex-col gap-2">
+            {!authority ? (
+              <div className="flex-1 flex flex-col items-center justify-center gap-2 py-2">
+                <span className="text-sm font-medium text-black/60 dark:text-white/60 text-center">
+                  {fallbackMessages?.description ||
+                    "Faça login para participar do chat"}
+                </span>
+                {onConnectWallet && (
+                  <button
+                    onClick={onConnectWallet}
+                    style={{ backgroundColor: primary }}
+                    className="px-4 py-2 text-white text-sm font-semibold rounded-xl transition-opacity hover:opacity-90 active:scale-95"
+                  >
+                    {fallbackMessages?.connectWallet || "Fazer Login"}
+                  </button>
+                )}
+              </div>
+            ) : (
+              <div className="flex gap-2 w-full">
+                <input
+                  value={inputValue}
+                  onChange={(e) => setInputValue(e.target.value)}
+                  onKeyDown={handleKeyDown}
+                  className="flex-1 bg-black/5 dark:bg-white/5 dark:text-white px-4 py-2.5 rounded-xl text-sm outline-none"
+                  placeholder="Digite sua mensagem..."
+                />
+                <button
+                  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,
+                  }}
+                  onClick={handleSendMessage}
+                >
+                  <Send
+                    className="dark:text-white text-app-gay-400"
+                    size={18}
+                  />
+                </button>
+              </div>
+            )}
           </div>
         </div>
       </div>

package/src/hooks/useChat.ts

@@ -2,7 +2,7 @@ import socket from "@/utils/socket";
 import { useEffect, useState } from "react";
 
 export interface ChatMessage {
-  authority: string;
+  authority?: string;
   name: string;
   image: string;
   predictionsCount: number;
@@ -14,7 +14,7 @@ export function useChat({
   authority,
   customerAuthority,
 }: {
-  authority: string;
+  authority?: string;
   customerAuthority: string;
 }) {
   const [messages, setMessages] = useState<ChatMessage[]>([]);