lulichat 1.0.1

package/src/index.css

@@ -0,0 +1,383 @@
+@import url("https://fonts.googleapis.com/css2?family=Inclusive+Sans:ital@0;1&family=Outfit:wght@100..900&display=swap");
+
+:root {
+  --background: 0 0% 100%;
+  --foreground: 222.2 84% 4.9%;
+
+  --card: 0 0% 100%;
+  --card-foreground: 222.2 84% 4.9%;
+
+  --popover: 0 0% 100%;
+  --popover-foreground: 222.2 84% 4.9%;
+
+  --primary-color: #755ae2;
+  --primary: 251.91deg 70.1% 61.96%;
+  --primary-foreground: 210 40% 98%;
+
+  --secondary: 210 40% 96.1%;
+  --secondary-foreground: 222.2 47.4% 11.2%;
+
+  --muted: 210 40% 96.1%;
+  --muted-foreground: 215.4 16.3% 46.9%;
+
+  --accent: 210 40% 96.1%;
+  --accent-foreground: 222.2 47.4% 11.2%;
+
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 210 40% 98%;
+
+  --border: 214.3 31.8% 91.4%;
+  --input: 214.3 31.8% 91.4%;
+  --ring: 222.2 84% 4.9%;
+
+  --radius: 0.5rem;
+}
+
+.dark {
+  --background: 222.2 84% 4.9%;
+  --foreground: 210 40% 98%;
+
+  --card: 222.2 84% 4.9%;
+  --card-foreground: 210 40% 98%;
+
+  --popover: 222.2 84% 4.9%;
+  --popover-foreground: 210 40% 98%;
+
+  --primary: 210 40% 98%;
+  --primary-foreground: 222.2 47.4% 11.2%;
+
+  --secondary: 217.2 32.6% 17.5%;
+  --secondary-foreground: 210 40% 98%;
+
+  --muted: 217.2 32.6% 17.5%;
+  --muted-foreground: 215 20.2% 65.1%;
+
+  --accent: 217.2 32.6% 17.5%;
+  --accent-foreground: 210 40% 98%;
+
+  --destructive: 0 62.8% 30.6%;
+  --destructive-foreground: 210 40% 98%;
+
+  --border: 217.2 32.6% 17.5%;
+  --input: 217.2 32.6% 17.5%;
+  --ring: 212.7 26.8% 83.9%;
+}
+
+.lulichat,
+.lulichat * {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  border: none;
+  outline: none;
+}
+
+.lulichat button {
+  appearance: none;
+  -webkit-appearance: none;
+  outline: none;
+}
+
+.lulichat {
+  position: fixed;
+  z-index: 50;
+  display: flex;
+  flex-direction: column;
+  row-gap: 10px;
+  font-family: "Outfit", sans-serif;
+  font-optical-sizing: auto;
+  font-weight: 300;
+  max-width: 400px;
+}
+
+.lulichat-main {
+  background-color: var(--background);
+  color: var(--foreground);
+  border-radius: 12px;
+  border: 4px solid hsl(var(--primary));
+  box-shadow: 4px 4px 20px 4px rgba(0, 0, 0, 0.1);
+  display: flex;
+  flex-direction: column;
+}
+
+.lulichat-bottom-right {
+  bottom: 1rem;
+  right: 1rem;
+}
+
+.lulichat-bottom-left {
+  bottom: 1rem;
+  left: 1rem;
+}
+
+.lulichat-top-right {
+  top: 1rem;
+  right: 1rem;
+}
+
+.lulichat-container-top-left {
+  top: 1rem;
+  left: 1rem;
+}
+
+/* This is Button Styles */
+.lulichat-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  white-space: nowrap;
+  font-size: 1rem;
+  font-weight: 500;
+  transition: background-color 0.2s, color 0.2s;
+  outline: none;
+  cursor: pointer;
+  /* ring-offset: 2px; */
+}
+
+.lulichat-btn.lulichat-contact-form-btn {
+  background-color: #fff;
+  color: hsl(var(--primary));
+}
+
+.lulichat-btn-group {
+  display: flex;
+  gap: 0.4rem;
+}
+
+.lulichat-btn:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+/* Btn Shape */
+.lulichat-btn-rounded {
+  border-radius: 1.5rem;
+}
+
+.lulichat-btn-none {
+  border-radius: 0rem;
+}
+
+.lulichat-btn-circle {
+  border-radius: 50%;
+}
+
+.lulichat-btn:focus-visible {
+  outline: 2px solid var(--ring);
+  outline-offset: 2px;
+}
+
+.lulichat-btn:disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+/* .lulichat-btn svg {
+  pointer-events: none;
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+} */
+
+/* Variants */
+
+.lulichat-btn-primary {
+  background-color: hsl(var(--primary));
+  color: #fff;
+}
+
+.lulichat-btn-primary:hover:not(:disabled) {
+  background-color: #000;
+}
+
+.lulichat-btn-default {
+  background: hsl(var(--primary));
+  color: hsl(var(--primary-foreground));
+}
+
+.lulichat-btn-default:hover {
+  background: rgba(var(--primary), 0.9);
+}
+
+.lulichat-btn-destructive {
+  background: hsl(var(--destructive));
+  color: hsl(var(--destructive-foreground));
+}
+
+.lulichat-btn-destructive:hover {
+  background: rgba(var(--destructive), 0.9);
+}
+
+.lulichat-btn-outline {
+  border: 1px solid hsl(var(--border));
+  background: hsl(var(--background));
+  color: inherit;
+}
+.lulichat-btn-outline:hover {
+  background: hsl(var(--accent));
+  color: hsl(var(--accent-foreground));
+}
+
+.lulichat-btn-secondary {
+  background: hsl(var(--secondary));
+  color: hsl(var(--secondary-foreground));
+}
+.lulichat-btn-secondary:hover {
+  background: hsl(var(--accent));
+}
+
+.lulichat-btn-ghost {
+}
+
+.lulichat-btn-ghost:hover {
+  background: hsl(var(--accent));
+  color: hsl(var(--accent-foreground));
+}
+
+.lulichat-btn-link {
+  color: hsl(var(--primary));
+  text-underline-offset: 4px;
+}
+.lulichat-btn-link:hover {
+  text-decoration: underline;
+}
+
+/* Sizes */
+.lulichat-btn-md {
+  height: 2.5rem;
+  padding: 0.5rem 1rem;
+}
+.lulichat-btn-sm {
+  height: 2.25rem;
+  padding: 0 0.75rem;
+}
+.lulichat-btn-lg {
+  height: 2.75rem;
+  padding: 0 2rem;
+}
+
+.lulichat-btn-icon {
+  height: 2.5rem;
+  width: 2.5rem;
+}
+
+/* End of Button Styles */
+
+/* Form Styles */
+
+.lulichat-contact-form {
+  background-color: hsl(var(--primary));
+  padding: 16px;
+  color: #fff;
+}
+
+.lulichat-form-group {
+  max-height: 0;
+  opacity: 0;
+  overflow: hidden;
+  transition: max-height 0.7s cubic-bezier(0.22, 1, 0.36, 1),
+    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.lulichat-form-group.open {
+  opacity: 1;
+  max-height: 500px; /* Set to a value larger than your content's height */
+}
+
+.lulichat-form-header {
+  margin-bottom: 1.5rem;
+}
+
+.lulichat-form-item {
+  margin-bottom: 1rem;
+  display: block;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.lulichat-form-label {
+  font-size: 1rem;
+  font-weight: 500;
+  display: block;
+  margin-bottom: 0.25rem;
+}
+
+.lulichat-form-item input,
+.lulichat-form-item textarea,
+.lulichat-input {
+  padding: 0.7rem 0.75rem;
+  border: 1px solid #d1d5db;
+  border-radius: 0.5rem;
+  font-size: 1rem;
+  width: 100%;
+  transition: border-color 0.2s;
+  transition: background-color 500ms;
+  background-color: #fff;
+  color: #222;
+}
+
+input:-internal-autofill-selected,
+textarea:-webkit-autofill {
+  appearance: none;
+  background-color: rgba(0, 0, 0, 0.2) !important;
+  color: fieldtext !important;
+}
+
+.lulichat-form-item input.transparent {
+  background-color: rgba(0, 0, 0, 0.2) !important;
+  color: #fff;
+}
+
+.lulichat-form-item input.error {
+  border-color: red;
+}
+
+.lulichat-form-item input.transparent:hover,
+.lulichat-form-item input.transparent:focus {
+  background-color: rgba(0, 0, 0, 0.4) !important;
+}
+
+.lulichat-form-item input.transparent::placeholder {
+  color: #fff;
+}
+
+.lulichat-form-item input:focus,
+.lulichat-form-item textarea:focus {
+  border-color: #ceced2;
+  outline: none;
+}
+
+.lulichat-form-item input:focus::placeholder,
+.lulichat-form-item textarea:focus::placeholder {
+  opacity: 0.5;
+}
+
+.lulichat-form-item input[aria-invalid="true"],
+.lulichat-form-item textarea[aria-invalid="true"] {
+  border-color: #ef4444;
+}
+
+.lulichat-form-item .error {
+  color: #fd8989;
+  font-size: 0.875rem;
+  margin-top: 0.25rem;
+  font-weight: 400;
+}
+
+.lulichat-tag {
+  /* border: 1px solid hsl(var(--primary)); */
+  padding: 5px 8px;
+  font-weight: 500;
+  border-radius: 24px;
+  font-size: 0.75rem;
+  text-transform: capitalize !important;
+  background-color: rgb(231, 230, 230);
+  cursor: pointer;
+  transition: background-color 400ms, color 200ms;
+}
+
+.lulichat-tag:hover {
+  background-color: var(--primary-color);
+  color: #fff;
+}

package/src/index.ts

@@ -0,0 +1,5 @@
+export { LuliChat } from "./components/LuliChat";
+export * from "./types";
+export { LuliChatAPI } from "./utils/api";
+export { ChatSocket } from "./lib/socket";
+import "./index.css";

package/src/lib/socket.ts

@@ -0,0 +1,96 @@
+import { ChatMessage } from "../types";
+
+export class ChatSocket {
+  private socket: WebSocket | null = null;
+  private token: string;
+  private sessionId: string;
+  private onMessageCallback?: (message: ChatMessage) => void;
+  private onStatusCallback?: (
+    status: "connected" | "disconnected" | "error"
+  ) => void;
+  private reconnectAttempts = 0;
+  private maxReconnectAttempts = 5;
+
+  constructor(
+    token: string,
+    sessionId: string,
+    baseUrl: string = "wss://ws.lulichat.com"
+  ) {
+    this.token = token;
+    this.sessionId = sessionId;
+    this.connect(baseUrl);
+  }
+
+  private connect(baseUrl: string) {
+    try {
+      this.socket = new WebSocket(
+        `${baseUrl}/chat?token=${this.token}&session=${this.sessionId}`
+      );
+
+      this.socket.onopen = () => {
+        console.log("Socket connected");
+        this.reconnectAttempts = 0;
+        this.onStatusCallback?.("connected");
+      };
+
+      this.socket.onmessage = (event) => {
+        try {
+          const message: ChatMessage = JSON.parse(event.data);
+          this.onMessageCallback?.(message);
+        } catch (error) {
+          console.error("Failed to parse message:", error);
+        }
+      };
+
+      this.socket.onclose = () => {
+        console.log("Socket disconnected");
+        this.onStatusCallback?.("disconnected");
+        this.handleReconnect(baseUrl);
+      };
+
+      this.socket.onerror = (error) => {
+        console.error("Socket error:", error);
+        this.onStatusCallback?.("error");
+      };
+    } catch (error) {
+      console.error("Failed to connect socket:", error);
+      this.onStatusCallback?.("error");
+    }
+  }
+
+  private handleReconnect(baseUrl: string) {
+    if (this.reconnectAttempts < this.maxReconnectAttempts) {
+      this.reconnectAttempts++;
+      setTimeout(() => {
+        console.log(`Reconnecting... attempt ${this.reconnectAttempts}`);
+        this.connect(baseUrl);
+      }, 2000 * this.reconnectAttempts);
+    }
+  }
+
+  sendMessage(content: string) {
+    if (this.socket?.readyState === WebSocket.OPEN) {
+      const message = {
+        type: "message",
+        content,
+        timestamp: new Date().toISOString(),
+      };
+      this.socket.send(JSON.stringify(message));
+    }
+  }
+
+  onMessage(callback: (message: ChatMessage) => void) {
+    this.onMessageCallback = callback;
+  }
+
+  onStatus(callback: (status: "connected" | "disconnected" | "error") => void) {
+    this.onStatusCallback = callback;
+  }
+
+  disconnect() {
+    if (this.socket) {
+      this.socket.close();
+      this.socket = null;
+    }
+  }
+}

package/src/main.tsx

@@ -0,0 +1,15 @@
+import { createRoot } from "react-dom/client";
+import "./index.css";
+import { LuliChat } from "./components/LuliChat";
+
+createRoot(document.getElementById("root")!).render(
+  <LuliChat
+    apiKey="LUa2pfSV9CPcyjDM6r3ca8m3Fv3TXxZU"
+    companyName="LuliChat Demo"
+    welcomeMessage="Welcome to LuliChat! How can we help you today?"
+    primaryColor="#4f46e5"
+    allowAnonymous={true}
+    requireContactInfo={true}
+    position="bottom-right"
+  />
+);

package/src/types/index.ts

@@ -0,0 +1,93 @@
+export interface LuliChatConfig {
+  apiKey: string;
+  baseUrl?: string;
+  position?: "bottom-right" | "bottom-left" | "top-right" | "top-left";
+  primaryColor?: string;
+  companyName?: string;
+  welcomeMessage?: string;
+  requireContactInfo?: boolean;
+  allowAnonymous?: boolean;
+}
+
+export interface ContactInfo {
+  name: string;
+  email: string;
+  phone?: string;
+  company?: string;
+}
+
+export interface ChatMessage {
+  id: string;
+  content: string;
+  timestamp: Date;
+  sender: "user" | "agent" | "system";
+  senderName?: string;
+}
+
+export interface ChatSession {
+  id: string;
+  token: string;
+  isActive: boolean;
+  agentInfo?: {
+    name: string;
+    avatar?: string;
+    status: "online" | "away" | "busy";
+  };
+}
+
+export interface CompanyInfo {
+  status: string;
+  success: boolean;
+  data: Data;
+}
+
+interface Data {
+  id: number;
+  name: string;
+  email: null;
+  website: null;
+  description: null;
+  settings: Settings;
+  plan: null;
+  queues: Queue[];
+}
+
+interface Queue {
+  id: number;
+  name: string;
+  color: string;
+  greetingMessage: string;
+  outOfHoursMessage: string;
+  schedules: Schedule[];
+  companyId: number;
+  orderQueue: null | number;
+  leadId: null | number;
+  mediaId: null;
+  createdAt: string;
+  updatedAt: string;
+}
+
+interface Schedule {
+  endTime: string;
+  startTime: string;
+  weekdayEn: string;
+  weekday?: string;
+}
+
+interface Settings {
+  id: number;
+  chatBotType: string;
+  sendGreetingAccepted: string;
+  sendMsgTransfTicket: string;
+  sendGreetingMessageOneQueues: string;
+  userRating: string;
+  scheduleType: string;
+  CheckMsgIsGroup: string;
+  call: string;
+  companyId: number;
+  type: string;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export type ChatState = "closed" | "contact-form" | "chat" | "loading";

package/src/utils/api.ts

@@ -0,0 +1,59 @@
+import { LuliChatConfig, ContactInfo, CompanyInfo } from "../types";
+
+export class LuliChatAPI {
+  private config: LuliChatConfig;
+  private baseUrl: string;
+
+  constructor(config: LuliChatConfig) {
+    this.config = config;
+    this.baseUrl = config.baseUrl || "http://localhost:8000";
+  }
+
+  async getCompanyInfo(): Promise<CompanyInfo> {
+    try {
+      const response = await fetch(`${this.baseUrl}/companies/e/info`, {
+        headers: {
+          Authorization: `Bearer ${this.config.apiKey}`,
+          "Content-Type": "application/json",
+        },
+      });
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+
+      return await response.json();
+    } catch (error) {
+      console.error("Failed to fetch company info:", error);
+      throw error;
+    }
+  }
+
+  async submitContactInfo(
+    contactInfo?: ContactInfo
+  ): Promise<{ token: string; sessionId: string }> {
+    try {
+      const response = await fetch(`${this.baseUrl}/companies/e/chat/init`, {
+        method: "POST",
+        headers: {
+          Authorization: `Bearer ${this.config.apiKey}`,
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(contactInfo || {}),
+      });
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+
+      return await response.json();
+    } catch (error) {
+      console.error("Failed to submit contact info:", error);
+      throw error;
+    }
+  }
+
+  async startAnonymousChat(): Promise<{ token: string; sessionId: string }> {
+    return this.submitContactInfo();
+  }
+}

package/src/utils/index.ts

@@ -0,0 +1,5 @@
+import { clsx, type ClassValue } from "clsx";
+
+export function cn(...inputs: ClassValue[]) {
+  return clsx(inputs);
+}

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />