lulichat 1.0.2 → 1.0.4

package/src/hooks/useSocket.ts

@@ -1,45 +0,0 @@
-import { useEffect, useRef } from 'react';
-
-const useSocket = (url: string) => {
-  const socketRef = useRef<WebSocket | null>(null);
-
-  const connect = () => {
-    socketRef.current = new WebSocket(url);
-
-    socketRef.current.onopen = () => {
-      console.log('WebSocket connected');
-    };
-
-    socketRef.current.onclose = () => {
-      console.log('WebSocket disconnected');
-    };
-
-    socketRef.current.onerror = (error) => {
-      console.error('WebSocket error:', error);
-    };
-  };
-
-  const disconnect = () => {
-    if (socketRef.current) {
-      socketRef.current.close();
-    }
-  };
-
-  const sendMessage = (message: string) => {
-    if (socketRef.current && socketRef.current.readyState === WebSocket.OPEN) {
-      socketRef.current.send(message);
-    }
-  };
-
-  useEffect(() => {
-    connect();
-
-    return () => {
-      disconnect();
-    };
-  }, [url]);
-
-  return { sendMessage };
-};
-
-export default useSocket;

package/src/index.css

@@ -1,383 +0,0 @@
-@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

@@ -1,5 +0,0 @@
-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

@@ -1,96 +0,0 @@
-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

@@ -1,15 +0,0 @@
-import { createRoot } from "react-dom/client";
-import "./index.css";
-import LuliChat from "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

@@ -1,93 +0,0 @@
-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

@@ -1,59 +0,0 @@
-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

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

package/src/vite-env.d.ts

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