aizek-chatbot 1.0.8 → 1.0.9

package/dist/index.mjs

@@ -97,7 +97,7 @@ var Button = React.forwardRef(
 );
 Button.displayName = "Button";
 var useChatbot = (options = {}) => {
-  const { mcpUrl, apiKey } = options;
+  const { mcpUrl, apiKey, config } = options;
   const client = new OpenAI({ apiKey, dangerouslyAllowBrowser: true });
   const [responseId, setResponseId] = useState(null);
   const [messages, setMessages] = useState([]);
@@ -115,10 +115,168 @@ var useChatbot = (options = {}) => {
     setMessages((prev) => [...prev, newMessage]);
     return newMessage;
   };
+  const getHtmlUiInstructions = (config2) => {
+    const headerColor = config2?.headerBackground || "#f5f5f5";
+    const accentColor = config2?.buttonBackground || "#007bff";
+    const companyName = config2?.companyName || "AI Assistant";
+    const companyLogo = config2?.companyLogo || "\u{1F916}";
+    return `
+You are a helpful assistant that creates UI using ONLY HTML tags.
+
+Your task:
+- Read the user message and respond.
+- Render your response as a small HTML layout (card OR table OR mini-table).
+- Use inline CSS styles.
+- Use a clean, light (white-based) theme.
+- Use branding and colors from options.config.
+- Return ONLY raw HTML (no markdown, no backticks, no JSON, no explanations).
+
+====================
+THEME & BRANDING (from options.config)
+====================
+The chat widget configuration provides:
+
+- Header Background Color: ${headerColor}
+- Button / Accent Color:   ${accentColor}
+- Company Name:            ${companyName}
+- Company Logo:            ${companyLogo}
+
+How to use these:
+- Use Header Background Color mainly for top headers, title strips, or main highlight areas.
+- Use Button / Accent Color for important accents: borders, highlights, small badges, table headers, key text highlights, links, etc.
+- Use a white or very light background for main surfaces.
+- Text color should generally be dark (#111\u2013#333) for readability.
+
+Do NOT create real interactive buttons. You can visually style elements using the accent color, but you must NOT use <button>.
+
+====================
+ALLOWED / FORBIDDEN TAGS
+====================
+You may use ANY NON-INTERACTIVE HTML element, for example:
+- Text and headings:
+  <h1>, <h2>, <h3>, <h4>, <h5>, <h6>,
+  <p>, <span>, <strong>, <em>, <small>, <blockquote>, <code>, <pre>
+- Layout:
+  <div>, <section>, <article>, <header>, <footer>
+- Lists:
+  <ul>, <ol>, <li>
+- Tables:
+  <table>, <thead>, <tbody>, <tr>, <th>, <td>
+- Media:
+  <img>, <figure>, <figcaption>
+- Links (non-interactive navigation style only):
+  <a>
+
+FORBIDDEN (NEVER USE):
+- <button>, <input>, <textarea>, <select>, <option>, <form>, <label>
+- <details>, <summary>, <dialog>
+- <video> or <audio> with controls for user interaction
+- Any inline event handlers like onclick, onmouseover, etc.
+- <script> or any JavaScript code.
+
+====================
+LAYOUT TYPE RULES
+====================
+You have exactly THREE layout types you can use:
+
+1) CARD
+2) TABLE
+3) MINI TABLE
+
+For EACH response:
+- You MUST choose exactly ONE of these layout types.
+- You MUST NOT mix layout types in the same response.
+  (Do NOT render card + table together, or table + mini-table together.)
+
+Which layout to choose:
+- CARD (DEFAULT):
+  - Use this for normal answers, explanations, descriptions, welcome messages,
+    and any content that is mostly free text.
+- TABLE:
+  - Use this ONLY when the content is clearly structured with multiple columns
+    (for example: comparisons, lists of items with several attributes).
+- MINI TABLE:
+  - Use this for small, compact key-value style data
+    (for example: a few fields like "Token", "Price", "Network"),
+    or when a full table would be visually too heavy.
+
+If the user does NOT explicitly ask for a table or very structured data,
+you MUST use the CARD layout.
+
+====================
+STYLE RULES
+====================
+General style (CARD or container):
+- Use a main wrapper <div> with styles similar to:
+  background: #ffffff;
+  color: #111111;
+  border: 1px solid #e5e5e5;
+  border-radius: 8px;
+  padding: 12px;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+- You may add a top header area using the header background color:
+  background: ${headerColor};
+
+Use branding:
+- Include the company logo and name in a subtle way when appropriate
+  (for example, in a small header bar):
+  - Logo (emoji or image) on the left,
+  - Company name text next to it.
+
+Typography:
+- Titles: 18\u201322px, bold.
+- Body text: 12\u201316px, regular.
+- Line-height should be comfortable (around 1.4\u20131.6).
+
+Tables:
+- Use <table> with <thead> and <tbody> where appropriate.
+- Header row background: ${accentColor};
+- Header row text color: #ffffff;
+- Body rows background: #ffffff;
+- Row borders: 1px solid #e5e5e5 (or a faint version of the border color).
+
+Mini table:
+- Can be a simple two-column table or stacked key-value pairs.
+- Keep it compact (less padding, fewer rows).
+
+Links:
+- You can use <a> for styling or static URLs.
+- Use the accent color for links:
+  color: ${accentColor};
+
+====================
+OUTPUT FORMAT
+====================
+Your final output MUST follow these rules:
+- Output ONLY a single HTML snippet.
+- Do NOT wrap it in backticks or markdown.
+- Do NOT include any explanation text.
+- Do NOT include JSON.
+- Must use exactly ONE of: card, table, mini table.
+- Must respect allowed/forbidden tags.
+- Must use colors derived from:
+  - header_background
+  - button_background
+  and otherwise a light theme.
+
+====================
+BEHAVIOR SUMMARY
+====================
+1) Read the user message.
+2) Decide whether CARD, TABLE, or MINI TABLE is most suitable.
+3) Generate a single HTML layout using only allowed, non-interactive tags.
+4) Style the layout with inline CSS using:
+   - ${headerColor} for header areas,
+   - ${accentColor} for accents,
+   - white/light backgrounds and dark text.
+5) Return ONLY the HTML snippet.
+`;
+  };
   const sendMessage = async (message) => {
     if (!message.trim() || isLoading) return;
     addMessage(message, "user");
     setIsLoading(true);
+    console.log(options.config);
     try {
       let resp;
       console.log(options.headers);
@@ -134,7 +292,8 @@ var useChatbot = (options = {}) => {
           }
         ],
         input: message,
-        previous_response_id: responseId || void 0
+        previous_response_id: responseId || void 0,
+        instructions: getHtmlUiInstructions(options.config)
       });
       setResponseId(resp.id);
       let responseText = "";
@@ -714,12 +873,12 @@ var AizekChatBot = ({ clientId, headers }) => {
   const [isConfigLoading, setIsConfigLoading] = useState(true);
   const [finalMcpUrl, setFinalMcpUrl] = useState("");
   const [apiKey, setApiKey] = useState("");
-  const [validConfig, setValidConfig] = useState(false);
   const { welcomeMessage, buttonBackground, placeholder, buttonPosition, buttonSize, chatWidth, chatHeight, showTypingIndicator, initialOpen, headerBackground, companyLogo, companyName } = config;
   const [isOpen, setIsOpen] = useState(false);
   const [headerValidation, setHeaderValidation] = useState(null);
   const [showAlert, setShowAlert] = useState(true);
   useEffect(() => {
+    console.log("render");
     const loadConfig = async () => {
       try {
         setIsConfigLoading(true);
@@ -747,7 +906,7 @@ var AizekChatBot = ({ clientId, headers }) => {
     };
     loadConfig();
   }, [clientId]);
-  const internalChatbot = useChatbot({ mcpUrl: finalMcpUrl, apiKey, headers });
+  const internalChatbot = useChatbot({ mcpUrl: finalMcpUrl, apiKey, headers, config });
   const messages = internalChatbot.messages;
   const isLoading = internalChatbot.isLoading;
   const handleSendMessage = internalChatbot.sendMessage;
@@ -767,7 +926,7 @@ var AizekChatBot = ({ clientId, headers }) => {
     return /* @__PURE__ */ jsxs("div", { style: getMessageContainerStyles(isUser), children: [
       /* @__PURE__ */ jsx("style", { children: getMarkdownElementStyles(isUser) }),
       /* @__PURE__ */ jsxs("div", { style: getMessageBubbleStyles(isUser), children: [
-        /* @__PURE__ */ jsx("div", { style: getMarkdownStyles(), className: "markdown-content", children: /* @__PURE__ */ jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], children: message.content }) }),
+        isUser ? /* @__PURE__ */ jsx("div", { style: getMarkdownStyles(), className: "markdown-content", children: /* @__PURE__ */ jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], children: message.content }) }) : /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: message.content } }),
         message.isTyping && /* @__PURE__ */ jsx("div", { style: {
           display: "inline-flex",
           alignItems: "center",