ai-chat-ui-ck/dist/components/AIChatUI.js

A reusable AI Chat UI component built with React and CSS.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _ChatBubble = _interopRequireDefault(require("./ChatBubble"));
var _ChatInput = _interopRequireDefault(require("./ChatInput"));
require("./AIChatUI.css");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
// AIChatUI.js

// 1. Add 'chatAgentTitle' to the component's props
const AIChatUI = _ref => {
  let {
    onMessageSubmit,
    chatAgentTitle = "AI Chat Agent"
  } = _ref;
  // Added chatAgentTitle with a default value
  const [messages, setMessages] = (0, _react.useState)([]);
  const [loading, setLoading] = (0, _react.useState)(false);
  const handleSend = async text => {
    const userMessage = {
      role: 'user',
      content: text
    };
    setMessages(prev => [...prev, userMessage]);
    setLoading(true);
    try {
      const reply = await onMessageSubmit(text);
      const botMessage = {
        role: 'assistant',
        content: reply
      };
      setMessages(prev => [...prev, botMessage]);
    } catch (err) {
      setMessages(prev => [...prev, {
        role: 'assistant',
        content: 'Error getting response.'
      }]);
    } finally {
      setLoading(false);
    }
  };
  return /*#__PURE__*/_react.default.createElement("div", {
    className: "chat-ui-container"
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "chat-messages"
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "chat-inner-title"
  }, chatAgentTitle), " ", messages.map((msg, idx) => /*#__PURE__*/_react.default.createElement(_ChatBubble.default, {
    key: idx,
    role: msg.role,
    content: msg.content
  }))), /*#__PURE__*/_react.default.createElement(_ChatInput.default, {
    onSend: handleSend,
    disabled: loading
  }));
};
var _default = exports.default = AIChatUI;