@greenstones/qui-ai 0.0.1

package/.storybook/main.js

@@ -0,0 +1,25 @@
+import { join, dirname } from "path";
+
+/**
+ * This function is used to resolve the absolute path of a package.
+ * It is needed in projects that use Yarn PnP or are set up within a monorepo.
+ */
+function getAbsolutePath(value) {
+  return dirname(require.resolve(join(value, "package.json")));
+}
+
+/** @type { import('@storybook/react-vite').StorybookConfig } */
+const config = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    getAbsolutePath("@storybook/addon-onboarding"),
+    getAbsolutePath("@storybook/addon-essentials"),
+    getAbsolutePath("@chromatic-com/storybook"),
+    getAbsolutePath("@storybook/addon-interactions"),
+  ],
+  framework: {
+    name: getAbsolutePath("@storybook/react-vite"),
+    options: {},
+  },
+};
+export default config;

package/.storybook/preview.js

@@ -0,0 +1,13 @@
+/** @type { import('@storybook/react').Preview } */
+const preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

package/index.ts

@@ -0,0 +1 @@
+export * from "./src";

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@greenstones/qui-ai",
+  "private": false,
+  "version": "0.0.1",
+  "type": "module",
+  "module": "index.ts",
+  "scripts": {
+    "lint": "eslint .",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "dependencies": {
+    "@greenstones/qui-bootstrap": "0.1.0",
+    "@greenstones/qui-core": "0.1.0-alpha.1",
+    "chroma-js": "^3.2.0",
+    "classnames": "^2.5.1",
+    "lucide-react": "^0.500",
+    "react-markdown": "^10.1.0",
+    "recharts": "^3",
+    "rehype-raw": "^7",
+    "remark-gfm": "^4"
+  },
+  "devDependencies": {
+    "@types/react": "^19",
+    "@types/react-dom": "^19"
+  },
+  "peerDependencies": {
+    "date-fns": "^4.1",
+    "react": "^19",
+    "react-dom": "^19",
+    "react-bootstrap": "^2.10",
+    "react-router-dom": "^7",
+    "react-hook-form": "^7",
+    "@ai-sdk/amazon-bedrock": "^4",
+    "@ai-sdk/anthropic": "^3",
+    "@ai-sdk/openai": "^3",
+    "@openai/agents": "^0.7",
+    "@openai/agents-extensions": "^0.7"
+  },
+  "sideEffects": false
+}

package/src/chat/AssistantButton.tsx

@@ -0,0 +1,95 @@
+import { Bot, ChevronDown } from "lucide-react";
+import { useState } from "react";
+import { Button, Offcanvas, OverlayTrigger, Tooltip } from "react-bootstrap";
+import { ChatPanel, EmptyPlaceholder } from "./ChatPanel";
+import { type Chat } from "./use-chat";
+
+export const AssistantButton = ({
+  chat,
+  type = "window",
+}: {
+  chat: Chat;
+  type?: "window" | "offcanvas";
+}) => {
+  const [show, setShow] = useState(false);
+  const handleClose = () => setShow(false);
+
+  return (
+    <div>
+      <div style={{ position: "absolute", bottom: "1.2rem", right: "1.2rem" }}>
+        <OverlayTrigger
+          overlay={<Tooltip>Open Assistant</Tooltip>}
+          placement="left"
+        >
+          <Button
+            variant="primary"
+            onClick={(e) => {
+              setShow((s) => !s);
+            }}
+            style={{ borderRadius: 32, padding: 12 }}
+          >
+            {!show ? (
+              <Bot width={24} height={24} />
+            ) : (
+              <ChevronDown width={24} height={24} />
+            )}
+          </Button>
+        </OverlayTrigger>
+      </div>
+
+      {type === "offcanvas" && (
+        <Offcanvas
+          show={show}
+          onHide={handleClose}
+          placement="end"
+          scroll={true}
+          backdrop={false}
+          className="shadow"
+        >
+          <Offcanvas.Header closeButton>
+            <Offcanvas.Title>Assistant</Offcanvas.Title>
+          </Offcanvas.Header>
+          <Offcanvas.Body className="flex-fill d-flex flex-column">
+            <ChatPanel
+              chat={chat}
+              examples={[
+                "What’s the weather like in Frankfurt?",
+                "Create a table listing the current weather in the 5 largest German cities",
+              ]}
+              userMessagePosition="end"
+              centerOnEmpty={false}
+              chatMessagesClassName="gap-1"
+              empty={<EmptyPlaceholder className="text-secondary" />}
+            />
+          </Offcanvas.Body>
+        </Offcanvas>
+      )}
+
+      {type === "window" && show && (
+        <div
+          className="bg-white shadow-lg border rounded-4 p-3 d-flex flex-column"
+          style={{
+            height: "50%",
+            minHeight: 600,
+            position: "absolute",
+            bottom: "5.4rem",
+            right: "1.2rem",
+            width: "28rem",
+          }}
+        >
+          <ChatPanel
+            chat={chat}
+            examples={[
+              "What’s the weather like in Frankfurt?",
+              "Create a table listing the current weather in the 5 largest German cities",
+            ]}
+            userMessagePosition="end"
+            centerOnEmpty={false}
+            chatMessagesClassName="gap-1"
+            empty={<EmptyPlaceholder className="text-secondary" />}
+          />
+        </div>
+      )}
+    </div>
+  );
+};

package/src/chat/ChatForm.css

@@ -0,0 +1,12 @@
+.spin {
+  animation: spin 2s linear infinite;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

package/src/chat/ChatForm.tsx

@@ -0,0 +1,201 @@
+import classNames from "classnames";
+import { ArrowUp, Loader, Trash, WandSparkles } from "lucide-react";
+import { useRef, type ReactNode, type Ref } from "react";
+import { Button, ButtonToolbar, Dropdown, Form } from "react-bootstrap";
+import { useForm } from "react-hook-form";
+import type { Chat } from "./use-chat";
+import "./ChatForm.css";
+
+export interface ChatFormProps {
+  chat: Chat;
+  className?: string;
+  tools?: ReactNode;
+  examples?: string[];
+  variant?: undefined | "bordered" | "standard";
+}
+
+export function ChatForm({
+  chat,
+  examples,
+  tools,
+  className,
+  variant,
+}: ChatFormProps) {
+  const formRef = useRef<HTMLFormElement>(null);
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+
+  const { register, handleSubmit, setValue } = useForm<{ message: string }>({
+    defaultValues: { message: "" },
+  });
+
+  const field = register("message", { required: true });
+  const onSubmit = async (data) => {
+    const msg = data.message;
+    if (msg) {
+      chat.callChat(msg, {
+        monitor: (state: string) => {
+          if (state === "start") {
+            inputRef.current!.value = "";
+          }
+        },
+      });
+    }
+  };
+
+  const handleKeyDown = (event: React.KeyboardEvent) => {
+    if (event.key === "Enter" && !event.shiftKey) {
+      event.preventDefault();
+      if (!chat.isRunning) formRef.current?.requestSubmit();
+    }
+  };
+
+  let variantProps;
+  switch (variant) {
+    case "bordered":
+      variantProps = {
+        mainClassName: "border rounded-4 px-3 py-3 mb-3 shadow-sm",
+        inputStyle: {
+          border: "none",
+          borderRadius: 0,
+          padding: 0,
+          minHeight: "auto",
+          boxShadow: "none",
+          background: "none",
+          marginTop: ".375rem",
+        },
+        rows: 1,
+      };
+      break;
+
+    default:
+      variantProps = {
+        mainClassName: "mt-1",
+        inputStyle: undefined,
+        rows: 2,
+        //minHeight: "1rem",
+      };
+      break;
+  }
+
+  console.log(variantProps);
+
+  return (
+    <div className={classNames(variantProps.mainClassName, className)}>
+      <form
+        className="d-grid gap-2"
+        ref={formRef}
+        onSubmit={handleSubmit(onSubmit)}
+      >
+        <div className="px-0">
+          <Form.Group className="" controlId="message">
+            <Form.Control
+              style={variantProps.inputStyle}
+              as="textarea"
+              {...{
+                ...field,
+                ref: ((r: Ref<HTMLTextAreaElement>) => {
+                  field.ref?.(r);
+                  inputRef.current = r as any;
+                  return;
+                }) as any,
+              }}
+              autoFocus
+              rows={variantProps.rows}
+              onKeyDown={handleKeyDown}
+              onInput={autoresize(inputRef)}
+              // placeholder={
+              //   history.length > 0
+              //     ? "Type your message or use ↑/↓ to browse input history"
+              //     : "Type your message..."
+              // }
+              placeholder={"Type your message..."}
+            />
+          </Form.Group>
+        </div>
+
+        <ButtonToolbar className="gap-2">
+          <Dropdown className="">
+            <Dropdown.Toggle variant="light" size="sm">
+              <WandSparkles size={16} />
+            </Dropdown.Toggle>
+            <Dropdown.Menu>
+              {examples?.map((c) => (
+                <Dropdown.Item
+                  key={c}
+                  onClick={() => {
+                    setValue("message", c);
+                    formRef.current?.requestSubmit();
+                  }}
+                >
+                  {c}
+                </Dropdown.Item>
+              ))}
+            </Dropdown.Menu>
+          </Dropdown>
+
+          <Button
+            variant={"light"}
+            title="Clear"
+            onClick={(e) => {
+              chat.clearMessages();
+            }}
+            size="sm"
+          >
+            <Trash size={16} />
+          </Button>
+
+          {tools}
+
+          <Button
+            type="submit"
+            variant="primary"
+            size="sm"
+            className="ms-auto"
+            disabled={chat.isRunning}
+          >
+            {!chat.isRunning && (
+              <ArrowUp
+                color="white"
+                size={18}
+                strokeWidth={3}
+                style={{ marginTop: -2 }}
+              />
+            )}
+            {chat.isRunning && (
+              <Loader
+                color="white"
+                size={18}
+                strokeWidth={3}
+                style={{ marginTop: -2 }}
+                className="spin"
+              />
+            )}
+          </Button>
+        </ButtonToolbar>
+      </form>
+    </div>
+  );
+}
+
+function _autoresize(ref: React.RefObject<HTMLTextAreaElement | null>) {
+  const el = ref.current;
+  if (el) {
+    el.style.height = "auto";
+    el.style.height = Math.min(el.scrollHeight, 250) + "px";
+  }
+}
+
+function autoresize(ref: React.RefObject<HTMLTextAreaElement | null>) {
+  return () => {
+    _autoresize(ref);
+  };
+}
+
+function waitAndAutoresize(ref: React.RefObject<HTMLTextAreaElement | null>) {
+  const el = ref.current;
+  if (el) {
+    setTimeout(() => {
+      _autoresize(ref);
+    }, 100);
+  }
+}

package/src/chat/ChatMessages.tsx

@@ -0,0 +1,83 @@
+import type {
+  AssistantMessageItem,
+  FunctionCallItem,
+  FunctionCallResultItem,
+  UnknownItem,
+  UserMessageItem,
+} from "@openai/agents";
+import { Fragment, type ReactNode } from "react";
+import type { MessageItem } from "./MessageItem";
+
+export function ChatMessages({
+  messages,
+  className,
+  renderUserMessage,
+  renderAssistantMessage,
+  renderFunctionCall,
+}: {
+  messages: MessageItem[];
+  className: string;
+  renderUserMessage: (message: UserMessageItem) => ReactNode;
+  renderAssistantMessage: (message: AssistantMessageItem) => ReactNode;
+  renderFunctionCall?: (
+    call: FunctionCallItem,
+    result?: FunctionCallResultItem,
+  ) => ReactNode;
+}) {
+  const functionResultItems = messages
+    .filter((m) => isFunctionCallResult(m))
+    .reduce(
+      (p, c) => {
+        p[c.callId] = c;
+        return p;
+      },
+      {} as Record<string, FunctionCallResultItem>,
+    );
+
+  function renderMessage(m: MessageItem) {
+    if (isUserMessage(m)) {
+      return renderUserMessage(m);
+    }
+    if (isAssistantMessage(m)) {
+      return renderAssistantMessage(m);
+    }
+
+    if (isFunctionCall(m)) {
+      return renderFunctionCall?.(m, functionResultItems[m.callId]);
+    }
+
+    return null;
+  }
+
+  return (
+    <div className={className}>
+      {messages.map((m, index) => (
+        <Fragment key={index}>{renderMessage(m)}</Fragment>
+      ))}
+    </div>
+  );
+}
+
+export const isUserMessage = (m: MessageItem): m is UserMessageItem => {
+  return (m as UserMessageItem).role === "user";
+};
+
+export const isAssistantMessage = (
+  m: MessageItem,
+): m is AssistantMessageItem => {
+  return (m as AssistantMessageItem).role === "assistant";
+};
+
+export const isFunctionCallResult = (
+  m: MessageItem,
+): m is FunctionCallResultItem => {
+  return (m as FunctionCallResultItem).type === "function_call_result";
+};
+
+export const isFunctionCall = (m: MessageItem): m is FunctionCallItem => {
+  return (m as FunctionCallItem).type === "function_call";
+};
+
+export const isUnknown = (m: MessageItem): m is UnknownItem => {
+  return (m as UnknownItem).type === "unknown";
+};

package/src/chat/ChatPage.tsx

@@ -0,0 +1,33 @@
+import { Page, type PageOptions } from "@greenstones/qui-bootstrap";
+import { ChatPanel, EmptyPlaceholder, type ChatPanelProps } from "./ChatPanel";
+
+export function ChatPage({
+  chat,
+  empty = <EmptyPlaceholder />,
+  examples,
+  tools,
+  variant,
+  formClassName,
+  userMessagePosition,
+  userMessageClassName,
+  children,
+  ...pageOptions
+}: ChatPanelProps & PageOptions) {
+  return (
+    <Page {...pageOptions} scrollBody={false}>
+      <ChatPanel
+        {...{
+          chat,
+          userMessagePosition,
+          userMessageClassName,
+          empty,
+          formClassName,
+          tools,
+          examples,
+          variant,
+        }}
+      />
+      {children}
+    </Page>
+  );
+}

package/src/chat/ChatPanel.tsx

@@ -0,0 +1,133 @@
+import classNames from "classnames";
+import type { ReactNode } from "react";
+import { Spinner } from "react-bootstrap";
+import { BootstrapStylesComponents } from "../md/BootstrapStyles";
+import { MarkdownContent } from "../md/MarkdownContent";
+import { ChatForm } from "./ChatForm";
+import { ChatMessages } from "./ChatMessages";
+import { AssistantMessage } from "./messages/AssistantMessage";
+import { FunctionCall } from "./messages/FunctionCall";
+import { UserMessage } from "./messages/UserMessage";
+import { MessageContent } from "./TextContent";
+import type { Chat } from "./use-chat";
+
+export interface ChatPanelProps {
+  chat: Chat;
+  empty?: ReactNode;
+  examples?: string[];
+  tools?: ReactNode;
+  variant?: undefined | "bordered" | "standard";
+  formClassName?: string;
+  userMessagePosition?: undefined | "start" | "end";
+  userMessageClassName?: string;
+  centerOnEmpty?: boolean;
+  chatMessagesClassName?: string;
+}
+
+export function ChatPanel({
+  chat,
+  userMessagePosition,
+  userMessageClassName,
+  empty,
+  formClassName,
+  tools,
+  examples,
+  variant,
+  centerOnEmpty = true,
+  chatMessagesClassName = "gap-3",
+}: ChatPanelProps) {
+  const isEmptyChat = !chat.messages || chat.messages.length === 0;
+  return (
+    <div className="flex-fill d-flex flex-column" style={{ height: 1 }}>
+      {!isEmptyChat && (
+        <div className="overflow-auto d-flex flex-column flex-fill">
+          <ChatMessages
+            className={classNames("d-flex flex-column", chatMessagesClassName)}
+            messages={chat.messages}
+            renderUserMessage={(message) => (
+              <UserMessage
+                message={message}
+                renderContent={(c) => (
+                  <MessageContent
+                    content={c}
+                    wrapperClassName={classNames("d-flex", {
+                      "justify-content-end": userMessagePosition === "end",
+                    })}
+                    className={
+                      userMessageClassName || "bg-light py-3 px-3 rounded-4 "
+                    }
+                  />
+                )}
+              />
+            )}
+            renderAssistantMessage={(message) => (
+              <AssistantMessage
+                message={message}
+                renderContent={(c) => (
+                  <MarkdownContent
+                    content={c}
+                    wrapperClassName=""
+                    components={{
+                      ...BootstrapStylesComponents,
+                      ...chat.widgets,
+                    }}
+                  />
+                )}
+              />
+            )}
+            renderFunctionCall={(call, result) => (
+              <FunctionCall call={call} result={result} />
+            )}
+          />
+
+          {chat.isRunning && (
+            <Spinner
+              className="ms-2 mt-3"
+              animation="grow"
+              variant="secondary"
+              size="sm"
+            />
+          )}
+          <div
+            ref={chat.endRef}
+            style={{ height: "10rem", minHeight: "10rem" }}
+          >
+            {" "}
+          </div>
+        </div>
+      )}
+
+      {isEmptyChat && !centerOnEmpty && empty && (
+        <div className="flex-fill1 my-auto">{empty}</div>
+      )}
+
+      <div
+        className={classNames("", {
+          " my-auto ": centerOnEmpty && isEmptyChat,
+        })}
+      >
+        {isEmptyChat && centerOnEmpty && empty}
+        <ChatForm
+          chat={chat}
+          className={formClassName}
+          tools={tools}
+          examples={examples}
+          variant={variant}
+        />
+        {centerOnEmpty && isEmptyChat && (
+          <div style={{ height: "20rem" }}></div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export function EmptyPlaceholder({ className }: { className?: string }) {
+  return (
+    <div>
+      <div className={classNames("h4 fw-normal text-center mb-4", className)}>
+        How can I help you today?
+      </div>
+    </div>
+  );
+}

package/src/chat/MessageItem.ts

@@ -0,0 +1,3 @@
+import type { AgentInputItem, AgentOutputItem } from "@openai/agents";
+
+export type MessageItem = AgentInputItem | AgentOutputItem;

package/src/chat/TextContent.tsx

@@ -0,0 +1,15 @@
+export function MessageContent({
+  content,
+  wrapperClassName,
+  className,
+}: {
+  content: string;
+  wrapperClassName?: string;
+  className?: string;
+}) {
+  return (
+    <div className={wrapperClassName}>
+      <div className={className}>{content}</div>
+    </div>
+  );
+}

package/src/chat/index.ts

@@ -0,0 +1,8 @@
+export * from "./ChatPage";
+export * from "./ChatForm";
+export * from "./ChatPanel";
+export * from "./MessageItem";
+export * from "./AssistantButton";
+export * from "./ChatMessages";
+export * from "./TextContent";
+export * from "./use-chat";