diff --git a/.eslintrc.js b/.eslintrc.js
index 0cbd65cc..1fad1733 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -54,12 +54,14 @@ const defaultConfig = {
         allowReferrer: true,
       },
     ],
-  }
+  },
 };
 
+// console.log(addonExtenders);
 const config = addonExtenders.reduce(
   (acc, extender) => extender.modify(acc),
   defaultConfig,
 );
+// const config = defaultConfig;
 
 module.exports = config;
diff --git a/.gitignore b/.gitignore
index f1be4ff0..2203747a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -24,3 +24,5 @@ videos
 .env.test.local
 .env.production.local
 *~
+.yalc
+yalc.lock
diff --git a/.nvmrc b/.nvmrc
new file mode 100644
index 00000000..805b5a4e
--- /dev/null
+++ b/.nvmrc
@@ -0,0 +1 @@
+v20.9.0
diff --git a/chatbotlib/.nvmrc b/chatbotlib/.nvmrc
new file mode 100644
index 00000000..805b5a4e
--- /dev/null
+++ b/chatbotlib/.nvmrc
@@ -0,0 +1 @@
+v20.9.0
diff --git a/chatbotlib/Makefile b/chatbotlib/Makefile
new file mode 100644
index 00000000..329fab87
--- /dev/null
+++ b/chatbotlib/Makefile
@@ -0,0 +1,4 @@
+# npm run build
+
+all:
+	yalc publish
diff --git a/chatbotlib/components/AutoResizeTextarea.jsx b/chatbotlib/components/AutoResizeTextarea.jsx
new file mode 100644
index 00000000..0d53404a
--- /dev/null
+++ b/chatbotlib/components/AutoResizeTextarea.jsx
@@ -0,0 +1,58 @@
+// import TextareaAutosize from 'react-textarea-autosize';
+// import { Button } from 'semantic-ui-react';
+
+const TextareaAutosize = (props) => <textarea {...props} />;
+
+import React from "react";
+
+import { default as SVGIcon } from "./SVGIcon";
+import SendIcon from "./../icons/send.svg";
+
+export default React.forwardRef(function AutoResizeTextarea(props, ref) {
+  const { onSubmit, isStreaming, ...rest } = props;
+  const [input, setInput] = React.useState("");
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (input.trim()) {
+      onSubmit({ message: input });
+      setInput("");
+    }
+  };
+
+  return (
+    <>
+      <TextareaAutosize
+        value={input}
+        onChange={(e) => setInput(e.target.value)}
+        onKeyDown={(e) => {
+          if (e.key === "Enter" && !e.shiftKey) {
+            handleSubmit(e);
+          } else if (e.key === "Enter" && e.shiftKey) {
+            e.preventDefault();
+            setInput(input + "\n");
+          }
+        }}
+        {...rest}
+        ref={ref}
+      />
+
+      <button
+        className="submit-btn"
+        disabled={isStreaming}
+        type="submit"
+        aria-label="Send"
+        onKeyDown={(e) => {
+          handleSubmit(e);
+        }}
+        onClick={(e) => {
+          handleSubmit(e);
+        }}
+      >
+        <div className="btn-icon">
+          <SVGIcon name={SendIcon} size="28" />
+        </div>
+      </button>
+    </>
+  );
+});
diff --git a/chatbotlib/components/ChatMessageBubble.jsx b/chatbotlib/components/ChatMessageBubble.jsx
new file mode 100644
index 00000000..202c5aec
--- /dev/null
+++ b/chatbotlib/components/ChatMessageBubble.jsx
@@ -0,0 +1,156 @@
+import React from "react";
+
+import { Citation } from "./Citation";
+import { SourceDetails } from "./Source";
+import { transformEmailsToLinks } from "../utils";
+import { default as SVGIcon } from "./SVGIcon";
+
+import BotIcon from "./../icons/bot.svg";
+import UserIcon from "./../icons/user.svg";
+
+const CITATION_MATCH = /\[\d+\](?![[(\])])/gm;
+
+const Markdown = React.lazy(() => import("react-markdown"));
+
+const components = (message) => {
+  return {
+    a: (props) => {
+      const { node, ...rest } = props;
+      const value = rest.children;
+
+      if (value?.toString().startsWith("*")) {
+        return (
+          <div className="flex-none bg-background-800 inline-block rounded-full h-3 w-3 ml-2" />
+        );
+      } else {
+        return (
+          <Citation link={rest?.href} value={value} message={message}>
+            {rest.children}
+          </Citation>
+        );
+      }
+    },
+    p: ({ node, ...props }) => {
+      const children = props.children;
+      const text = React.Children.map(children, (child) => {
+        if (typeof child === "string") {
+          return transformEmailsToLinks(child);
+        }
+        return child;
+      });
+
+      return (
+        <p {...props} className="text-default">
+          {text}
+        </p>
+      );
+    },
+  };
+};
+
+function addCitations(text) {
+  return text.replaceAll(CITATION_MATCH, (match) => {
+    const number = match.match(/\d+/)[0];
+    return `${match}(${number})`;
+  });
+}
+
+export function ToolCall({ tool_args, tool_name, tool_result }) {
+  if (tool_name === "run_search") {
+    return (
+      <div className="tool_info">
+        Searched for: <em>{tool_args?.query || ""}</em>
+      </div>
+    );
+  }
+  return null;
+}
+
+export function ChatMessageBubble(props) {
+  const { message, isLoading, isMostRecent, libs, onChoice, showToolCalls } =
+    props;
+  // const { remarkGfm } = libs; // , rehypePrism
+  const { citations = {}, documents, type } = message;
+  const isUser = type === "user";
+
+  const showLoader = isMostRecent && isLoading;
+
+  // TODO: these classes are not actually used, remove them
+  // const colorClassName = isUser ? 'bg-lime-300' : 'bg-slate-50';
+  // const alignmentClassName = isUser ? 'ml-auto' : 'mr-auto';
+
+  const icon = isUser ? (
+    <div className="circle user">
+      <SVGIcon name={UserIcon} size="20" color="white" />
+    </div>
+  ) : (
+    <div className="circle assistant">
+      <SVGIcon name={BotIcon} size="20" color="white" />
+    </div>
+  );
+
+  // For some reason the list is shifted by one. It's all weird
+  // const sources = Object.keys(citations).map(
+  //   (index) => documents[(parseInt(index) - 1).toString()],
+  // );
+
+  const sources = Object.values(citations).map((doc_id) =>
+    documents.find((doc) => doc.db_doc_id === doc_id),
+  );
+
+  const inverseMap = Object.entries(citations).reduce((acc, [k, v]) => {
+    return { ...acc, [v]: k };
+  }, {});
+
+  // remarkGfm
+
+  return (
+    <div>
+      <div className="comment">
+        {icon}
+
+        <div>
+          {showToolCalls &&
+            message.toolCalls?.map((info, index) => (
+              <ToolCall key={index} {...info} />
+            ))}
+          <Markdown components={components(message)} remarkPlugins={[]}>
+            {addCitations(message.message)}
+          </Markdown>
+
+          {!showLoader && sources.length > 0 && (
+            <>
+              <h5>Sources:</h5>
+
+              <div className="sources">
+                {sources.map((source, i) => (
+                  <SourceDetails
+                    source={source}
+                    key={i}
+                    index={inverseMap[source.db_doc_id]}
+                  />
+                ))}
+              </div>
+            </>
+          )}
+          {message.relatedQuestions?.length > 0 && (
+            <div className="chat-related-questions">
+              <h5>Related Questions:</h5>
+              {message.relatedQuestions?.map(({ question }) => (
+                <div
+                  className="relatedQuestionButton"
+                  role="button"
+                  onClick={() => !isLoading && onChoice(question)}
+                  onKeyDown={() => !isLoading && onChoice(question)}
+                  tabIndex="-1"
+                >
+                  {question}
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/chatbotlib/components/ChatWindow.jsx b/chatbotlib/components/ChatWindow.jsx
new file mode 100644
index 00000000..8268c6e7
--- /dev/null
+++ b/chatbotlib/components/ChatWindow.jsx
@@ -0,0 +1,149 @@
+import React, { Suspense } from "react";
+// import { Button, Form, Icon, Segment } from 'semantic-ui-react';
+
+import { useScrollonStream } from "../hooks/lib";
+import { default as injectLazyLibs } from "../hooks/lazyLibs";
+import { useBackendChat } from "./../hooks/useBackendChat";
+import AutoResizeTextarea from "./AutoResizeTextarea";
+import { ChatMessageBubble } from "./ChatMessageBubble";
+import EmptyState from "./EmptyState";
+
+function Button(props) {
+  return <button {...props} />;
+}
+
+function Form(props) {
+  return <div {...props} />;
+}
+
+function Icon(props) {
+  return <div {...props}></div>;
+}
+
+function Segment(props) {
+  return <div {...props}></div>;
+}
+
+function ChatWindow({
+  persona,
+  // rehypePrism,
+  // remarkGfm,
+  placeholderPrompt = "Ask a question",
+  isEditMode,
+  ...data
+}) {
+  const { height, qgenAsistantId, enableQgen, scrollToInput, showToolCalls } =
+    data;
+  const libs = {}; // rehypePrism, remarkGfm
+  const { onSubmit, messages, isStreaming, clearChat } = useBackendChat({
+    persona,
+    qgenAsistantId,
+    enableQgen,
+  });
+  const [showLandingPage, setShowLandingPage] = React.useState(false);
+
+  const textareaRef = React.useRef(null);
+  const conversationRef = React.useRef(null);
+  const endDivRef = React.useRef(null);
+  const scrollDist = React.useRef(0); // Keep track of scroll distance
+
+  React.useEffect(() => {
+    if (!textareaRef.current || isEditMode) return;
+
+    if (isStreaming || scrollToInput) {
+      textareaRef.current.focus();
+    }
+  }, [isStreaming, scrollToInput, isEditMode]);
+
+  const handleClearChat = () => {
+    clearChat();
+    setShowLandingPage(true);
+  };
+
+  React.useEffect(() => {
+    setShowLandingPage(messages.length === 0);
+  }, [messages]);
+
+  useScrollonStream({
+    isStreaming,
+    scrollableDivRef: conversationRef,
+    scrollDist,
+    endDivRef,
+    distance: 500, // distance that should "engage" the scroll
+    debounce: 100, // time for debouncing
+  });
+
+  return (
+    <div className="chat-window">
+      <div className="messages">
+        {showLandingPage ? (
+          <EmptyState
+            onChoice={(message) => {
+              onSubmit({ message });
+              setShowLandingPage(false);
+            }}
+            persona={persona}
+            {...data}
+          />
+        ) : (
+          <>
+            <Segment clearing basic>
+              <Button
+                disabled={isStreaming}
+                onClick={handleClearChat}
+                className="right floated"
+              >
+                <Icon name="edit outline" /> New chat
+              </Button>
+            </Segment>
+            <Suspense fallback={<div>Loading suspense</div>}>
+              <div
+                ref={conversationRef}
+                className={`conversation ${height ? "include-scrollbar" : ""}`}
+                style={{ maxHeight: height }}
+              >
+                {messages.map((m, index) => (
+                  <ChatMessageBubble
+                    key={m.messageId}
+                    message={m}
+                    isMostRecent={index === 0}
+                    isLoading={isStreaming}
+                    libs={libs}
+                    onChoice={(message) => {
+                      onSubmit({ message });
+                    }}
+                    showToolCalls={showToolCalls}
+                  />
+                ))}
+                <div ref={endDivRef} /> {/* End div to mark the bottom */}
+              </div>
+            </Suspense>
+          </>
+        )}
+        {isStreaming && <div className="loader"></div>}
+      </div>
+
+      <div className="chat-form">
+        <Form>
+          <div className="textarea-wrapper">
+            <AutoResizeTextarea
+              maxRows={8}
+              minRows={1}
+              ref={textareaRef}
+              placeholder={
+                messages.length > 0 ? "Ask follow-up..." : placeholderPrompt
+              }
+              isStreaming={isStreaming}
+              onSubmit={onSubmit}
+            />
+          </div>
+        </Form>
+      </div>
+    </div>
+  );
+}
+
+export default injectLazyLibs([
+  // "rehypePrism",
+  // "remarkGfm",
+])(ChatWindow);
diff --git a/src/ChatBlock/Citation.jsx b/chatbotlib/components/Citation.jsx
similarity index 94%
rename from src/ChatBlock/Citation.jsx
rename to chatbotlib/components/Citation.jsx
index 51155bdf..1b159bc7 100644
--- a/src/ChatBlock/Citation.jsx
+++ b/chatbotlib/components/Citation.jsx
@@ -1,4 +1,8 @@
-import { Popup } from 'semantic-ui-react';
+// import { Popup } from 'semantic-ui-react';
+
+function Popup(props) {
+  return <div {...props} />;
+}
 
 export function Citation({ link, index, value, message }) {
   const isLinkType = value?.toString().startsWith('[');
diff --git a/src/ChatBlock/EmptyState.jsx b/chatbotlib/components/EmptyState.jsx
similarity index 89%
rename from src/ChatBlock/EmptyState.jsx
rename to chatbotlib/components/EmptyState.jsx
index b1ab1736..d074ab37 100644
--- a/src/ChatBlock/EmptyState.jsx
+++ b/chatbotlib/components/EmptyState.jsx
@@ -1,5 +1,9 @@
-import { Button } from 'semantic-ui-react';
-import { debounce } from './utils';
+// import { Button } from 'semantic-ui-react';
+import { debounce } from './../utils';
+
+function Button(props) {
+  return <button {...props} />;
+}
 
 function StarterMessage({ msg, onClick }) {
   return (
diff --git a/chatbotlib/components/SVGIcon.jsx b/chatbotlib/components/SVGIcon.jsx
new file mode 100644
index 00000000..a8da6da2
--- /dev/null
+++ b/chatbotlib/components/SVGIcon.jsx
@@ -0,0 +1,19 @@
+export default function SVGIcon({ name, size, color, className, title }) {
+  return (
+    <svg
+      xmlns={name?.attributes && name?.attributes?.xmlns}
+      width={size || '25'}
+      height={size || '25'}
+      viewBox={name?.attributes && name?.attributes?.viewBox}
+      fill={name?.attributes?.fill || 'currentColor'}
+      stroke={color || 'currentColor'}
+      strokeWidth={name?.attributes?.['stroke-width']}
+      strokeLinecap={name?.attributes?.['stroke-linecap']}
+      strokeLinejoin={name?.attributes?.[' stroke-linejoin']}
+      className={className ? `icon ${className}` : 'icon'}
+      dangerouslySetInnerHTML={{
+        __html: title ? `<title>${title}</title>${name.content}` : name.content,
+      }}
+    />
+  );
+}
diff --git a/src/ChatBlock/Source.jsx b/chatbotlib/components/Source.jsx
similarity index 92%
rename from src/ChatBlock/Source.jsx
rename to chatbotlib/components/Source.jsx
index df59e5de..13fb3e84 100644
--- a/src/ChatBlock/Source.jsx
+++ b/chatbotlib/components/Source.jsx
@@ -1,10 +1,14 @@
-import { Popup } from 'semantic-ui-react';
+// import { Popup } from 'semantic-ui-react';
 import { DateTime } from 'luxon';
-import { SVGIcon } from './utils';
+import { default as SVGIcon } from './SVGIcon';
 
 import FileIcon from './../icons/file.svg';
 import GlobeIcon from './../icons/globe.svg';
 
+function Popup(props) {
+  return <div {...props} />;
+}
+
 export const SourceDetails = ({ source, index }) => {
   const {
     link,
diff --git a/chatbotlib/hooks/lazyLibs.jsx b/chatbotlib/hooks/lazyLibs.jsx
new file mode 100644
index 00000000..8d242cee
--- /dev/null
+++ b/chatbotlib/hooks/lazyLibs.jsx
@@ -0,0 +1,36 @@
+import React, { useEffect, useState } from "react";
+const libraryMapping = {
+  // rehypePrism: () => import("rehype-prism-plus"),
+  // remarkGfm: () => import("remark-gfm"),
+};
+
+const injectLazyLibs = (libraryNames) => (WrappedComponent) => {
+  return (props) => {
+    const [libraries, setLibraries] = useState({});
+    const [loading, setLoading] = useState(true);
+
+    useEffect(() => {
+      const loadLibraries = async () => {
+        const libs = {};
+        for (const name of libraryNames) {
+          if (libraryMapping[name]) {
+            libs[name] = await libraryMapping[name]();
+          }
+        }
+        console.log("loading", libs);
+        setLibraries(libs);
+        setLoading(false);
+      };
+
+      loadLibraries();
+    }, libraryNames); // libraryNames
+
+    if (loading) {
+      return <div>Loading libraries...</div>;
+    }
+
+    return <WrappedComponent {...props} {...libraries} />;
+  };
+};
+
+export default injectLazyLibs;
diff --git a/src/ChatBlock/lib.js b/chatbotlib/hooks/lib.js
similarity index 100%
rename from src/ChatBlock/lib.js
rename to chatbotlib/hooks/lib.js
diff --git a/src/ChatBlock/useBackendChat.js b/chatbotlib/hooks/useBackendChat.js
similarity index 99%
rename from src/ChatBlock/useBackendChat.js
rename to chatbotlib/hooks/useBackendChat.js
index ad47855a..c68a772c 100644
--- a/src/ChatBlock/useBackendChat.js
+++ b/chatbotlib/hooks/useBackendChat.js
@@ -18,7 +18,7 @@ const SYSTEM_MESSAGE_ID = -3;
 export const RetrievalType = {
   None: 'none',
   Search: 'search',
-  SelectedDocs: 'selectedDocs',
+  // SelectedDocs: 'selectedDocs',
 };
 
 export const ChatFileType = {
diff --git a/src/ChatBlock/useMarked.js b/chatbotlib/hooks/useMarked.js
similarity index 100%
rename from src/ChatBlock/useMarked.js
rename to chatbotlib/hooks/useMarked.js
diff --git a/chatbotlib/hooks/withOnyxData.jsx b/chatbotlib/hooks/withOnyxData.jsx
new file mode 100644
index 00000000..81ca4d95
--- /dev/null
+++ b/chatbotlib/hooks/withOnyxData.jsx
@@ -0,0 +1,50 @@
+import React from "react";
+// import {
+//   PlaceholderParagraph,
+//   PlaceholderLine,
+//   Placeholder,
+// } from 'semantic-ui-react';
+
+const Placeholder = (props) => <div {...props} />;
+const PlaceholderLine = (props) => <div {...props} />;
+const PlaceholderParagraph = (props) => <div {...props} />;
+
+const Loader = () => (
+  <Placeholder>
+    <PlaceholderParagraph>
+      <PlaceholderLine />
+      <PlaceholderLine />
+      <PlaceholderLine />
+      <PlaceholderLine />
+    </PlaceholderParagraph>
+  </Placeholder>
+);
+
+export default function withOnyxData(callback) {
+  function wrapper(Component) {
+    function WrappedComponent(props) {
+      const [state, setState] = React.useState(null);
+      const [name, fetcher, depKey] = callback(props);
+
+      React.useEffect(() => {
+        async function handler() {
+          if (fetcher) {
+            const response = await fetcher;
+            setState({ [name]: response.body });
+          }
+        }
+        handler();
+        // the fetcher is not a stable function, but we depend on the relevant depKey
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+      }, [depKey, name]);
+
+      return state ? (
+        <Component {...props} {...state} />
+      ) : (
+        <Loader active={true} />
+      );
+    }
+    return WrappedComponent;
+  }
+  return wrapper;
+}
diff --git a/src/icons/bot.svg b/chatbotlib/icons/bot.svg
similarity index 100%
rename from src/icons/bot.svg
rename to chatbotlib/icons/bot.svg
diff --git a/src/icons/file.svg b/chatbotlib/icons/file.svg
similarity index 100%
rename from src/icons/file.svg
rename to chatbotlib/icons/file.svg
diff --git a/src/icons/globe.svg b/chatbotlib/icons/globe.svg
similarity index 100%
rename from src/icons/globe.svg
rename to chatbotlib/icons/globe.svg
diff --git a/src/icons/send.svg b/chatbotlib/icons/send.svg
similarity index 100%
rename from src/icons/send.svg
rename to chatbotlib/icons/send.svg
diff --git a/src/icons/user.svg b/chatbotlib/icons/user.svg
similarity index 100%
rename from src/icons/user.svg
rename to chatbotlib/icons/user.svg
diff --git a/chatbotlib/index.js b/chatbotlib/index.js
new file mode 100644
index 00000000..2341e83a
--- /dev/null
+++ b/chatbotlib/index.js
@@ -0,0 +1,3 @@
+export { default as withOnyxData } from './hooks/withOnyxData';
+export { default as ChatWindow } from './components/ChatWindow';
+export { useBackendChat } from './hooks/useBackendChat';
diff --git a/chatbotlib/package.json b/chatbotlib/package.json
new file mode 100644
index 00000000..fa89043c
--- /dev/null
+++ b/chatbotlib/package.json
@@ -0,0 +1,38 @@
+{
+  "name": "@eeacms/chatbotlib",
+  "version": "1.0.0",
+  "description": "",
+  "main": "dist/chatbotlib.umd.js",
+  "module": "dist/chatbotlib.es.js",
+  "exports": {
+    ".": {
+      "import": "./dist/chatbotlib.es.js",
+      "require": "./dist/chatbotlib.umd.js"
+    }
+  },
+  "scripts": {
+    "prepublish": "rm -rf ./dist && npm run build",
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "vite build"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.3.4",
+    "vite": "^6.1.0"
+  },
+  "author": "",
+  "license": "ISC",
+  "root": true,
+  "dependencies": {
+    "luxon": "^3.5.0",
+    "react-markdown": "^6.0.3",
+    "react-textarea-autosize": "^8.5.7"
+  },
+  "peerDependencies": {
+    "react": "^17.0.0 || ^18.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0",
+    "rehype-prism-plus": "^1.6.0"
+  },
+  "oldDeps": {
+    "remark-gfm": "^3.0.1"
+  }
+}
diff --git a/chatbotlib/utils.jsx b/chatbotlib/utils.jsx
new file mode 100644
index 00000000..ad737d91
--- /dev/null
+++ b/chatbotlib/utils.jsx
@@ -0,0 +1,25 @@
+export const EMAIL_REGEX = /([a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,})/g;
+
+// Convert text with email addresses to mailto links
+export function transformEmailsToLinks(text) {
+  return text.split(EMAIL_REGEX).map((part, index) => {
+    if (EMAIL_REGEX.test(part)) {
+      return (
+        <a key={index} href={`mailto:${part}`} className="text-email">
+          {part}
+        </a>
+      );
+    }
+    return part;
+  });
+}
+
+export function debounce(callable, click_signal) {
+  if (!click_signal.current) {
+    click_signal.current = true;
+    setTimeout(() => {
+      click_signal.current = null;
+    }, 1000);
+    callable();
+  }
+}
diff --git a/chatbotlib/vite.config.js b/chatbotlib/vite.config.js
new file mode 100644
index 00000000..68908343
--- /dev/null
+++ b/chatbotlib/vite.config.js
@@ -0,0 +1,24 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+export default defineConfig({
+  plugins: [react()],
+  build: {
+    lib: {
+      entry: "./index.js",
+      name: "@eeacms/chatbotlib",
+      fileName: (format) => `chatbotlib.${format}.js`,
+      // formats: ["umd"],
+    },
+    rollupOptions: {
+      external: ["react", "react-dom", "react/jsx-runtime"],
+      output: {
+        globals: {
+          react: "React",
+          "react-dom": "ReactDOM",
+          "react/jsx-runtime": "react/jsx-runtime",
+        },
+      },
+    },
+  },
+});
diff --git a/eslint.extend.js b/eslint.extend.js
new file mode 100644
index 00000000..80c95220
--- /dev/null
+++ b/eslint.extend.js
@@ -0,0 +1,15 @@
+const path = require('path');
+
+module.exports = {
+  modify(defaultConfig) {
+    const aliasMap = defaultConfig.settings['import/resolver'].alias.map;
+    const addonPath = aliasMap.find(
+      ([name]) => name === '@eeacms/volto-chatbot',
+    )[1];
+
+    const searchlibPath = path.resolve(`${addonPath}/../chatbotlib`);
+    aliasMap.push(['@eeacms/chatbotlib', searchlibPath]);
+
+    return defaultConfig;
+  },
+};
diff --git a/package.json b/package.json
index b5c9cb28..b9368e81 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,9 @@
     "plone",
     "react"
   ],
+  "--workspaces": [
+    "./chatbotlib/"
+  ],
   "repository": {
     "type": "git",
     "url": "git@github.com:eea/volto-chatbot.git"
@@ -69,6 +72,7 @@
     "cypress:open": "make cypress-open"
   },
   "dependencies": {
+    "@eeacms/chatbotlib": "file:.yalc/@eeacms/chatbotlib",
     "@microsoft/fetch-event-source": "2.0.1",
     "fast-json-patch": "3.1.1",
     "highlight.js": "11.10.0",
diff --git a/razzle.extend.js b/razzle.extend.js
index fdfb69e0..dcf6a8c8 100644
--- a/razzle.extend.js
+++ b/razzle.extend.js
@@ -3,28 +3,20 @@ const makeLoaderFinder = require('razzle-dev-utils/makeLoaderFinder');
 
 const modify = (config, { target, dev }, webpack) => {
   const markedPath = path.dirname(require.resolve('marked'));
-  const nodeFetch = path.dirname(require.resolve('node-fetch'));
+  const voltoChatbotPath = path.dirname(
+    require.resolve('@eeacms/volto-chatbot'),
+  );
+  const chatbotPath = path.resolve(`${voltoChatbotPath}/../chatbotlib`);
+
+  // config.resolve.alias['@eeacms/chatbotlib'] = chatbotPath;
 
   const babelLoaderFinder = makeLoaderFinder('babel-loader');
   const babelLoader = config.module.rules.find(babelLoaderFinder);
 
-  // config.module.rules.push({
-  //   test: /node_modules\/vfile\//, // \/lib\/index\.js
-  //   use: [
-  //     {
-  //       loader: 'imports-loader',
-  //       options: {
-  //         type: 'commonjs',
-  //         // imports: ['single process/browser process'],
-  //       },
-  //     },
-  //   ],
-  // });
-
   const { include } = babelLoader;
 
   include.push(markedPath);
-  // include.push(nodeFetch);
+  // include.push(chatbotPath);
 
   babelLoader.use[0].options.plugins = [
     ...(babelLoader.use[0].options.plugins || []),
diff --git a/src/ChatBlock/ChatBlockEdit.jsx b/src/ChatBlock/ChatBlockEdit.jsx
index b599dd74..9abf90c7 100644
--- a/src/ChatBlock/ChatBlockEdit.jsx
+++ b/src/ChatBlock/ChatBlockEdit.jsx
@@ -4,7 +4,7 @@ import { BlockDataForm, SidebarPortal } from '@plone/volto/components';
 
 import ChatBlockView from './ChatBlockView';
 import { ChatBlockSchema } from './schema';
-import withDanswerData from './withDanswerData';
+import { withOnyxData } from '@eeacms/chatbotlib';
 
 const ChatBlockEdit = (props) => {
   const { onChangeBlock, block, assistants } = props;
@@ -36,7 +36,7 @@ const ChatBlockEdit = (props) => {
   );
 };
 
-export default withDanswerData(() => [
+export default withOnyxData(() => [
   'assistants',
   superagent.get('/_da/persona?include_deleted=false').type('json'),
 ])(ChatBlockEdit);
diff --git a/src/ChatBlock/ChatBlockView.jsx b/src/ChatBlock/ChatBlockView.jsx
index c35bf2d6..386158da 100644
--- a/src/ChatBlock/ChatBlockView.jsx
+++ b/src/ChatBlock/ChatBlockView.jsx
@@ -1,10 +1,12 @@
 import React from 'react';
-import withDanswerData from './withDanswerData';
-import ChatWindow from './ChatWindow';
 import superagent from 'superagent';
+import { injectLazyLibs } from '@plone/volto/helpers/Loadable';
+
+import './style.less';
 
 function ChatBlockView(props) {
-  const { assistantData, data, isEditMode } = props;
+  const { assistantData, data, isEditMode, chatbotLib } = props;
+  const ChatWindow = chatbotLib.ChatWindow;
 
   return assistantData ? (
     <ChatWindow persona={assistantData} isEditMode={isEditMode} {...data} />
@@ -13,10 +15,23 @@ function ChatBlockView(props) {
   );
 }
 
-export default withDanswerData((props) => [
-  'assistantData',
-  typeof props.data?.assistant !== 'undefined'
-    ? superagent.get(`/_da/persona/${props.data.assistant}`).type('json')
-    : null,
-  props.data?.assistant,
-])(ChatBlockView);
+function WithOnyxDataChatBlockView(props) {
+  const { withOnyxData } = props.chatbotLib;
+
+  const Wrapped = React.useMemo(() => {
+    const wrapper = withOnyxData((props) => [
+      'assistantData',
+      typeof props.data?.assistant !== 'undefined'
+        ? superagent.get(`/_da/persona/${props.data.assistant}`).type('json')
+        : null,
+      props.data?.assistant,
+    ]);
+    return wrapper(ChatBlockView);
+  }, [withOnyxData]);
+
+  return <Wrapped {...props} />;
+}
+
+export default injectLazyLibs(['chatbotLib', 'rehypePrism'])(
+  WithOnyxDataChatBlockView,
+);
diff --git a/src/ChatBlock/ChatMessageBubble.test.jsx b/src/ChatBlock/ChatMessageBubble.test.jsx
index 0edd0730..c88b266f 100644
--- a/src/ChatBlock/ChatMessageBubble.test.jsx
+++ b/src/ChatBlock/ChatMessageBubble.test.jsx
@@ -5,7 +5,7 @@ import renderer from 'react-test-renderer';
 
 import '@testing-library/jest-dom/extend-expect';
 import { Provider } from 'react-intl-redux';
-import { ToolCall } from './ChatMessageBubble';
+import { ToolCall } from './../../chatbotlib/components/ChatMessageBubble';
 
 const mockStore = configureStore();
 
diff --git a/src/ChatBlock/Citation.test.jsx b/src/ChatBlock/Citation.test.jsx
index ece4aa62..5ce11fd3 100644
--- a/src/ChatBlock/Citation.test.jsx
+++ b/src/ChatBlock/Citation.test.jsx
@@ -5,7 +5,7 @@ import renderer from 'react-test-renderer';
 
 import '@testing-library/jest-dom/extend-expect';
 import { Provider } from 'react-intl-redux';
-import { Citation } from './Citation';
+import { Citation } from './../../chatbotlib/components/Citation';
 
 const mockStore = configureStore();
 
diff --git a/src/ChatBlock/EmptyState.test.jsx b/src/ChatBlock/EmptyState.test.jsx
index 9e15912f..215b88ae 100644
--- a/src/ChatBlock/EmptyState.test.jsx
+++ b/src/ChatBlock/EmptyState.test.jsx
@@ -5,7 +5,7 @@ import renderer from 'react-test-renderer';
 
 import '@testing-library/jest-dom/extend-expect';
 import { Provider } from 'react-intl-redux';
-import EmptyState from './EmptyState';
+import EmptyState from './../../chatbotlib/components/EmptyState';
 
 const mockStore = configureStore();
 
diff --git a/src/ChatBlock/Source.test.jsx b/src/ChatBlock/Source.test.jsx
index 2c152fd0..044be304 100644
--- a/src/ChatBlock/Source.test.jsx
+++ b/src/ChatBlock/Source.test.jsx
@@ -5,7 +5,7 @@ import renderer from 'react-test-renderer';
 
 import '@testing-library/jest-dom/extend-expect';
 import { Provider } from 'react-intl-redux';
-import { SourceDetails } from './Source';
+import { SourceDetails } from './../../chatbotlib/components/Source';
 
 const mockStore = configureStore();
 
diff --git a/src/ChatBlock/schema.js b/src/ChatBlock/schema.js
index 81d6a766..06d609d1 100644
--- a/src/ChatBlock/schema.js
+++ b/src/ChatBlock/schema.js
@@ -66,7 +66,7 @@ export function ChatBlockSchema({ assistants }) {
       },
       chatTitle: {
         title: 'Chat title',
-        description: 'Chat are saved with this title. Visible only in Danswer',
+        description: 'Chat are saved with this title. Visible only in Onyx',
         default: 'Online public chat',
       },
       height: {
diff --git a/src/ChatBlock/utils.js b/src/ChatBlock/utils.js
deleted file mode 100644
index 9f5826a5..00000000
--- a/src/ChatBlock/utils.js
+++ /dev/null
@@ -1,45 +0,0 @@
-export const EMAIL_REGEX = /([a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,})/g;
-
-// Convert text with email addresses to mailto links
-export function transformEmailsToLinks(text) {
-  return text.split(EMAIL_REGEX).map((part, index) => {
-    if (EMAIL_REGEX.test(part)) {
-      return (
-        <a key={index} href={`mailto:${part}`} className="text-email">
-          {part}
-        </a>
-      );
-    }
-    return part;
-  });
-}
-
-export const SVGIcon = ({ name, size, color, className, title }) => {
-  return (
-    <svg
-      xmlns={name?.attributes && name?.attributes?.xmlns}
-      width={size || '25'}
-      height={size || '25'}
-      viewBox={name?.attributes && name?.attributes?.viewBox}
-      fill={name?.attributes?.fill || 'currentColor'}
-      stroke={color || 'currentColor'}
-      strokeWidth={name?.attributes['stroke-width']}
-      strokeLinecap={name?.attributes['stroke-linecap']}
-      strokeLinejoin={name?.attributes[' stroke-linejoin']}
-      className={className ? `icon ${className}` : 'icon'}
-      dangerouslySetInnerHTML={{
-        __html: title ? `<title>${title}</title>${name.content}` : name.content,
-      }}
-    />
-  );
-};
-
-export function debounce(callable, click_signal) {
-  if (!click_signal.current) {
-    click_signal.current = true;
-    setTimeout(() => {
-      click_signal.current = null;
-    }, 1000);
-    callable();
-  }
-}
diff --git a/src/index.js b/src/index.js
index 959970ee..5619a173 100644
--- a/src/index.js
+++ b/src/index.js
@@ -21,8 +21,9 @@ const applyConfig = (config) => {
 
   config.settings.loadables = {
     ...config.settings.loadables,
+    chatbotLib: loadable.lib(() => import('@eeacms/chatbotlib')),
     rehypePrism: loadable.lib(() => import('rehype-prism-plus')),
-    remarkGfm: loadable.lib(() => import('remark-gfm')),
+    // remarkGfm: loadable.lib(() => import('remark-gfm')),
 
     // highlightJs: loadable.lib(() => import('highlight.js')),
     // marked: loadable.lib(() => import('marked')),
diff --git a/src/middleware.js b/src/middleware.js
index d109ef84..11fe0afb 100644
--- a/src/middleware.js
+++ b/src/middleware.js
@@ -8,7 +8,7 @@ let maxAge;
 const MSG_INVALID_CONFIGURATION =
   'Invalid configuration: missing DANSWER username and password';
 const MSG_FETCH_COOKIE = 'Error while fetching authentication cookie';
-const MSG_ERROR_REQUEST = 'Error in processing request to Danswer';
+const MSG_ERROR_REQUEST = 'Error in processing request to Onyx';
 
 async function get_login_cookie(username, password) {
   const url = `${process.env.DANSWER_URL}/api/auth/login`;
@@ -120,6 +120,6 @@ export default async function middleware(req, res, next) {
     // eslint-disable-next-line
     console.error(MSG_ERROR_REQUEST, error?.response?.text);
 
-    res.send({ error: `Danswer error: ${error?.response?.text || 'error'}` });
+    res.send({ error: `Onyx error: ${error?.response?.text || 'error'}` });
   }
 }
diff --git a/starterkit-demo/.gitignore b/starterkit-demo/.gitignore
new file mode 100644
index 00000000..7ceb59f8
--- /dev/null
+++ b/starterkit-demo/.gitignore
@@ -0,0 +1,25 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+.env
diff --git a/starterkit-demo/.nvmrc b/starterkit-demo/.nvmrc
new file mode 100644
index 00000000..209e3ef4
--- /dev/null
+++ b/starterkit-demo/.nvmrc
@@ -0,0 +1 @@
+20
diff --git a/src/ChatBlock/AutoResizeTextarea.jsx b/starterkit-demo/.yalc/@eeacms/chatbotlib/components/AutoResizeTextarea.jsx
similarity index 90%
rename from src/ChatBlock/AutoResizeTextarea.jsx
rename to starterkit-demo/.yalc/@eeacms/chatbotlib/components/AutoResizeTextarea.jsx
index 3a082fdd..eb882aca 100644
--- a/src/ChatBlock/AutoResizeTextarea.jsx
+++ b/starterkit-demo/.yalc/@eeacms/chatbotlib/components/AutoResizeTextarea.jsx
@@ -1,9 +1,9 @@
 import TextareaAutosize from 'react-textarea-autosize';
-import { Button } from 'semantic-ui-react';
+// import { Button } from 'semantic-ui-react';
 
 import React from 'react';
 
-import { SVGIcon } from './utils';
+import { default as SVGIcon } from './SVGIcon';
 import SendIcon from './../icons/send.svg';
 
 export default React.forwardRef(function AutoResizeTextarea(props, ref) {
@@ -35,7 +35,7 @@ export default React.forwardRef(function AutoResizeTextarea(props, ref) {
         ref={ref}
       />
 
-      <Button
+      <button
         className="submit-btn"
         disabled={isStreaming}
         type="submit"
@@ -50,7 +50,7 @@ export default React.forwardRef(function AutoResizeTextarea(props, ref) {
         <div className="btn-icon">
           <SVGIcon name={SendIcon} size="28" />
         </div>
-      </Button>
+      </button>
     </>
   );
 });
diff --git a/src/ChatBlock/ChatMessageBubble.jsx b/starterkit-demo/.yalc/@eeacms/chatbotlib/components/ChatMessageBubble.jsx
similarity index 96%
rename from src/ChatBlock/ChatMessageBubble.jsx
rename to starterkit-demo/.yalc/@eeacms/chatbotlib/components/ChatMessageBubble.jsx
index 825d4f95..a937e443 100644
--- a/src/ChatBlock/ChatMessageBubble.jsx
+++ b/starterkit-demo/.yalc/@eeacms/chatbotlib/components/ChatMessageBubble.jsx
@@ -1,16 +1,16 @@
-import loadable from '@loadable/component';
 import React from 'react';
 
 import { Citation } from './Citation';
 import { SourceDetails } from './Source';
-import { SVGIcon, transformEmailsToLinks } from './utils';
+import { transformEmailsToLinks } from '../utils';
+import { default as SVGIcon } from './SVGIcon';
 
 import BotIcon from './../icons/bot.svg';
 import UserIcon from './../icons/user.svg';
 
 const CITATION_MATCH = /\[\d+\](?![[(\])])/gm;
 
-const Markdown = loadable(() => import('react-markdown'));
+const Markdown = React.lazy(() => import('react-markdown'));
 
 const components = (message) => {
   return {
diff --git a/src/ChatBlock/ChatWindow.jsx b/starterkit-demo/.yalc/@eeacms/chatbotlib/components/ChatWindow.jsx
similarity index 88%
rename from src/ChatBlock/ChatWindow.jsx
rename to starterkit-demo/.yalc/@eeacms/chatbotlib/components/ChatWindow.jsx
index d7e31798..fefa85aa 100644
--- a/src/ChatBlock/ChatWindow.jsx
+++ b/starterkit-demo/.yalc/@eeacms/chatbotlib/components/ChatWindow.jsx
@@ -1,14 +1,28 @@
-import { injectLazyLibs } from '@plone/volto/helpers/Loadable';
 import React from 'react';
-import { Button, Form, Icon, Segment } from 'semantic-ui-react';
+// import { Button, Form, Icon, Segment } from 'semantic-ui-react';
 
+import { useScrollonStream } from '../hooks/lib';
+import { default as injectLazyLibs } from '../hooks/lazyLibs';
+import { useBackendChat } from './../hooks/useBackendChat';
 import AutoResizeTextarea from './AutoResizeTextarea';
 import { ChatMessageBubble } from './ChatMessageBubble';
 import EmptyState from './EmptyState';
-import { useScrollonStream } from './lib';
-import { useBackendChat } from './useBackendChat';
 
-import './style.less';
+function Button(props) {
+  return <button {...props} />;
+}
+
+function Form(props) {
+  return <div {...props} />;
+}
+
+function Icon(props) {
+  return <div {...props}></div>;
+}
+
+function Segment(props) {
+  return <div {...props}></div>;
+}
 
 function ChatWindow({
   persona,
diff --git a/starterkit-demo/.yalc/@eeacms/chatbotlib/components/Citation.jsx b/starterkit-demo/.yalc/@eeacms/chatbotlib/components/Citation.jsx
new file mode 100644
index 00000000..1b159bc7
--- /dev/null
+++ b/starterkit-demo/.yalc/@eeacms/chatbotlib/components/Citation.jsx
@@ -0,0 +1,71 @@
+// import { Popup } from 'semantic-ui-react';
+
+function Popup(props) {
+  return <div {...props} />;
+}
+
+export function Citation({ link, index, value, message }) {
+  const isLinkType = value?.toString().startsWith('[');
+
+  const innerText = isLinkType
+    ? value?.toString().split('[')[1].split(']')[0]
+    : index;
+  const document = isLinkType
+    ? message.documents[(parseInt(innerText) - 1).toString()]
+    : message.documents[value];
+  // console.log('dd', document, message.documents, value, isLinkType);
+
+  const handleClick = (event) => {
+    if (link) {
+      event.preventDefault();
+      window.open(link, '_blank');
+    }
+  };
+
+  const content = link ? (
+    <div>
+      <p>
+        <a href={link} tabIndex="-1" onClick={handleClick}>
+          {link}
+        </a>
+      </p>
+
+      {document?.match_highlights?.map((text, i) =>
+        text ? (
+          <p key={i} dangerouslySetInnerHTML={{ __html: `...${text}...` }} />
+        ) : null,
+      )}
+    </div>
+  ) : (
+    <div>This doc doesn't have a link.</div>
+  );
+
+  const popupContent = isLinkType ? (
+    content
+  ) : (
+    <div>
+      {document?.match_highlights?.map((text, i) => (
+        <div key={i} dangerouslySetInnerHTML={{ __html: text }} />
+      ))}
+    </div>
+  );
+
+  return (
+    <>
+      {link ? (
+        <a href={link} tabIndex="-1" onClick={handleClick}>
+          <span className="chat-citation">{innerText}</span>
+        </a>
+      ) : (
+        <Popup
+          on="click"
+          wide="very"
+          content={popupContent}
+          header={!isLinkType ? document.semantic_identifier : undefined}
+          trigger={<span className="chat-citation">{innerText}</span>}
+          popper={{ id: 'chat-citation-popup' }}
+        />
+      )}
+    </>
+  );
+}
diff --git a/starterkit-demo/.yalc/@eeacms/chatbotlib/components/EmptyState.jsx b/starterkit-demo/.yalc/@eeacms/chatbotlib/components/EmptyState.jsx
new file mode 100644
index 00000000..d074ab37
--- /dev/null
+++ b/starterkit-demo/.yalc/@eeacms/chatbotlib/components/EmptyState.jsx
@@ -0,0 +1,57 @@
+// import { Button } from 'semantic-ui-react';
+import { debounce } from './../utils';
+
+function Button(props) {
+  return <button {...props} />;
+}
+
+function StarterMessage({ msg, onClick }) {
+  return (
+    <Button
+      onClick={onClick}
+      onKeyDown={onClick}
+      role="button"
+      tabIndex={-1}
+      className="starter-message"
+    >
+      <span className="starter-message-title">{msg.name}</span>
+      <div className="starter-message-desc">{msg.description}</div>
+    </Button>
+  );
+}
+
+let click_signal = { current: null };
+
+export default function EmptyState(props) {
+  const {
+    persona,
+    onChoice,
+    showAssistantTitle = true,
+    showAssistantPrompts = true,
+    showAssistantDescription = true,
+  } = props;
+
+  return (
+    <div className="">
+      {showAssistantTitle && <h2>{persona.name}</h2>}
+      {showAssistantDescription && <p>{persona.description}</p>}
+
+      <div className="starter-messages-container">
+        {showAssistantPrompts &&
+          persona.starter_messages?.map((msg) => (
+            <StarterMessage
+              key={msg.name}
+              msg={msg}
+              onClick={() =>
+                debounce(
+                  () =>
+                    onChoice(msg.message || `${msg.name}\n${msg.description}`),
+                  click_signal,
+                )
+              }
+            />
+          ))}
+      </div>
+    </div>
+  );
+}
diff --git a/starterkit-demo/.yalc/@eeacms/chatbotlib/components/SVGIcon.jsx b/starterkit-demo/.yalc/@eeacms/chatbotlib/components/SVGIcon.jsx
new file mode 100644
index 00000000..a8da6da2
--- /dev/null
+++ b/starterkit-demo/.yalc/@eeacms/chatbotlib/components/SVGIcon.jsx
@@ -0,0 +1,19 @@
+export default function SVGIcon({ name, size, color, className, title }) {
+  return (
+    <svg
+      xmlns={name?.attributes && name?.attributes?.xmlns}
+      width={size || '25'}
+      height={size || '25'}
+      viewBox={name?.attributes && name?.attributes?.viewBox}
+      fill={name?.attributes?.fill || 'currentColor'}
+      stroke={color || 'currentColor'}
+      strokeWidth={name?.attributes?.['stroke-width']}
+      strokeLinecap={name?.attributes?.['stroke-linecap']}
+      strokeLinejoin={name?.attributes?.[' stroke-linejoin']}
+      className={className ? `icon ${className}` : 'icon'}
+      dangerouslySetInnerHTML={{
+        __html: title ? `<title>${title}</title>${name.content}` : name.content,
+      }}
+    />
+  );
+}
diff --git a/starterkit-demo/.yalc/@eeacms/chatbotlib/components/Source.jsx b/starterkit-demo/.yalc/@eeacms/chatbotlib/components/Source.jsx
new file mode 100644
index 00000000..13fb3e84
--- /dev/null
+++ b/starterkit-demo/.yalc/@eeacms/chatbotlib/components/Source.jsx
@@ -0,0 +1,71 @@
+// import { Popup } from 'semantic-ui-react';
+import { DateTime } from 'luxon';
+import { default as SVGIcon } from './SVGIcon';
+
+import FileIcon from './../icons/file.svg';
+import GlobeIcon from './../icons/globe.svg';
+
+function Popup(props) {
+  return <div {...props} />;
+}
+
+export const SourceDetails = ({ source, index }) => {
+  const {
+    link,
+    blurb,
+    updated_at,
+    source_type,
+    // match_highlights,
+    semantic_identifier = 'untitled document',
+  } = source || {};
+  const parsedDate = updated_at ? DateTime.fromISO(updated_at) : null;
+  const relativeTime = parsedDate?.toRelative();
+  const isLinkType = source_type === 'web';
+  const isDocumentType = source_type === 'file';
+
+  const renderIcon = () => {
+    if (isLinkType) {
+      return <SVGIcon name={GlobeIcon} size="18" alt="Web icon" />;
+    }
+    if (isDocumentType) {
+      return <SVGIcon name={FileIcon} size="18" alt="File icon" />;
+    }
+    return null;
+  };
+
+  return (
+    <div className="source">
+      <div className="source-header">
+        {isLinkType ? (
+          <a href={link} rel="noreferrer" target="_blank">
+            <span className="chat-citation">{index}</span>
+            <div className="source-title">{semantic_identifier}</div>
+            {renderIcon()}
+          </a>
+        ) : (
+          <>
+            <Popup
+              on="click"
+              wide="very"
+              content="This doc doesn't have a link."
+              trigger={<span className="chat-citation">{index}</span>}
+              popper={{ id: 'chat-citation-popup' }}
+            />
+            <div className="source-title">{semantic_identifier}</div>
+            {renderIcon()}
+          </>
+        )}
+      </div>
+      {updated_at && (
+        <div className="source-date">
+          <span>{relativeTime}</span>
+        </div>
+      )}
+      {blurb && (
+        <div className="source-desc">
+          <span>{blurb}</span>
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/starterkit-demo/.yalc/@eeacms/chatbotlib/hooks/lazyLibs.jsx b/starterkit-demo/.yalc/@eeacms/chatbotlib/hooks/lazyLibs.jsx
new file mode 100644
index 00000000..cb0e7a14
--- /dev/null
+++ b/starterkit-demo/.yalc/@eeacms/chatbotlib/hooks/lazyLibs.jsx
@@ -0,0 +1,35 @@
+import React, { useEffect, useState } from 'react';
+const libraryMapping = {
+  rehypePrism: () => import('rehype-prism-plus'),
+  remarkGfm: () => import('remark-gfm'),
+};
+
+const injectLazyLibs = (libraryNames) => (WrappedComponent) => {
+  return (props) => {
+    const [libraries, setLibraries] = useState({});
+    const [loading, setLoading] = useState(true);
+
+    useEffect(() => {
+      const loadLibraries = async () => {
+        const libs = {};
+        for (const name of libraryNames) {
+          if (libraryMapping[name]) {
+            libs[name] = await libraryMapping[name]();
+          }
+        }
+        setLibraries(libs);
+        setLoading(false);
+      };
+
+      loadLibraries();
+    }, []); // libraryNames
+
+    if (loading) {
+      return <div>Loading libraries...</div>;
+    }
+
+    return <WrappedComponent {...props} {...libraries} />;
+  };
+};
+
+export default injectLazyLibs;
diff --git a/starterkit-demo/.yalc/@eeacms/chatbotlib/hooks/lib.js b/starterkit-demo/.yalc/@eeacms/chatbotlib/hooks/lib.js
new file mode 100644
index 00000000..7c63be25
--- /dev/null
+++ b/starterkit-demo/.yalc/@eeacms/chatbotlib/hooks/lib.js
@@ -0,0 +1,431 @@
+import { useRef, useEffect } from 'react';
+
+export const delay = (ms) => {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+};
+
+export async function createChatSession(personaId, description) {
+  const createChatSessionResponse = await fetch(
+    '/_da/chat/create-chat-session',
+    {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        persona_id: personaId,
+        description,
+      }),
+    },
+  );
+  if (!createChatSessionResponse.ok) {
+    //eslint-disable-next-line no-console
+    console.log(
+      `Failed to create chat session - ${createChatSessionResponse.status}`,
+    );
+    throw Error('Failed to create chat session');
+  }
+  const chatSessionResponseJson = await createChatSessionResponse.json();
+  return chatSessionResponseJson.chat_session_id;
+}
+
+export function updateParentChildren(
+  message,
+  completeMessageMap,
+  setAsLatestChild,
+) {
+  // NOTE: updates the `completeMessageMap` in place
+  const parentMessage = message.parentMessageId
+    ? completeMessageMap.get(message.parentMessageId)
+    : null;
+  if (parentMessage) {
+    if (setAsLatestChild) {
+      parentMessage.latestChildMessageId = message.messageId;
+    }
+
+    const parentChildMessages = parentMessage.childrenMessageIds || [];
+    if (!parentChildMessages.includes(message.messageId)) {
+      parentChildMessages.push(message.messageId);
+    }
+    parentMessage.childrenMessageIds = parentChildMessages;
+  }
+}
+
+export function removeMessage(messageId, completeMessageMap) {
+  const messageToRemove = completeMessageMap.get(messageId);
+  if (!messageToRemove) {
+    return;
+  }
+
+  const parentMessage = messageToRemove.parentMessageId
+    ? completeMessageMap.get(messageToRemove.parentMessageId)
+    : null;
+  if (parentMessage) {
+    if (parentMessage.latestChildMessageId === messageId) {
+      parentMessage.latestChildMessageId = null;
+    }
+    const currChildMessage = parentMessage.childrenMessageIds || [];
+    const newChildMessage = currChildMessage.filter((id) => id !== messageId);
+    parentMessage.childrenMessageIds = newChildMessage;
+  }
+
+  completeMessageMap.delete(messageId);
+}
+
+export function buildLatestMessageChain(messageMap) {
+  const rootMessage = Array.from(messageMap.values()).find(
+    (message) => message.parentMessageId === null,
+  );
+
+  let finalMessageList = [];
+
+  if (rootMessage) {
+    let currMessage = rootMessage;
+    while (currMessage) {
+      finalMessageList.push(currMessage);
+      const childMessageNumber = currMessage.latestChildMessageId;
+      if (childMessageNumber && messageMap.has(childMessageNumber)) {
+        currMessage = messageMap.get(childMessageNumber);
+      } else {
+        currMessage = null;
+      }
+    }
+  }
+
+  // remove system message
+  if (finalMessageList.length > 0 && finalMessageList[0].type === 'system') {
+    finalMessageList = finalMessageList.slice(1);
+  }
+  return finalMessageList; // .concat(additionalMessagesOnMainline);
+}
+
+export async function* sendMessage({
+  message,
+  fileDescriptors,
+  parentMessageId,
+  chatSessionId,
+  promptId,
+  filters,
+  selectedDocumentIds,
+  queryOverride,
+  forceSearch,
+  modelProvider,
+  modelVersion,
+  temperature,
+  systemPromptOverride,
+  useExistingUserMessage,
+  alternateAssistantId,
+}) {
+  const documentsAreSelected =
+    selectedDocumentIds && selectedDocumentIds.length > 0;
+
+  const sendMessageResponse = await fetch('/_da/chat/send-message', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({
+      alternate_assistant_id: alternateAssistantId,
+      chat_session_id: chatSessionId,
+      parent_message_id: parentMessageId,
+      message: message,
+      prompt_id: promptId,
+      search_doc_ids: documentsAreSelected ? selectedDocumentIds : null,
+      file_descriptors: fileDescriptors,
+      retrieval_options: !documentsAreSelected
+        ? {
+            run_search:
+              promptId === null ||
+              promptId === undefined ||
+              queryOverride ||
+              forceSearch
+                ? 'always'
+                : 'auto',
+            real_time: true,
+            filters: filters,
+          }
+        : null,
+      query_override: queryOverride,
+      prompt_override: systemPromptOverride
+        ? {
+            system_prompt: systemPromptOverride,
+          }
+        : null,
+      llm_override:
+        temperature || modelVersion
+          ? {
+              temperature,
+              model_provider: modelProvider,
+              model_version: modelVersion,
+            }
+          : null,
+      use_existing_user_message: useExistingUserMessage,
+    }),
+  });
+  if (!sendMessageResponse.ok) {
+    const errorJson = await sendMessageResponse.json();
+    const errorMsg = errorJson.message || errorJson.detail || '';
+    throw Error(`Failed to send message - ${errorMsg}`);
+  }
+
+  yield* handleStream(sendMessageResponse);
+}
+
+const processSingleChunk = (chunk, currPartialChunk) => {
+  const completeChunk = (currPartialChunk || '') + chunk;
+  try {
+    // every complete chunk should be valid JSON
+    const chunkJson = JSON.parse(completeChunk);
+    return [chunkJson, null];
+  } catch (err) {
+    // if it's not valid JSON, then it's probably an incomplete chunk
+    return [null, completeChunk];
+  }
+};
+
+export const processRawChunkString = (rawChunkString, previousPartialChunk) => {
+  /* This is required because, in practice, we see that nginx does not send over
+  each chunk one at a time even with buffering turned off. Instead,
+  chunks are sometimes in batches or are sometimes incomplete */
+
+  if (!rawChunkString) {
+    return [[], null];
+  }
+
+  const chunkSections = rawChunkString
+    .split('\n')
+    .filter((chunk) => chunk.length > 0);
+  let parsedChunkSections = [];
+  let currPartialChunk = previousPartialChunk;
+
+  chunkSections.forEach((chunk) => {
+    const [processedChunk, partialChunk] = processSingleChunk(
+      chunk,
+      currPartialChunk,
+    );
+    if (processedChunk) {
+      parsedChunkSections.push(processedChunk);
+      currPartialChunk = null;
+    } else {
+      currPartialChunk = partialChunk;
+    }
+  });
+
+  return [parsedChunkSections, currPartialChunk];
+};
+
+export async function* handleStream(streamingResponse) {
+  const reader = streamingResponse.body?.getReader();
+  const decoder = new TextDecoder('utf-8');
+
+  let previousPartialChunk = null;
+  while (true) {
+    const rawChunk = await reader?.read();
+    if (!rawChunk) {
+      throw new Error('Unable to process chunk');
+    }
+    const { done, value } = rawChunk;
+    if (done) {
+      break;
+    }
+
+    const [completedChunks, partialChunk] = processRawChunkString(
+      decoder.decode(value, { stream: true }),
+      previousPartialChunk,
+    );
+    if (!completedChunks.length && !partialChunk) {
+      break;
+    }
+    previousPartialChunk = partialChunk;
+
+    yield await Promise.resolve(completedChunks);
+  }
+}
+
+export class CurrentMessageFIFO {
+  stack = [];
+  isComplete = false;
+  error = null;
+
+  push(packetBunch) {
+    this.stack.push(packetBunch);
+  }
+
+  nextPacket() {
+    return this.stack.shift();
+  }
+
+  isEmpty() {
+    return this.stack.length === 0;
+  }
+}
+
+export async function fetchRelatedQuestions(message, qgenAsistantId) {
+  const { query, answer } = message;
+  const chatSessionId = await createChatSession(qgenAsistantId, `Q: ${query}`);
+
+  const params = {
+    message: `Question: ${query}\nAnswer:\n${answer}`,
+    alternateAssistantId: qgenAsistantId,
+    fileDescriptors: [],
+    parentMessageId: null,
+    chatSessionId,
+    promptId: 0,
+    filters: {},
+    selectedDocumentIds: [],
+  };
+  const promise = updateCurrentMessageFIFO(params, {}, () => {});
+
+  let result = '';
+
+  const stack = new CurrentMessageFIFO();
+  for await (const bit of promise) {
+    if (bit.error) {
+      stack.error = bit.error;
+    } else if (bit.isComplete) {
+      stack.isComplete = true;
+    } else {
+      stack.push(bit.packet);
+    }
+
+    if (stack.isComplete || stack.isEmpty()) {
+      break;
+    }
+
+    await delay(2);
+
+    if (!stack.isEmpty()) {
+      const packet = stack.nextPacket();
+
+      if (packet) {
+        if (Object.hasOwn(packet, 'answer_piece')) {
+          result += packet.answer_piece;
+        }
+      }
+    }
+  }
+
+  return result;
+}
+
+export async function* updateCurrentMessageFIFO(
+  params,
+  isCancelledRef,
+  setIsCancelled,
+) {
+  const promise = sendMessage(params);
+
+  try {
+    for await (const packetBunch of promise) {
+      for (const packet of packetBunch) {
+        yield { packet };
+      }
+
+      if (isCancelledRef.current) {
+        setIsCancelled(false);
+        break;
+      }
+    }
+  } catch (error) {
+    yield { error: String(error) };
+  } finally {
+    yield { isComplete: true };
+  }
+}
+
+export async function useScrollonStream({
+  isStreaming,
+  scrollableDivRef,
+  scrollDist,
+  endDivRef,
+  distance,
+  debounce,
+}) {
+  const preventScrollInterference = useRef(false);
+  const preventScroll = useRef(false);
+  const blockActionRef = useRef(false);
+  const previousScroll = useRef(0);
+
+  useEffect(() => {
+    if (isStreaming && scrollableDivRef && scrollableDivRef.current) {
+      let newHeight = scrollableDivRef.current?.scrollTop;
+      const heightDifference = newHeight - previousScroll.current;
+      previousScroll.current = newHeight;
+
+      // Prevent streaming scroll
+      if (heightDifference < 0 && !preventScroll.current) {
+        scrollableDivRef.current.style.scrollBehavior = 'auto';
+        // scrollableDivRef.current.scrollTop = scrollableDivRef.current.scrollTop;
+        scrollableDivRef.current.style.scrollBehavior = 'smooth';
+        preventScrollInterference.current = true;
+        preventScroll.current = true;
+
+        setTimeout(() => {
+          preventScrollInterference.current = false;
+        }, 2000);
+        setTimeout(() => {
+          preventScroll.current = false;
+        }, 10000);
+      }
+
+      // Ensure can scroll if scroll down
+      else if (!preventScrollInterference.current) {
+        preventScroll.current = false;
+      }
+      if (
+        scrollDist.current < distance &&
+        !blockActionRef.current &&
+        !preventScroll.current &&
+        endDivRef &&
+        endDivRef.current
+      ) {
+        // catch up if necessary!
+        const scrollAmount = scrollDist.current + 10000;
+        if (scrollDist.current > 140) {
+          endDivRef.current.scrollIntoView();
+        } else {
+          blockActionRef.current = true;
+
+          scrollableDivRef?.current &&
+            scrollableDivRef.current.scrollBy({
+              left: 0,
+              top: Math.max(0, scrollAmount),
+              behavior: 'smooth',
+            });
+
+          setTimeout(() => {
+            blockActionRef.current = false;
+          }, debounce);
+        }
+      }
+    }
+  });
+
+  // scroll on end of stream if within distance
+  useEffect(() => {
+    if (scrollableDivRef?.current && !isStreaming) {
+      if (scrollDist.current < distance) {
+        scrollableDivRef?.current &&
+          scrollableDivRef.current.scrollBy({
+            left: 0,
+            top: Math.max(scrollDist.current + 600, 0),
+            behavior: 'smooth',
+          });
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isStreaming]);
+}
+
+export function getLastSuccessfulMessageId(messageHistory) {
+  const lastSuccessfulMessage = messageHistory
+    .slice()
+    .reverse()
+    .find(
+      (message) =>
+        message.type === 'assistant' &&
+        message.messageId !== -1 &&
+        message.messageId !== null,
+    );
+  return lastSuccessfulMessage ? lastSuccessfulMessage?.messageId : null;
+}
diff --git a/starterkit-demo/.yalc/@eeacms/chatbotlib/hooks/useBackendChat.js b/starterkit-demo/.yalc/@eeacms/chatbotlib/hooks/useBackendChat.js
new file mode 100644
index 00000000..c68a772c
--- /dev/null
+++ b/starterkit-demo/.yalc/@eeacms/chatbotlib/hooks/useBackendChat.js
@@ -0,0 +1,459 @@
+import React, { useState } from 'react';
+import {
+  buildLatestMessageChain,
+  createChatSession,
+  CurrentMessageFIFO,
+  delay,
+  fetchRelatedQuestions,
+  getLastSuccessfulMessageId,
+  removeMessage,
+  updateCurrentMessageFIFO,
+  updateParentChildren,
+} from './lib';
+
+const TEMP_USER_MESSAGE_ID = -1;
+const TEMP_ASSISTANT_MESSAGE_ID = -2;
+const SYSTEM_MESSAGE_ID = -3;
+
+export const RetrievalType = {
+  None: 'none',
+  Search: 'search',
+  // SelectedDocs: 'selectedDocs',
+};
+
+export const ChatFileType = {
+  IMAGE: 'image',
+  DOCUMENT: 'document',
+  PLAIN_TEXT: 'plain_text',
+};
+
+function upsertToCompleteMessageMap({
+  chatSessionId,
+  completeMessageDetail,
+  completeMessageMapOverride,
+  makeLatestChildMessage = false,
+  messages,
+  replacementsMap = null,
+  setCompleteMessageDetail,
+}) {
+  // deep copy
+  const frozenCompleteMessageMap =
+    completeMessageMapOverride || completeMessageDetail.messageMap;
+
+  // eslint is old, structuredClone is builtin
+  // eslint-disable-next-line no-undef
+  const newCompleteMessageMap = structuredClone(frozenCompleteMessageMap);
+
+  if (newCompleteMessageMap.size === 0) {
+    const systemMessageId = messages[0].parentMessageId || SYSTEM_MESSAGE_ID;
+    const firstMessageId = messages[0].messageId;
+    const dummySystemMessage = {
+      messageId: systemMessageId,
+      message: '',
+      type: 'system',
+      files: [],
+      toolCalls: [],
+      parentMessageId: null,
+      childrenMessageIds: [firstMessageId],
+      latestChildMessageId: firstMessageId,
+    };
+    newCompleteMessageMap.set(dummySystemMessage.messageId, dummySystemMessage);
+    messages[0].parentMessageId = systemMessageId;
+  }
+  messages.forEach((message) => {
+    const idToReplace = replacementsMap?.get(message.messageId);
+    if (idToReplace) {
+      removeMessage(idToReplace, newCompleteMessageMap);
+    }
+
+    // update childrenMessageIds for the parent
+    if (
+      !newCompleteMessageMap.has(message.messageId) &&
+      message.parentMessageId !== null
+    ) {
+      updateParentChildren(message, newCompleteMessageMap, true);
+    }
+    newCompleteMessageMap.set(message.messageId, message);
+  });
+
+  // if specified, make these new message the latest of the current message chain
+  if (makeLatestChildMessage) {
+    const currentMessageChain = buildLatestMessageChain(
+      frozenCompleteMessageMap,
+    );
+    const latestMessage = currentMessageChain[currentMessageChain.length - 1];
+    if (latestMessage) {
+      newCompleteMessageMap.get(latestMessage.messageId).latestChildMessageId =
+        messages[0].messageId;
+    }
+  }
+  const newCompleteMessageDetail = {
+    sessionId: chatSessionId || completeMessageDetail.sessionId,
+    messageMap: newCompleteMessageMap,
+  };
+  setCompleteMessageDetail(newCompleteMessageDetail);
+  return newCompleteMessageDetail;
+}
+
+class SubmitHandler {
+  constructor({
+    persona,
+    setIsStreaming,
+    isCancelledRef,
+    setIsCancelled,
+    messageHistory,
+    completeMessageDetail,
+    currChatSessionId,
+    setCurrChatSessionId,
+    setCompleteMessageDetail,
+    chatTitle,
+    qgenAsistantId,
+    enableQgen,
+  }) {
+    this.persona = persona;
+    this.chatTitle = chatTitle;
+    this.setIsStreaming = setIsStreaming;
+    this.isCancelledRef = isCancelledRef;
+    this.setIsCancelled = setIsCancelled;
+    this.messageHistory = messageHistory;
+    this.completeMessageDetail = completeMessageDetail;
+    this.currChatSessionId = currChatSessionId;
+    this.setCurrChatSessionId = setCurrChatSessionId;
+    this.setCompleteMessageDetail = setCompleteMessageDetail;
+    this.qgenAsistantId = qgenAsistantId;
+    this.enableQgen = enableQgen;
+
+    this.onSubmit = this.onSubmit.bind(this);
+  }
+
+  async onSubmit({
+    messageIdToResend,
+    messageOverride,
+    queryOverride,
+    forceSearch,
+    isSeededChat,
+    message,
+  } = {}) {
+    if (this.currChatSessionId === null) {
+      this.currChatSessionId = await createChatSession(
+        this.persona.id,
+        this.chatTitle,
+      );
+      this.setCurrChatSessionId(this.currChatSessionId);
+    }
+
+    let newCompleteMessageDetail = {};
+
+    const messageToResend = this.messageHistory.find(
+      (message) => message.messageId === messageIdToResend,
+    );
+
+    const messageMap = this.completeMessageDetail.messageMap;
+    const messageToResendParent =
+      messageToResend?.parentMessageId !== null &&
+      messageToResend?.parentMessageId !== undefined
+        ? messageMap.get(messageToResend.parentMessageId)
+        : null;
+    const messageToResendIndex = messageToResend
+      ? this.messageHistory.indexOf(messageToResend)
+      : null;
+    if (!messageToResend && messageIdToResend !== undefined) {
+      // eslint-disable-next-line no-console
+      console.log({
+        message:
+          'Failed to re-send message - please refresh the page and try again.',
+        type: 'error',
+      });
+      return;
+    }
+
+    let currMessage = messageToResend ? messageToResend.message : message;
+    if (messageOverride) {
+      currMessage = messageOverride;
+    }
+    const currMessageHistory =
+      messageToResendIndex !== null
+        ? this.messageHistory.slice(0, messageToResendIndex)
+        : this.messageHistory;
+    let parentMessage =
+      messageToResendParent ||
+      (currMessageHistory.length > 0
+        ? currMessageHistory[currMessageHistory.length - 1]
+        : null) ||
+      (messageMap.size === 1 ? Array.from(messageMap.values())[0] : null);
+
+    // if we're resending, set the parent's child to null
+    // we will use tempMessages until the regenerated message is complete
+    const messageUpdates = [
+      {
+        messageId: TEMP_USER_MESSAGE_ID,
+        message: currMessage,
+        type: 'user',
+        files: [], // currentMessageFiles,
+        toolCalls: [],
+        parentMessageId: parentMessage?.messageId || null,
+      },
+    ];
+    if (parentMessage) {
+      messageUpdates.push({
+        ...parentMessage,
+        childrenMessageIds: (parentMessage.childrenMessageIds || []).concat([
+          TEMP_USER_MESSAGE_ID,
+        ]),
+        latestChildMessageId: TEMP_USER_MESSAGE_ID,
+      });
+    }
+
+    const info = {
+      messages: messageUpdates,
+      chatSessionId: this.currChatSessionId,
+      completeMessageDetail: this.completeMessageDetail,
+      setCompleteMessageDetail: this.setCompleteMessageDetail,
+    };
+
+    const _res = upsertToCompleteMessageMap(info);
+    const { messageMap: frozenMessageMap, sessionId: frozenSessionId } = _res;
+
+    // on initial message send, we insert a dummy system message
+    // set this as the parent here if no parent is set
+    if (!parentMessage && frozenMessageMap.size === 2) {
+      parentMessage = frozenMessageMap.get(SYSTEM_MESSAGE_ID) || null;
+    }
+
+    const currentAssistantId = this.persona.id;
+
+    this.setIsStreaming(true);
+
+    let answer = '';
+    let query = null;
+    let retrievalType = RetrievalType.None;
+    let documents = []; // selectedDocuments;
+    let aiMessageImages = null;
+    let error = null;
+    let finalMessage = null;
+    let toolCalls = [];
+
+    const glsm = getLastSuccessfulMessageId;
+    const lastSuccessfulMessageId = glsm(currMessageHistory);
+
+    const stack = new CurrentMessageFIFO();
+    // here is the problem
+    const params = {
+      message: currMessage,
+      alternateAssistantId: currentAssistantId,
+      fileDescriptors: [],
+      parentMessageId: lastSuccessfulMessageId,
+      chatSessionId: this.currChatSessionId,
+      promptId: 0,
+      filters: {},
+      selectedDocumentIds: [],
+      queryOverride,
+      forceSearch,
+      useExistingUserMessage: isSeededChat,
+    };
+    const promise = updateCurrentMessageFIFO(
+      params,
+      this.isCancelledRef,
+      this.setIsCancelled,
+    );
+
+    await delay(50);
+
+    for await (const bit of promise) {
+      if (bit.error) {
+        stack.error = bit.error;
+      } else if (bit.isComplete) {
+        stack.isComplete = true;
+      } else {
+        stack.push(bit.packet);
+      }
+
+      if (stack.isComplete || stack.isEmpty()) {
+        break;
+      }
+
+      await delay(2);
+
+      if (!stack.isEmpty()) {
+        const packet = stack.nextPacket();
+
+        if (packet) {
+          if (Object.hasOwn(packet, 'answer_piece')) {
+            answer += packet.answer_piece;
+          } else if (Object.hasOwn(packet, 'top_documents')) {
+            documents = packet.top_documents;
+            query = packet.rephrased_query;
+            retrievalType = RetrievalType.Search;
+            if (documents && documents.length > 0) {
+              // point to the latest message (we don't know the messageId yet, which is why
+              // we have to use -1)
+              // setSelectedMessageForDocDisplay(TEMP_USER_MESSAGE_ID);
+            }
+          } else if (Object.hasOwn(packet, 'tool_name')) {
+            toolCalls = [
+              {
+                tool_name: packet.tool_name,
+                tool_args: packet.tool_args,
+                tool_result: packet.tool_result,
+              },
+            ];
+          } else if (Object.hasOwn(packet, 'file_ids')) {
+            aiMessageImages = packet.file_ids.map((fileId) => {
+              return {
+                id: fileId,
+                type: ChatFileType.IMAGE,
+              };
+            });
+          } else if (Object.hasOwn(packet, 'error')) {
+            error = packet.error;
+          } else if (Object.hasOwn(packet, 'message_id')) {
+            finalMessage = packet;
+          }
+
+          const newUserMessageId =
+            finalMessage?.parent_message || TEMP_USER_MESSAGE_ID;
+          const newAssistantMessageId =
+            finalMessage?.message_id || TEMP_ASSISTANT_MESSAGE_ID;
+
+          const localMessages = [
+            {
+              messageId: newUserMessageId,
+              message: currMessage,
+              type: 'user',
+              files: [],
+              toolCalls: [],
+              parentMessageId: parentMessage?.messageId || null,
+              childrenMessageIds: [newAssistantMessageId],
+              latestChildMessageId: newAssistantMessageId,
+            },
+            {
+              messageId: newAssistantMessageId,
+              message: error || answer,
+              type: error ? 'error' : 'assistant',
+              retrievalType,
+              query: finalMessage?.rephrased_query || query,
+              documents: finalMessage?.context_docs?.top_documents || documents,
+              citations: finalMessage?.citations || {},
+              files: finalMessage?.files || aiMessageImages || [],
+              toolCalls: finalMessage?.tool_calls || toolCalls,
+              parentMessageId: newUserMessageId,
+              alternateAssistantID: null, // alternativeAssistant?.id,
+            },
+          ];
+          const replacementsMap = finalMessage
+            ? new Map([
+                [localMessages[0].messageId, TEMP_USER_MESSAGE_ID],
+                [localMessages[1].messageId, TEMP_ASSISTANT_MESSAGE_ID],
+              ])
+            : null;
+          const info = {
+            chatSessionId: frozenSessionId,
+            completeMessageMapOverride: frozenMessageMap,
+            messages: localMessages,
+            replacementsMap: replacementsMap,
+            setCompleteMessageDetail: this.setCompleteMessageDetail,
+          };
+          newCompleteMessageDetail = upsertToCompleteMessageMap(info);
+        }
+
+        if (this.isCancelledRef.current) {
+          this.setIsCancelled(false);
+          break;
+        }
+      }
+    }
+
+    if (
+      newCompleteMessageDetail.messageMap &&
+      this.enableQgen &&
+      typeof this.qgenAsistantId !== 'undefined'
+    ) {
+      // check if last message comes from assistant
+      const { messageMap } = newCompleteMessageDetail;
+      const messageList = buildLatestMessageChain(messageMap).reverse();
+
+      const lastMessage = messageList.find((m) => m.type === 'assistant');
+      const userMessage = messageList.find((m) => m.type === 'user');
+      if (lastMessage && userMessage) {
+        const query = userMessage.message;
+        const answer = lastMessage.message;
+        const relatedQuestionsText = await fetchRelatedQuestions(
+          { query, answer },
+          this.qgenAsistantId,
+        );
+
+        lastMessage.relatedQuestions = extractJSON(relatedQuestionsText);
+
+        this.setCompleteMessageDetail({
+          ...newCompleteMessageDetail,
+          messageMap,
+        });
+      }
+    }
+    this.setIsStreaming(false);
+  }
+}
+
+function extractJSON(str) {
+  const regex = /\[([\s\S]*?)\]/;
+  const match = str.match(regex);
+
+  if (match) {
+    const jsonText = match[0];
+    // TODO: do we need safety here?
+    return JSON.parse(jsonText);
+  } else {
+    return str.split('\n').map((question) => ({ question }));
+  }
+}
+
+export function useBackendChat({ persona, qgenAsistantId, enableQgen }) {
+  const [isStreaming, setIsStreaming] = React.useState(false);
+  const [isCancelled, setIsCancelled] = React.useState(false);
+  const isCancelledRef = React.useRef(isCancelled); // scroll is cancelled
+  const [currChatSessionId, setCurrChatSessionId] = React.useState(null);
+
+  React.useEffect(() => {
+    isCancelledRef.current = isCancelled;
+  }, [isCancelled]);
+
+  const [completeMessageDetail, setCompleteMessageDetail] = useState({
+    sessionId: null,
+    messageMap: new Map(),
+  });
+
+  const messageHistory = buildLatestMessageChain(
+    completeMessageDetail.messageMap,
+  );
+  const submitHandler = new SubmitHandler({
+    completeMessageDetail,
+    currChatSessionId,
+    isCancelledRef,
+    messageHistory,
+    persona,
+    setCompleteMessageDetail,
+    setCurrChatSessionId,
+    setIsCancelled,
+    setIsStreaming,
+    qgenAsistantId,
+    enableQgen,
+  });
+
+  const clearChat = () => {
+    setCompleteMessageDetail({
+      sessionId: null,
+      messageMap: new Map(),
+    });
+    setCurrChatSessionId(null);
+  };
+
+  // console.log('history', messageHistory);
+
+  return {
+    messages: messageHistory,
+    onSubmit: submitHandler.onSubmit,
+    isStreaming,
+    isCancelled,
+    clearChat,
+  };
+}
diff --git a/starterkit-demo/.yalc/@eeacms/chatbotlib/hooks/useMarked.js b/starterkit-demo/.yalc/@eeacms/chatbotlib/hooks/useMarked.js
new file mode 100644
index 00000000..65d0fd21
--- /dev/null
+++ b/starterkit-demo/.yalc/@eeacms/chatbotlib/hooks/useMarked.js
@@ -0,0 +1,44 @@
+import React from 'react';
+
+// import { marked } from 'marked';
+// import { Renderer } from 'marked';
+// import hljs from 'highlight.js';
+
+export function useMarked(libs) {
+  const hljs = libs.highlightJs.default;
+  const { marked, Renderer } = libs.marked;
+
+  const renderer = React.useMemo(() => new Renderer(), [Renderer]);
+
+  renderer.paragraph = (text) => {
+    return text + '\n';
+  };
+  renderer.list = (text) => {
+    return `${text}\n\n`;
+  };
+  renderer.listitem = (text) => {
+    return `\n• ${text}`;
+  };
+  renderer.code = (code, language) => {
+    const validLanguage = hljs.getLanguage(language || '')
+      ? language
+      : 'plaintext';
+    const lang = validLanguage || 'plaintext';
+    const highlightedCode = hljs.highlight(lang, code).value;
+    return `<pre class="highlight bg-gray-700" style="padding: 5px; border-radius: 5px; overflow: auto; overflow-wrap: anywhere; white-space: pre-wrap; max-width: 100%; display: block; line-height: 1.2">
+<code class="${language}" style="color: #d6e2ef; font-size: 12px; ">${highlightedCode}</code>
+</pre>`;
+  };
+
+  marked.setOptions({ renderer });
+
+  const parser = React.useCallback(
+    async (msg) => {
+      const res = await marked.parse(msg);
+      return res;
+    },
+    [marked],
+  );
+
+  return { parser };
+}
diff --git a/src/ChatBlock/withDanswerData.jsx b/starterkit-demo/.yalc/@eeacms/chatbotlib/hooks/withOnyxData.jsx
similarity index 95%
rename from src/ChatBlock/withDanswerData.jsx
rename to starterkit-demo/.yalc/@eeacms/chatbotlib/hooks/withOnyxData.jsx
index 487c6344..78d5bad2 100644
--- a/src/ChatBlock/withDanswerData.jsx
+++ b/starterkit-demo/.yalc/@eeacms/chatbotlib/hooks/withOnyxData.jsx
@@ -16,7 +16,7 @@ const Loader = () => (
   </Placeholder>
 );
 
-export default function withDanswerData(callback) {
+export default function withOnyxData(callback) {
   function wrapper(Component) {
     function WrappedComponent(props) {
       const [state, setState] = React.useState(null);
diff --git a/starterkit-demo/.yalc/@eeacms/chatbotlib/icons/bot.svg b/starterkit-demo/.yalc/@eeacms/chatbotlib/icons/bot.svg
new file mode 100644
index 00000000..c95954ed
--- /dev/null
+++ b/starterkit-demo/.yalc/@eeacms/chatbotlib/icons/bot.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-bot"><path d="M12 8V4H8"/><rect width="16" height="12" x="4" y="8" rx="2"/><path d="M2 14h2"/><path d="M20 14h2"/><path d="M15 13v2"/><path d="M9 13v2"/></svg>
\ No newline at end of file
diff --git a/starterkit-demo/.yalc/@eeacms/chatbotlib/icons/file.svg b/starterkit-demo/.yalc/@eeacms/chatbotlib/icons/file.svg
new file mode 100644
index 00000000..ed984867
--- /dev/null
+++ b/starterkit-demo/.yalc/@eeacms/chatbotlib/icons/file.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/></svg>
\ No newline at end of file
diff --git a/starterkit-demo/.yalc/@eeacms/chatbotlib/icons/globe.svg b/starterkit-demo/.yalc/@eeacms/chatbotlib/icons/globe.svg
new file mode 100644
index 00000000..28c54e66
--- /dev/null
+++ b/starterkit-demo/.yalc/@eeacms/chatbotlib/icons/globe.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-globe"><circle cx="12" cy="12" r="10"/><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"/><path d="M2 12h20"/></svg>
\ No newline at end of file
diff --git a/starterkit-demo/.yalc/@eeacms/chatbotlib/icons/send.svg b/starterkit-demo/.yalc/@eeacms/chatbotlib/icons/send.svg
new file mode 100644
index 00000000..e8e4b563
--- /dev/null
+++ b/starterkit-demo/.yalc/@eeacms/chatbotlib/icons/send.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-send"><path d="m22 2-7 20-4-9-9-4Z"/><path d="M22 2 11 13"/></svg>
\ No newline at end of file
diff --git a/starterkit-demo/.yalc/@eeacms/chatbotlib/icons/user.svg b/starterkit-demo/.yalc/@eeacms/chatbotlib/icons/user.svg
new file mode 100644
index 00000000..e3a292cf
--- /dev/null
+++ b/starterkit-demo/.yalc/@eeacms/chatbotlib/icons/user.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-user"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
\ No newline at end of file
diff --git a/starterkit-demo/.yalc/@eeacms/chatbotlib/index.js b/starterkit-demo/.yalc/@eeacms/chatbotlib/index.js
new file mode 100644
index 00000000..2341e83a
--- /dev/null
+++ b/starterkit-demo/.yalc/@eeacms/chatbotlib/index.js
@@ -0,0 +1,3 @@
+export { default as withOnyxData } from './hooks/withOnyxData';
+export { default as ChatWindow } from './components/ChatWindow';
+export { useBackendChat } from './hooks/useBackendChat';
diff --git a/starterkit-demo/.yalc/@eeacms/chatbotlib/package.json b/starterkit-demo/.yalc/@eeacms/chatbotlib/package.json
new file mode 100644
index 00000000..c79a9e63
--- /dev/null
+++ b/starterkit-demo/.yalc/@eeacms/chatbotlib/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "@eeacms/chatbotlib",
+  "version": "1.0.0",
+  "description": "",
+  "main": "dist/chatbotlib.umd.js",
+  "module": "dist/chatbotlib.es.js",
+  "exports": {
+    ".": {
+      "import": "./dist/chatbotlib.es.js",
+      "require": "./dist/chatbotlib.umd.js"
+    }
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "vite build"
+  },
+  "author": "",
+  "license": "ISC",
+  "root": true,
+  "dependencies": {
+    "react-textarea-autosize": "^8.5.7",
+    "rehype-prism-plus": "^1.6.0",
+    "remark-gfm": "^3.0.1"
+  },
+  "yalcSig": "52564551b879f611882878fb42fdac09"
+}
diff --git a/starterkit-demo/.yalc/@eeacms/chatbotlib/utils.jsx b/starterkit-demo/.yalc/@eeacms/chatbotlib/utils.jsx
new file mode 100644
index 00000000..ad737d91
--- /dev/null
+++ b/starterkit-demo/.yalc/@eeacms/chatbotlib/utils.jsx
@@ -0,0 +1,25 @@
+export const EMAIL_REGEX = /([a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,})/g;
+
+// Convert text with email addresses to mailto links
+export function transformEmailsToLinks(text) {
+  return text.split(EMAIL_REGEX).map((part, index) => {
+    if (EMAIL_REGEX.test(part)) {
+      return (
+        <a key={index} href={`mailto:${part}`} className="text-email">
+          {part}
+        </a>
+      );
+    }
+    return part;
+  });
+}
+
+export function debounce(callable, click_signal) {
+  if (!click_signal.current) {
+    click_signal.current = true;
+    setTimeout(() => {
+      click_signal.current = null;
+    }, 1000);
+    callable();
+  }
+}
diff --git a/starterkit-demo/.yalc/@eeacms/chatbotlib/vite.config.js b/starterkit-demo/.yalc/@eeacms/chatbotlib/vite.config.js
new file mode 100644
index 00000000..9adf5a68
--- /dev/null
+++ b/starterkit-demo/.yalc/@eeacms/chatbotlib/vite.config.js
@@ -0,0 +1,22 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  build: {
+    lib: {
+      entry: './index.js',
+      name: '@eeacms/chatbotlib',
+      fileName: (format) => `chatbotlib.${format}.js`,
+    },
+    rollupOptions: {
+      external: ['react', 'react-dom'],
+      output: {
+        globals: {
+          react: 'React',
+          'react-dom': 'ReactDOM',
+        },
+      },
+    },
+  },
+});
diff --git a/starterkit-demo/.yalc/@eeacms/chatbotlib/yalc.sig b/starterkit-demo/.yalc/@eeacms/chatbotlib/yalc.sig
new file mode 100644
index 00000000..f0bbfaed
--- /dev/null
+++ b/starterkit-demo/.yalc/@eeacms/chatbotlib/yalc.sig
@@ -0,0 +1 @@
+52564551b879f611882878fb42fdac09
\ No newline at end of file
diff --git a/starterkit-demo/Makefile b/starterkit-demo/Makefile
new file mode 100644
index 00000000..1a7a8f31
--- /dev/null
+++ b/starterkit-demo/Makefile
@@ -0,0 +1,2 @@
+dev:
+	env PORT=4000 npm run dev
diff --git a/starterkit-demo/README.md b/starterkit-demo/README.md
new file mode 100644
index 00000000..f768e33f
--- /dev/null
+++ b/starterkit-demo/README.md
@@ -0,0 +1,8 @@
+# React + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
diff --git a/starterkit-demo/eslint.config.js b/starterkit-demo/eslint.config.js
new file mode 100644
index 00000000..238d2e4e
--- /dev/null
+++ b/starterkit-demo/eslint.config.js
@@ -0,0 +1,38 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import react from 'eslint-plugin-react'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+
+export default [
+  { ignores: ['dist'] },
+  {
+    files: ['**/*.{js,jsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        ecmaFeatures: { jsx: true },
+        sourceType: 'module',
+      },
+    },
+    settings: { react: { version: '18.3' } },
+    plugins: {
+      react,
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...js.configs.recommended.rules,
+      ...react.configs.recommended.rules,
+      ...react.configs['jsx-runtime'].rules,
+      ...reactHooks.configs.recommended.rules,
+      'react/jsx-no-target-blank': 'off',
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+]
diff --git a/starterkit-demo/index.html b/starterkit-demo/index.html
new file mode 100644
index 00000000..df7ba3e6
--- /dev/null
+++ b/starterkit-demo/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React</title>
+    <!--app-head-->
+  </head>
+  <body>
+    <div id="root"><!--app-html--></div>
+    <script type="module" src="/src/entry-client.jsx"></script>
+  </body>
+</html>
diff --git a/starterkit-demo/onyx-proxy.js b/starterkit-demo/onyx-proxy.js
new file mode 100644
index 00000000..d9726212
--- /dev/null
+++ b/starterkit-demo/onyx-proxy.js
@@ -0,0 +1,125 @@
+import superagent from 'superagent';
+import fetch from 'node-fetch';
+
+let cached_auth_cookie = null;
+let last_fetched = null;
+let maxAge;
+
+const MSG_INVALID_CONFIGURATION =
+  'Invalid configuration: missing DANSWER username and password';
+const MSG_FETCH_COOKIE = 'Error while fetching authentication cookie';
+const MSG_ERROR_REQUEST = 'Error in processing request to Onyx';
+
+async function get_login_cookie(username, password) {
+  const url = `${process.env.VITE_API_URL}/api/auth/login`;
+  const data = {
+    username,
+    password,
+    scope: '',
+    client_id: '',
+    client_secret: '',
+    grant_type: '',
+  };
+  try {
+    const response = await superagent.post(url).type('form').send(data);
+    const header = response.headers['set-cookie'][0];
+    return header;
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.error(MSG_FETCH_COOKIE, error);
+  }
+}
+
+async function getAuthCookie(username, password) {
+  cached_auth_cookie = await get_login_cookie(username, password);
+  if (cached_auth_cookie) {
+    const maxAgeMatch = cached_auth_cookie.match(/Max-Age=(\d+)/);
+    maxAge = parseInt(maxAgeMatch[1]);
+    last_fetched = new Date();
+  }
+}
+
+async function login(username, password) {
+  const diff = maxAge - (new Date() - last_fetched) / 1000;
+  // eslint-disable-next-line no-console
+  console.log('danswer auth still valid for seconds: ', diff);
+  if (!cached_auth_cookie || diff < 0) {
+    await getAuthCookie(username, password);
+  }
+}
+
+async function check_credentials() {
+  const reqUrl = `${process.env.VITE_API_URL}/api/persona/-1`;
+
+  const options = {
+    method: 'GET',
+    headers: {
+      Cookie: cached_auth_cookie,
+      'Content-Type': 'application/json',
+    },
+  };
+  return await fetch(reqUrl, options);
+}
+
+async function send_danswer_request(req, res, { username, password, url }) {
+  await login(username, password);
+
+  try {
+    const resp = await check_credentials();
+    if (resp.status !== 200) {
+      await getAuthCookie(username, password);
+    }
+  } catch (error) {
+    await getAuthCookie(username, password);
+  }
+
+  const options = {
+    method: req.method,
+    headers: {
+      Cookie: cached_auth_cookie,
+      'Content-Type': 'application/json',
+    },
+  };
+
+  if (req.body && req.method === 'POST') {
+    options.body = JSON.stringify(req.body);
+  }
+  try {
+    const response = await fetch(url, options, req.body);
+
+    if (response.headers.get('transfer-encoding') === 'chunked') {
+      res.set('Content-Type', 'text/event-stream');
+    } else {
+      res.set('Content-Type', 'application/json');
+    }
+
+    response.body.pipe(res);
+  } catch (error) {
+    throw error;
+  }
+}
+
+export default async function proxyMiddleware(req, res, next) {
+  const path = req.url.replace('/_da/', '/');
+
+  const reqUrl = `${process.env.VITE_API_URL}/api${path}`;
+
+  const username = process.env.VITE_API_USERNAME;
+  const password = process.env.VITE_API_PASSWORD;
+
+  if (!(username && password)) {
+    res.send({
+      error: MSG_INVALID_CONFIGURATION,
+    });
+    return;
+  }
+
+  try {
+    await send_danswer_request(req, res, { url: reqUrl, username, password });
+  } catch (error) {
+    // eslint-disable-next-line
+    console.error(MSG_ERROR_REQUEST, error?.response?.text);
+
+    res.send({ error: `Onyx error: ${error?.response?.text || 'error'}` });
+  }
+}
diff --git a/starterkit-demo/package.json b/starterkit-demo/package.json
new file mode 100644
index 00000000..1333e64a
--- /dev/null
+++ b/starterkit-demo/package.json
@@ -0,0 +1,38 @@
+{
+  "name": "vite-project",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "node server",
+    "build": "npm run build:client && npm run build:server",
+    "build:client": "vite build --outDir dist/client",
+    "build:server": "vite build --ssr src/entry-server.jsx --outDir dist/server",
+    "lint": "eslint .",
+    "preview": "cross-env NODE_ENV=production node server"
+  },
+  "dependencies": {
+    "@eeacms/chatbotlib": "file:.yalc/@eeacms/chatbotlib",
+    "compression": "^1.7.5",
+    "express": "^5.0.1",
+    "node-fetch": "^3.3.2",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "sirv": "^3.0.0",
+    "superagent": "^10.1.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.19.0",
+    "@types/react": "^19.0.8",
+    "@types/react-dom": "^19.0.3",
+    "@vitejs/plugin-react": "^4.3.4",
+    "cross-env": "^7.0.3",
+    "dotenv": "^16.4.7",
+    "eslint": "^9.19.0",
+    "eslint-plugin-react": "^7.37.4",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.18",
+    "globals": "^15.14.0",
+    "vite": "^6.1.0"
+  }
+}
diff --git a/starterkit-demo/public/vite.svg b/starterkit-demo/public/vite.svg
new file mode 100644
index 00000000..e7b8dfb1
--- /dev/null
+++ b/starterkit-demo/public/vite.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
\ No newline at end of file
diff --git a/starterkit-demo/server.js b/starterkit-demo/server.js
new file mode 100644
index 00000000..b5b34f72
--- /dev/null
+++ b/starterkit-demo/server.js
@@ -0,0 +1,67 @@
+import fs from 'node:fs/promises';
+import express from 'express';
+import proxyMiddleware from './onyx-proxy.js';
+
+import 'dotenv/config';
+
+const isProduction = process.env.NODE_ENV === 'production';
+const port = process.env.PORT || 5173;
+const base = process.env.BASE || '/';
+
+// Cached production assets
+const templateHtml = isProduction
+  ? await fs.readFile('./dist/client/index.html', 'utf-8')
+  : await fs.readFile('./index.html', 'utf-8');
+
+const app = express();
+
+// Add Vite or respective production middlewares
+/** @type {import('vite').ViteDevServer | undefined} */
+let vite;
+if (!isProduction) {
+  const { createServer } = await import('vite');
+  vite = await createServer({
+    server: { middlewareMode: true },
+    appType: 'custom',
+    base,
+  });
+  app.use(vite.middlewares);
+} else {
+  const compression = (await import('compression')).default;
+  const sirv = (await import('sirv')).default;
+  app.use(compression());
+  app.use(base, sirv('./dist/client', { extensions: [] }));
+}
+
+const middleware = express.Router();
+
+middleware.use(
+  express.json({
+    limit: 2000000000, // This is superagent default (200 mb)
+  }),
+);
+middleware.use(express.urlencoded({ extended: true }));
+
+middleware.all(/\/_da\/(.*)/, proxyMiddleware);
+middleware.id = 'danswer';
+
+app.use(middleware);
+
+// See https://github.com/bluwy/create-vite-extra/blob/41db5fa889295e12f9a2dddc74e4c5318046abe4/template-ssr-react/server.js
+app.use('*all', async (req, res) => {
+  try {
+    const url = req.originalUrl.replace(base, '');
+    const html = await vite.transformIndexHtml(url, templateHtml);
+    res.status(200).set({ 'Content-Type': 'text/html' }).send(html);
+  } catch (e) {
+    vite?.ssrFixStacktrace(e);
+    // eslint-disable-next-line no-console
+    console.log(e.stack);
+    res.status(500).end(e.stack);
+  }
+});
+
+app.listen(port, () => {
+  // eslint-disable-next-line no-console
+  console.log(`Server started at http://localhost:${port}`);
+});
diff --git a/starterkit-demo/src/App.css b/starterkit-demo/src/App.css
new file mode 100644
index 00000000..b9d355df
--- /dev/null
+++ b/starterkit-demo/src/App.css
@@ -0,0 +1,42 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}
diff --git a/starterkit-demo/src/App.jsx b/starterkit-demo/src/App.jsx
new file mode 100644
index 00000000..73cc07c5
--- /dev/null
+++ b/starterkit-demo/src/App.jsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import './App.css';
+import superagent from 'superagent';
+import { ChatWindow, withOnyxData } from '@eeacms/chatbotlib';
+
+function getEnv() {
+  return {
+    qaAssistantId: import.meta.env.VITE_API_QA_ASSISTANT_ID,
+    assistantId: import.meta.env.VITE_API_MAIN_ASSISTANT_ID,
+  };
+}
+
+const WrappedChatWindow = withOnyxData(({ assistant }) => [
+  'persona',
+  typeof assistant !== 'undefined'
+    ? superagent.get(`/_da/persona/${assistant}`).type('json')
+    : null,
+  assistant,
+])(ChatWindow);
+
+function App() {
+  const envs = getEnv();
+  const [isClient, setIsClient] = React.useState(false);
+  React.useEffect(() => setIsClient(true), []);
+
+  console.log('envs', envs);
+
+  return isClient ? (
+    <WrappedChatWindow assistant={envs.assistantId} />
+  ) : (
+    <div></div>
+  );
+}
+
+export default App;
diff --git a/starterkit-demo/src/assets/react.svg b/starterkit-demo/src/assets/react.svg
new file mode 100644
index 00000000..6c87de9b
--- /dev/null
+++ b/starterkit-demo/src/assets/react.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
\ No newline at end of file
diff --git a/starterkit-demo/src/entry-client.jsx b/starterkit-demo/src/entry-client.jsx
new file mode 100644
index 00000000..0df19338
--- /dev/null
+++ b/starterkit-demo/src/entry-client.jsx
@@ -0,0 +1,11 @@
+import './index.css';
+import { StrictMode } from 'react';
+import { hydrateRoot } from 'react-dom/client';
+import App from './App';
+
+hydrateRoot(
+  document.getElementById('root'),
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);
diff --git a/starterkit-demo/src/index.css b/starterkit-demo/src/index.css
new file mode 100644
index 00000000..6119ad9a
--- /dev/null
+++ b/starterkit-demo/src/index.css
@@ -0,0 +1,68 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}
diff --git a/starterkit-demo/src/main.jsx b/starterkit-demo/src/main.jsx
new file mode 100644
index 00000000..e54313e8
--- /dev/null
+++ b/starterkit-demo/src/main.jsx
@@ -0,0 +1,12 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+
+import App from './App.jsx';
+
+import './index.css';
+
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);
diff --git a/starterkit-demo/vite.config.js b/starterkit-demo/vite.config.js
new file mode 100644
index 00000000..436999a4
--- /dev/null
+++ b/starterkit-demo/vite.config.js
@@ -0,0 +1,10 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    port: process.env.PORT || 5173,
+  },
+});