lulichat 1.0.2 → 1.0.4

package/dist/style.css

@@ -1 +0,0 @@
-@import"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: .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{-moz-appearance:none;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 #0000001a;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}.lulichat-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;white-space:nowrap;font-size:1rem;font-weight:500;transition:background-color .2s,color .2s;outline:none;cursor:pointer}.lulichat-btn.lulichat-contact-form-btn{background-color:#fff;color:hsl(var(--primary))}.lulichat-btn-group{display:flex;gap:.4rem}.lulichat-btn:disabled{cursor:not-allowed;opacity:.5}.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:.5}.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),.9)}.lulichat-btn-destructive{background:hsl(var(--destructive));color:hsl(var(--destructive-foreground))}.lulichat-btn-destructive:hover{background:rgba(var(--destructive),.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: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}.lulichat-btn-md{height:2.5rem;padding:.5rem 1rem}.lulichat-btn-sm{height:2.25rem;padding:0 .75rem}.lulichat-btn-lg{height:2.75rem;padding:0 2rem}.lulichat-btn-icon{height:2.5rem;width:2.5rem}.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 .7s cubic-bezier(.22,1,.36,1),opacity .7s cubic-bezier(.22,1,.36,1)}.lulichat-form-group.open{opacity:1;max-height:500px}.lulichat-form-header{margin-bottom:1.5rem}.lulichat-form-item{margin-bottom:1rem;display:block;flex-direction:column;gap:.5rem}.lulichat-form-label{font-size:1rem;font-weight:500;display:block;margin-bottom:.25rem}.lulichat-form-item input,.lulichat-form-item textarea,.lulichat-input{padding:.7rem .75rem;border:1px solid #d1d5db;border-radius:.5rem;font-size:1rem;width:100%;transition:border-color .2s;transition:background-color .5s;background-color:#fff;color:#222}input:-internal-autofill-selected,textarea:-webkit-autofill{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#0003!important;color:fieldtext!important}.lulichat-form-item input.transparent{background-color:#0003!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:#0006!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:.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:.875rem;margin-top:.25rem;font-weight:400}.lulichat-tag{padding:5px 8px;font-weight:500;border-radius:24px;font-size:.75rem;text-transform:capitalize!important;background-color:#e7e6e6;cursor:pointer;transition:background-color .4s,color .2s}.lulichat-tag:hover{background-color:var(--primary-color);color:#fff}

package/src/components/ChatIcon.tsx

@@ -1,27 +0,0 @@
-import React from 'react';
-
-const ChatIcon: React.FC<{ onClick: () => void }> = ({ onClick }) => {
-  return (
-    <div
-      onClick={onClick}
-      style={{
-        position: 'fixed',
-        bottom: '20px',
-        right: '20px',
-        cursor: 'pointer',
-        backgroundColor: '#007bff',
-        borderRadius: '50%',
-        padding: '10px',
-        boxShadow: '0 2px 10px rgba(0, 0, 0, 0.2)',
-      }}
-    >
-      <img
-        src="/path/to/chat-icon.svg"
-        alt="Chat"
-        style={{ width: '30px', height: '30px' }}
-      />
-    </div>
-  );
-};
-
-export default ChatIcon;

package/src/components/ChatInterface.tsx

@@ -1,211 +0,0 @@
-import React, { useState, useRef, useEffect } from "react";
-
-import { ChatMessage, ChatSession, CompanyInfo } from "../types";
-import { ChatSocket } from "../lib/socket";
-import { Headphones, Send, User } from "./ui/Icons";
-import Button from "./ui/Button";
-
-interface ChatInterfaceProps {
-  session: ChatSession;
-  companyInfo: CompanyInfo["data"];
-  onClose: () => void;
-}
-
-export const ChatInterface: React.FC<ChatInterfaceProps> = ({
-  session,
-  companyInfo,
-  onClose,
-}) => {
-  const [messages, setMessages] = useState<ChatMessage[]>([]);
-  const [newMessage, setNewMessage] = useState("");
-  const [isTyping, setIsTyping] = useState(false);
-  const [connectionStatus, setConnectionStatus] = useState<
-    "connected" | "disconnected" | "error"
-  >("disconnected");
-  const messagesEndRef = useRef<HTMLDivElement>(null);
-  const socketRef = useRef<ChatSocket | null>(null);
-
-  useEffect(() => {
-    // Initialize socket connection
-    socketRef.current = new ChatSocket(session.token, session.id);
-
-    socketRef.current.onMessage((message) => {
-      setMessages((prev) => [...prev, message]);
-      setIsTyping(false);
-    });
-
-    socketRef.current.onStatus((status) => {
-      setConnectionStatus(status);
-    });
-
-    // Add welcome message
-    const welcomeMessage: ChatMessage = {
-      id: "welcome",
-      content: "",
-      timestamp: new Date(),
-      sender: "system",
-    };
-    setMessages([welcomeMessage]);
-
-    return () => {
-      socketRef.current?.disconnect();
-    };
-  }, [session, companyInfo]);
-
-  useEffect(() => {
-    scrollToBottom();
-  }, [messages]);
-
-  const scrollToBottom = () => {
-    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
-  };
-
-  const handleSendMessage = () => {
-    if (!newMessage.trim() || connectionStatus !== "connected") return;
-
-    const userMessage: ChatMessage = {
-      id: Date.now().toString(),
-      content: newMessage,
-      timestamp: new Date(),
-      sender: "user",
-    };
-
-    setMessages((prev) => [...prev, userMessage]);
-    socketRef.current?.sendMessage(newMessage);
-    setNewMessage("");
-    setIsTyping(true);
-  };
-
-  const handleKeyPress = (e: React.KeyboardEvent) => {
-    if (e.key === "Enter" && !e.shiftKey) {
-      e.preventDefault();
-      handleSendMessage();
-    }
-  };
-
-  const formatTime = (date: Date) => {
-    return new Intl.DateTimeFormat("en-US", {
-      hour: "2-digit",
-      minute: "2-digit",
-    }).format(date);
-  };
-
-  const getMessageIcon = (sender: ChatMessage["sender"]) => {
-    switch (sender) {
-      case "agent":
-        return <Headphones className="w-4 h-4" />;
-      case "user":
-        return <User className="w-4 h-4" />;
-      default:
-        return null;
-    }
-  };
-
-  return (
-    <div className="flex flex-col h-full">
-      {/* Header */}
-      <div className="bg-primary text-primary-foreground p-4 rounded-t-lg">
-        <div className="flex items-center justify-between">
-          <div className="flex items-center space-x-2">
-            <div className="w-2 h-2 rounded-full bg-green-400"></div>
-            <span className="font-medium">{companyInfo.name}</span>
-          </div>
-          <Button
-            variant="ghost"
-            size="sm"
-            onClick={onClose}
-            className="text-primary-foreground hover:bg-primary-foreground/20"
-          >
-            ×
-          </Button>
-        </div>
-        <div className="text-xs opacity-80 mt-1">
-          {connectionStatus === "connected" ? "Online" : "Connecting..."}
-        </div>
-      </div>
-
-      {/* Messages */}
-      <div className="flex-1 overflow-y-auto p-4 space-y-4 bg-background">
-        {messages.map((message) => (
-          <div
-            key={message.id}
-            className={`flex ${
-              message.sender === "user" ? "justify-end" : "justify-start"
-            }`}
-          >
-            <div
-              className={`max-w-xs lg:max-w-md px-4 py-2 rounded-lg ${
-                message.sender === "user"
-                  ? "bg-primary text-primary-foreground"
-                  : message.sender === "system"
-                  ? "bg-muted text-muted-foreground text-center"
-                  : "bg-muted text-foreground"
-              }`}
-            >
-              {message.sender !== "system" && (
-                <div className="flex items-center space-x-1 mb-1">
-                  {getMessageIcon(message.sender)}
-                  <span className="text-xs opacity-70">
-                    {message.senderName ||
-                      (message.sender === "user" ? "You" : "Support")}
-                  </span>
-                </div>
-              )}
-              <p className="text-sm">{message.content}</p>
-              <p className="text-xs opacity-60 mt-1">
-                {formatTime(message.timestamp)}
-              </p>
-            </div>
-          </div>
-        ))}
-
-        {isTyping && (
-          <div className="flex justify-start">
-            <div className="bg-muted text-foreground px-4 py-2 rounded-lg">
-              <div className="flex space-x-1">
-                <div className="w-2 h-2 bg-current rounded-full animate-bounce"></div>
-                <div
-                  className="w-2 h-2 bg-current rounded-full animate-bounce"
-                  style={{ animationDelay: "0.1s" }}
-                ></div>
-                <div
-                  className="w-2 h-2 bg-current rounded-full animate-bounce"
-                  style={{ animationDelay: "0.2s" }}
-                ></div>
-              </div>
-            </div>
-          </div>
-        )}
-        <div ref={messagesEndRef} />
-      </div>
-
-      {/* Input */}
-      <div className="p-4 border-t bg-background">
-        <div className="flex space-x-2">
-          <input
-            value={newMessage}
-            onChange={(e) => setNewMessage(e.target.value)}
-            onKeyPress={handleKeyPress}
-            placeholder="Type your message..."
-            disabled={connectionStatus !== "connected"}
-            className="flex-1"
-          />
-          <Button
-            onClick={handleSendMessage}
-            disabled={!newMessage.trim() || connectionStatus !== "connected"}
-            size="icon"
-          >
-            <Send className="w-4 h-4" />
-          </Button>
-        </div>
-        {connectionStatus !== "connected" && (
-          <p className="text-xs text-muted-foreground mt-2">
-            {connectionStatus === "error"
-              ? "Connection error. Retrying..."
-              : "Connecting..."}
-          </p>
-        )}
-      </div>
-    </div>
-  );
-};

package/src/components/ChatWidget.tsx

@@ -1,198 +0,0 @@
-import React, { useState, useEffect } from "react";
-import {
-  LuliChatConfig,
-  ChatState,
-  ContactInfo,
-  CompanyInfo,
-  ChatSession,
-} from "../types";
-import { LuliChatAPI } from "@/utils/api";
-import { ContactForm } from "./ContactForm";
-import { ChatInterface } from "./ChatInterface";
-import { Loader, MessageCircle } from "./ui/Icons";
-import Button from "./ui/Button";
-import Input from "./ui/Input";
-import { Attachment, Send } from "./ui/Icons";
-
-interface ChatWidgetProps {
-  config: LuliChatConfig;
-}
-
-export const ChatWidget: React.FC<ChatWidgetProps> = ({ config }) => {
-  const [chatState, setChatState] = useState<ChatState>("contact-form");
-  const [companyInfo, setCompanyInfo] = useState<CompanyInfo["data"] | null>(
-    null
-  );
-  const [chatSession, setChatSession] = useState<ChatSession | null>(null);
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [open, setOpen] = React.useState(false);
-
-  const api = new LuliChatAPI(config);
-
-  useEffect(() => {
-    loadCompanyInfo();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [config]);
-
-  const loadCompanyInfo = async () => {
-    try {
-      const info = await api.getCompanyInfo();
-      setCompanyInfo(info.data);
-    } catch (err) {
-      setError("Failed to load chat configuration");
-      console.error("Failed to load company info:", err);
-    }
-  };
-
-  const handleContactSubmit = async (contactInfo: ContactInfo) => {
-    setIsLoading(true);
-    try {
-      const response = await api.submitContactInfo(contactInfo);
-      const session: ChatSession = {
-        id: response.sessionId,
-        token: response.token,
-        isActive: true,
-      };
-      setChatSession(session);
-      setChatState("chat");
-    } catch (err) {
-      setError("Failed to start chat. Please try again.");
-      console.error("Failed to submit contact info:", err);
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const startAnonymousChat = async () => {
-    setIsLoading(true);
-    try {
-      const response = await api.startAnonymousChat();
-      const session: ChatSession = {
-        id: response.sessionId,
-        token: response.token,
-        isActive: true,
-      };
-      setChatSession(session);
-      setChatState("chat");
-    } catch (err) {
-      setError("Failed to start chat. Please try again.");
-      console.error("Failed to start anonymous chat:", err);
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const handleCloseChat = () => {
-    setChatState("closed");
-    setChatSession(null);
-    setError(null);
-  };
-
-  console.log({ companyInfo });
-
-  return (
-    <div className={`lulichat lulichat-${config.position}`}>
-      {open && (
-        <div className="lulichat-main">
-          {error && (
-            <div className="p-4 bg-destructive/10 border-b">
-              <p className="text-sm text-destructive">{error}</p>
-              <button onClick={() => setError(null)} className="mt-2">
-                Retry
-              </button>
-            </div>
-          )}
-
-          <ContactForm
-            companyName={companyInfo?.name!}
-            onSubmit={handleContactSubmit}
-            onSkip={config.allowAnonymous ? startAnonymousChat : undefined}
-            allowAnonymous={config.allowAnonymous || false}
-            isLoading={isLoading}
-          />
-
-          <div style={{ padding: 16 }}>
-            <div
-              style={{
-                display: "flex",
-                gap: 10,
-                flexWrap: "wrap",
-              }}
-            >
-              {companyInfo?.queues.map((queue) => {
-                return (
-                  <div className="lulichat-tag" key={queue.id}>
-                    {queue.name?.toLocaleLowerCase()}
-                  </div>
-                );
-              })}
-            </div>
-
-            <div
-              style={{
-                height: 2,
-                backgroundColor: "hsl(var(--border))",
-                marginBlock: 16,
-              }}
-            />
-
-            <div
-              style={{
-                display: "flex",
-                alignItems: "center",
-                columnGap: 10,
-              }}
-              className="form-control"
-            >
-              <Input
-                name="message"
-                autoComplete="off"
-                style={{ border: "none", paddingInline: 0 }}
-                placeholder="What can we help you with ?."
-              />
-              <div className="lulichat-btn-group">
-                <Button style={{ color: "#00000080" }} size="icon">
-                  <Attachment height={24} />
-                </Button>
-                <Button style={{ color: "#00000080" }} size="icon">
-                  <Send />
-                </Button>
-              </div>
-            </div>
-          </div>
-
-          {chatState === "chat" && chatSession && companyInfo && (
-            <ChatInterface
-              session={chatSession}
-              companyInfo={companyInfo}
-              onClose={handleCloseChat}
-            />
-          )}
-        </div>
-      )}
-
-      <Button
-        onClick={() => setOpen(!open)}
-        className=""
-        shape="circle"
-        size="icon"
-        style={{
-          backgroundColor: config.primaryColor,
-          height: "4rem",
-          width: "4rem",
-          padding: 0,
-          color: "#fff",
-          alignSelf: "end",
-        }}
-        disabled={!companyInfo && !error}
-      >
-        {!companyInfo && !error ? (
-          <Loader />
-        ) : (
-          <MessageCircle height={40} width={40} />
-        )}
-      </Button>
-    </div>
-  );
-};

package/src/components/ContactForm.tsx

@@ -1,155 +0,0 @@
-import { ContactInfo } from "@/types";
-import React, { useState } from "react";
-import Input from "./ui/Input";
-import Form from "./ui/Form";
-import { DropdownArrow, Hello, Loader } from "./ui/Icons";
-import Button from "./ui/Button";
-
-interface ContactFormProps {
-  companyName: string;
-  onSubmit: (contactInfo: ContactInfo) => void;
-  onSkip?: () => void;
-  allowAnonymous: boolean;
-  isLoading: boolean;
-}
-
-export const ContactForm: React.FC<ContactFormProps> = ({
-  companyName,
-  onSubmit,
-  onSkip,
-  allowAnonymous,
-  isLoading,
-}) => {
-  const [open, setOpen] = React.useState(false);
-  const [formData, setFormData] = useState<ContactInfo>({
-    name: "",
-    email: "",
-    phone: "",
-    company: "",
-  });
-
-  const [errors, setErrors] = useState<Partial<ContactInfo>>({});
-  const [values, setValues] = React.useState<Record<string, string>>({
-    email: "",
-    name: "",
-  });
-
-  const validateForm = () => {
-    const newErrors: Partial<ContactInfo> = {};
-
-    if (!formData.name.trim()) {
-      newErrors.name = "Name is required";
-    }
-
-    if (!formData.email.trim()) {
-      newErrors.email = "Email is required";
-    } else if (!/\S+@\S+\.\S+/.test(formData.email)) {
-      newErrors.email = "Email is invalid";
-    }
-
-    setErrors(newErrors);
-    return Object.keys(newErrors).length === 0;
-  };
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    if (validateForm()) {
-      onSubmit(formData);
-    }
-  };
-
-  const handleInputChange = (field: keyof ContactInfo, value: string) => {
-    setFormData((prev) => ({ ...prev, [field]: value }));
-    if (errors[field]) {
-      setErrors((prev) => ({ ...prev, [field]: undefined }));
-    }
-  };
-
-  return (
-    <Form
-      autoComplete="off"
-      onSubmit={handleSubmit}
-      onValuesChange={setValues}
-      className="lulichat-contact-form"
-    >
-      <div className="lulichat-form-header">
-        <div
-          style={{
-            marginBottom: "20px",
-            display: "flex",
-            alignItems: "end",
-            columnGap: 8,
-          }}
-        >
-          <Hello
-            style={{ display: "block" }}
-            color="#DEDEDE6A"
-            height={40}
-            width={50}
-          />
-          <h3 style={{ fontWeight: 500 }}>Hello,</h3>
-        </div>
-        <h3 style={{ marginBottom: 8 }} className="lulichat-title">
-          Welcome to {companyName} Live Chat
-        </h3>
-        <p
-          role="button"
-          onClickCapture={() => setOpen(!open)}
-          style={{
-            textDecoration: "underline",
-            lineHeight: "1rem",
-            cursor: "pointer",
-          }}
-        >
-          Please provide your details for a better support experience{" "}
-          <DropdownArrow
-            style={{
-              display: "inline-block",
-              marginBottom: -2,
-            }}
-            height={20}
-            width={20}
-          />
-        </p>
-      </div>
-      <div className={`lulichat-form-group${open ? " open" : ""}`}>
-        <Form.Item error={errors.name} label="Name (Optional)" name="name">
-          <Input
-            id="name"
-            placeholder="Enter your name"
-            type="text"
-            value={formData.name}
-            onChange={(e) => handleInputChange("name", e.target.value)}
-            className={"transparent" + (errors.name ? " error" : "")}
-          />
-        </Form.Item>
-
-        <Form.Item name="email" error={errors.email} label="Email">
-          <Input
-            id="email"
-            type="email"
-            placeholder="Enter your valid email"
-            value={formData.email}
-            onChange={(e) => handleInputChange("email", e.target.value)}
-            className={"transparent" + (errors.name ? " error" : "")}
-          />
-        </Form.Item>
-        <Button
-          type="submit"
-          disabled={isLoading || !values.email}
-          style={{ width: "100%", marginTop: 10 }}
-          className="lulichat-contact-form-btn"
-        >
-          {isLoading ? (
-            <>
-              <Loader />
-              Submitting...
-            </>
-          ) : (
-            "Submit"
-          )}
-        </Button>
-      </div>
-    </Form>
-  );
-};

package/src/components/LuliChat.tsx

@@ -1,48 +0,0 @@
-import React from "react";
-import { ChatWidget } from "./ChatWidget";
-import { LuliChatConfig } from "../types";
-
-interface LuliChatProps {
-  apiKey: string;
-  baseUrl?: string;
-  position?: "bottom-right" | "bottom-left" | "top-right" | "top-left";
-  primaryColor?: string;
-  companyName?: string;
-  welcomeMessage?: string;
-  requireContactInfo?: boolean;
-  allowAnonymous?: boolean;
-}
-
-export const LuliChat: React.FC<LuliChatProps> = ({
-  apiKey,
-  baseUrl,
-  position = "bottom-right",
-  primaryColor = "#007bff",
-  companyName = "Support",
-  welcomeMessage = "Hello! How can we help you today?",
-  requireContactInfo = true,
-  allowAnonymous = true,
-}) => {
-  const config: LuliChatConfig = {
-    apiKey,
-    baseUrl,
-    position,
-    primaryColor,
-    companyName,
-    welcomeMessage,
-    requireContactInfo,
-    allowAnonymous,
-  };
-
-  if (!apiKey) {
-    console.error("LuliChat: API key is required");
-    return null;
-  }
-
-  return <ChatWidget config={config} />;
-};
-
-// Export all types and components for external use
-export * from "../types";
-export { LuliChatAPI } from "../utils/api";
-export { ChatSocket } from "../lib/socket";

package/src/components/ui/Button.tsx

@@ -1,44 +0,0 @@
-import React from "react";
-import clsx from "clsx";
-
-interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?:
-    | "primary"
-    | "destructive"
-    | "outline"
-    | "secondary"
-    | "ghost"
-    | "link";
-  size?: "md" | "sm" | "lg" | "icon";
-  shape?: "circle" | "rounded" | "none";
-}
-
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  (
-    {
-      className,
-      variant = "outline",
-      size = "md",
-      shape = "rounded",
-      ...props
-    },
-    ref
-  ) => {
-    return (
-      <button
-        className={clsx(
-          "lulichat-btn",
-          `lulichat-btn-${variant}`,
-          `lulichat-btn-${size}`,
-          `lulichat-btn-${shape}`,
-          className
-        )}
-        ref={ref}
-        {...props}
-      />
-    );
-  }
-);
-Button.displayName = "Button";
-
-export default Button;