introduce chat modal styles

2024-11-10 17:00:11 +01:00 · 2024-02-01 14:14:17 -08:00 · 2024-02-01 14:14:17 -08:00 · 3b9f7cb373
commit 3b9f7cb373
parent 97bc5fa39b
9 changed files with 62 additions and 20 deletions
--- a/embed/.prettierignore
+++ b/embed/.prettierignore
@ -0,0 +1,8 @@
+# defaults
+**/.git
+**/.svn
+**/.hg
+**/node_modules
+
+**/dist
+**/static/**
--- a/embed/src/App.jsx
+++ b/embed/src/App.jsx
@ -10,6 +10,7 @@ export default function App() {
  const embedSettings = useGetScriptAttributes();
  const sessionId = useSessionId();

+  if (!embedSettings.loaded) return null;
  return (
    <>
      <Head />
@ -19,10 +20,11 @@ export default function App() {
            width: isChatOpen ? 320 : "auto",
            height: isChatOpen ? "93vh" : "auto",
          }}
-          className={`transition-all duration-300 ease-in-out ${isChatOpen
+          className={`transition-all duration-300 ease-in-out ${
+            isChatOpen
              ? "max-w-md p-4 bg-white rounded-lg border shadow-lg w-72"
              : "w-16 h-16 rounded-full"
-            }`}
+          }`}
        >
          {isChatOpen && (
            <ChatWindow
@ -31,7 +33,11 @@ export default function App() {
              sessionId={sessionId}
            />
          )}
-          <OpenButton isOpen={isChatOpen} toggleOpen={toggleOpenChat} />
+          <OpenButton
+            settings={embedSettings}
+            isOpen={isChatOpen}
+            toggleOpen={toggleOpenChat}
+          />
        </div>
      </div>
    </>
--- a/embed/src/components/ChatWindow/ChatContainer/ChatHistory/HistoricalMessage/index.jsx
+++ b/embed/src/components/ChatWindow/ChatContainer/ChatHistory/HistoricalMessage/index.jsx
@ -13,9 +13,13 @@ const HistoricalMessage = forwardRef(
      <div
        key={uuid}
        ref={ref}
-        className={`flex rounded-lg justify-center items-end w-full h-fit ${error ? 'bg-red-200' :
-          role === "user" ? USER_BACKGROUND_COLOR : AI_BACKGROUND_COLOR
-          }`}
+        className={`flex rounded-lg justify-center items-end w-full h-fit ${
+          error
+            ? "bg-red-200"
+            : role === "user"
+              ? USER_BACKGROUND_COLOR
+              : AI_BACKGROUND_COLOR
+        }`}
      >
        <div className={`py-2 px-2 w-full flex flex-col`}>
          <div className="flex">
--- a/embed/src/components/ChatWindow/ChatContainer/ChatHistory/PromptReply/index.jsx
+++ b/embed/src/components/ChatWindow/ChatContainer/ChatHistory/PromptReply/index.jsx
@ -24,9 +24,7 @@ const PromptReply = forwardRef(

    if (error) {
      return (
-        <div
-          className={`flex justify-center items-end w-full bg-red-200`}
-        >
+        <div className={`flex justify-center items-end w-full bg-red-200`}>
          <div className="py-2 px-4 w-full flex gap-x-5 flex-col">
            <div className="flex gap-x-5">
              <span
--- a/embed/src/components/ChatWindow/ChatContainer/PromptInput/index.jsx
+++ b/embed/src/components/ChatWindow/ChatContainer/PromptInput/index.jsx
@ -28,9 +28,7 @@ export default function PromptInput({
    const element = event.target;
    element.style.height = "auto";
    element.style.height =
-      event.target.value.length !== 0
-        ? element.scrollHeight + "px"
-        : "auto";
+      event.target.value.length !== 0 ? element.scrollHeight + "px" : "auto";
  };

  return (
--- a/embed/src/components/ChatWindow/Header/index.jsx
+++ b/embed/src/components/ChatWindow/Header/index.jsx
@ -1,13 +1,13 @@
 import AnythingLLMLogo from "@/assets/anything-llm-dark.png";
 import { X } from "@phosphor-icons/react";

-export default function ChatWindowHeader({ closeChat }) {
+export default function ChatWindowHeader({ iconUrl = null, closeChat }) {
  return (
    <div className="flex justify-between items-center">
      <img
-        style={{ width: 100 }}
-        src={AnythingLLMLogo}
-        alt="AnythingLLM Logo"
+        style={{ maxWidth: 100, maxHeight: 20 }}
+        src={iconUrl ?? AnythingLLMLogo}
+        alt={iconUrl ? "Brand" : "AnythingLLM Logo"}
      />
      <button onClick={closeChat} className="text-xl font-bold">
        <X size={18} />
--- a/embed/src/components/ChatWindow/index.jsx
+++ b/embed/src/components/ChatWindow/index.jsx
@ -15,7 +15,10 @@ export default function ChatWindow({ closeChat, settings, sessionId }) {
  setEventDelegatorForCodeSnippets();
  return (
    <div className="flex flex-col">
-      <ChatWindowHeader closeChat={closeChat} />
+      <ChatWindowHeader
+        iconUrl={settings.brandImageUrl}
+        closeChat={closeChat}
+      />
      <ChatContainer
        sessionId={sessionId}
        settings={settings}
--- a/embed/src/components/OpenButton/index.jsx
+++ b/embed/src/components/OpenButton/index.jsx
@ -1,12 +1,33 @@
-export default function OpenButton({ isOpen, toggleOpen }) {
+import {
+  Plus,
+  ChatCircleDots,
+  Headset,
+  Binoculars,
+  MagnifyingGlass,
+  MagicWand,
+} from "@phosphor-icons/react";
+
+const CHAT_ICONS = {
+  plus: Plus,
+  "chat-circle-dots": ChatCircleDots,
+  headset: Headset,
+  binoculars: Binoculars,
+  magnifying: MagnifyingGlass,
+  magic: MagicWand,
+};
+
+export default function OpenButton({ settings, isOpen, toggleOpen }) {
  if (isOpen) return null;
+  const ChatIcon = CHAT_ICONS.hasOwnProperty(settings?.chatIcon)
+    ? CHAT_ICONS[settings.chatIcon]
+    : CHAT_ICONS.plus;
  return (
    <button
      onClick={toggleOpen}
-      className="w-16 h-16 rounded-full bg-blue-500 text-white text-2xl"
+      className="flex items-center justify-center p-4 rounded-full bg-blue-500 text-white text-2xl"
      aria-label="Toggle Menu"
    >
-      +
+      <ChatIcon className="text-white" />
    </button>
  );
 }
--- a/embed/src/hooks/useScriptAttributes.js
+++ b/embed/src/hooks/useScriptAttributes.js
@ -9,6 +9,10 @@ const DEFAULT_SETTINGS = {
  prompt: null, // override
  model: null, // override
  temperature: null, //override
+
+  // style parameters
+  chatIcon: "plus",
+  brandImageUrl: null, // will be forced into 100x50px container
 };

 export default function useGetScriptAttributes() {