feat: styling improvements

Author: bacalj

README.md

@@ -30,7 +30,7 @@ function MyApp() {
 
       <QABot
         isLoggedIn={isLoggedIn}
-        initiallyOpen={isOpen}
+        defaultOpen={isOpen}
         onClose={() => setIsOpen(false)}
         welcome="Welcome to the ACCESS Q&A Bot!"
         prompt="How can I help you today?"
@@ -52,7 +52,7 @@ function MyApp() {
   welcome="Welcome to the Q&A Bot!"
   prompt="Ask me anything about ACCESS..."
   is-logged-in
-  is-open>
+  default-open>
 </access-qa-bot>
 ```
 
@@ -89,7 +89,7 @@ function MyApp() {
         prompt: "Ask a question about ACCESS...",
         isLoggedIn: true,
         embedded: true,
-        isOpen: true
+        defaultOpen: true
       });
     }
   });
@@ -121,7 +121,7 @@ Replace `v0.2.0` with the specific version you want to use. This method provides
 | isLoggedIn / is-logged-in | boolean | Whether the user is logged in |
 | isAnonymous / is-anonymous | boolean | Whether the user is anonymous |
 | disabled | boolean | Disable the chat input |
-| initiallyOpen / initially-open | boolean | Whether the chat is initially open |
+| defaultOpen / default-open | boolean | Whether the chat is initially open |
 | apiKey / api-key | string | API key for authentication |
 | onClose | function | Callback when the chat is closed (React only) |
 

build/static/css/main.css

@@ -1,37 +1,61 @@
 interface QABotProps {
   isLoggedIn?: boolean;
   isAnonymous?: boolean;
-  initiallyOpen?: boolean;
+  defaultOpen?: boolean;
   apiKey?: string;
   embedded?: boolean;
   welcome?: string;
   prompt?: string;
   disabled?: boolean;
+  visible?: boolean;
   onClose?: () => void;
   [key: string]: any; // Allow additional props
 }
 
+// React component with ref
+interface QABotRef {
+  toggle: () => boolean;
+  open: () => void;
+  close: () => void;
+  isOpen: () => boolean;
+}
+
 // React component
-export const QABot: (props: QABotProps) => JSX.Element;
+export const QABot: React.ForwardRefExoticComponent<
+  QABotProps & React.RefAttributes<QABotRef>
+>;
 
 // Web Component class (available in the standalone build)
 export class WebComponentQABot extends HTMLElement {
   static observedAttributes: string[];
   attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
   connectedCallback(): void;
   disconnectedCallback(): void;
+  toggle(): boolean;
+  open(): void;
+  close(): void;
+  isOpen(): boolean;
 }
 
 // Function for non-React integration
 interface QAndAToolConfig extends QABotProps {
   target: HTMLElement;
+  returnRef?: boolean;
+}
+
+// Return type when returnRef is true
+interface QABotControlMethods {
+  toggle: () => boolean;
+  open: () => void;
+  close: () => void;
+  isOpen: () => boolean;
 }
 
 // Main function for programmatic usage (works with React or Web Component)
-export function qAndATool(config: QAndAToolConfig): () => void;
+export function qAndATool(config: QAndAToolConfig): (() => void) | QABotControlMethods;
 
 // Web Component specific function (exposed in the standalone bundle)
-export function webComponentQAndATool(config: QAndAToolConfig): () => void;
+export function webComponentQAndATool(config: QAndAToolConfig): (() => void) | QABotControlMethods;
 
 // Default export (React component)
 export default QABot;

build/static/css/main.css.map

@@ -1,231 +1,9 @@
-.rcb-toggle-button.rcb-button-show {
-  background-size: 72%;
-  background-position: center;
-  background-repeat: no-repeat;
-  background-color: rgb(26, 91, 110);
-}
-
-.rcb-chat-window {
-  width: 550px !important;
-  max-width: calc(100%);
-  max-height: 600px; /* TODO: why do we need this now */
-}
-
-.rcb-chat-window .rcb-bot-avatar {
-  background-size: contain;
-  border-radius: 0;
-  background-position: center;
-  background-repeat: no-repeat;
-}
-
-.rcb-chat-window .rcb-chat-header {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  font-weight: 700;
-}
-
-.rcb-chat-window a {
-  font-weight: 700;
-  color: #000000;
-  text-decoration: underline;
-}
-
-.rcb-chat-window a:hover {
-  color: #107180;
-}
-
-.rcb-chat-window .rcb-bot-message a {
-  text-decoration: none;
-  color: #ffffff;
-}
-
-.rcb-chat-window .rcb-bot-message a:hover {
-  text-decoration: underline;
-}
-
-.rcb-chat-window .rcb-chat-input-textarea {
-  overflow-y: auto;
-}
-
-.rcb-chat-window .rcb-chat-footer-container {
-  font-size: 10px;
-}
-
-.embedded-qa-bot .rcb-chat-window {
-  position: relative;
-  width: 100% !important;
-  height: 100%;
-  max-height: none;
-  max-width: 100% !important;
-  box-shadow: none;
-  border-radius: 0;
-}
-
-/* Ensure chat elements take full width */
-.embedded-qa-bot .rcb-chat-container,
-.embedded-qa-bot .rcb-messages-container {
-  width: 100% !important;
-  max-width: 100% !important;
-}
-
-/* Hide footer in embedded mode */
-.embedded-qa-bot .rcb-footer {
-  display: none;
-}
-
-.embedded-chat-container {
-  width: 100%;
-  transition: all 0.3s ease;
-  position: relative;
-}
-
-.embedded-chat-container.closed {
-  height: 50px;
-  overflow: hidden;
-}
-
-.embedded-chat-container.open {
-  height: 500px;
-}
-
-.embedded-chat-closed {
-  background-color: var(--primary-color, #1a5b6e);
-  color: white;
-  height: 50px;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 15px;
-  cursor: pointer;
-  border-radius: 4px;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  z-index: 1;
-}
-
-.embedded-chat-open {
-  position: relative;
-  height: 100%;
-  width: 100%;
-  border-radius: 4px;
-}
-
-.embedded-chat-content {
-  overflow: hidden;
-  width: 100%;
-}
-
-.embedded-chat-open-btn {
-  background-color: var(--secondary-color, #107180);
-  color: white;
-  border: none;
-  padding: 5px 15px;
-  border-radius: 4px;
-  cursor: pointer;
-}
-
-/* Custom close button in the react-chatbotify header */
-.embedded-close-button {
-  background: transparent;
-  border: none;
-  font-size: 24px;
-  cursor: pointer;
-  color: #666;
-  margin-left: 10px;
-  line-height: 1;
-  padding: 0 5px;
-}
-
-.embedded-close-button:hover {
-  color: #333;
-}
-
-/* Hide the bot completely when it's not visible */
-.access-qa-bot.hidden {
-  display: none;
-}
-
-/* QABot Demo Component Styles */
-.qa-bot-demo {
-  padding: 20px;
-  margin: 20px 0;
-  border: 1px solid #ddd;
-  border-radius: 8px;
-}
-
-.qa-bot-demo .controls {
-  margin-bottom: 20px;
-}
-
-.qa-bot-demo .button-row {
-  display: flex;
-  gap: 10px;
-}
-
-.qa-bot-demo button {
-  padding: 8px 16px;
-  background-color: var(--primary-color, #1a5b6e);
-  color: white;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-}
-
-.qa-bot-demo button:hover {
-  background-color: var(--secondary-color, #107180);
-}
-
-.embedded-bot-container {
-  border: 1px solid #e0e0e0;
-  border-radius: 4px;
-  overflow: hidden;
-  padding: 0;
-}
-
-/* Mobile responsive styles for embedded chat */
-@media (max-width: 768px) {
-  .embedded-chat-container.open {
-    height: 400px;
-  }
-
-  .embedded-chat-closed {
-    height: 40px;
-    font-size: 14px;
-  }
-
-  .embedded-chat-open-btn {
-    padding: 3px 10px;
-    font-size: 12px;
-  }
-}
-
-@media (max-width: 480px) {
-  .embedded-chat-container.open {
-    height: 350px;
-  }
-}
-
-/* Ensure header also takes full width */
-.embedded-qa-bot .rcb-header {
-  width: 100% !important;
-}
-
-/* Fix any other width constraints */
-.embedded-qa-bot .rcb-bot-message,
-.embedded-qa-bot .rcb-user-message {
-  max-width: 90% !important;
-  word-break: break-word;
-}
-
-/* Make the text input area expand properly */
-.embedded-qa-bot .rcb-chat-input-textarea {
-  width: 100% !important;
-}
-
-/* Overall container should expand fully */
-.qa-bot-container {
-  width: 100%;
-  max-width: 100%;
-}
+/**
+ * ACCESS QA Bot Styles
+ *
+ * This file now imports modular CSS files from the styles directory
+ * while maintaining backward compatibility with existing builds.
+ */
+
+/* Import modular styles */
+@import './styles/index.css';