add chat-widget to monorepo

apps/chat_widget/.dockerignore

@@ -0,0 +1,8 @@
+Dockerfile
+.dockerignore
+node_modules
+npm-debug.log
+README.md
+.next
+.git
+.env*

apps/chat_widget/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": ["next/core-web-vitals", "next/typescript"]
+}

apps/chat_widget/.gitignore

@@ -0,0 +1,40 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# env files (can opt-in for commiting if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

apps/chat_widget/Dockerfile

@@ -0,0 +1,68 @@
+# syntax=docker.io/docker/dockerfile:1
+
+FROM node:18-alpine AS base
+
+# Install dependencies only when needed
+FROM base AS deps
+# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
+RUN apk add --no-cache libc6-compat
+WORKDIR /app
+
+# Install dependencies based on the preferred package manager
+COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* .npmrc* ./
+RUN \
+  if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
+  elif [ -f package-lock.json ]; then npm ci; \
+  elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm i --frozen-lockfile; \
+  else echo "Lockfile not found." && exit 1; \
+  fi
+
+
+# Rebuild the source code only when needed
+FROM base AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+
+# Next.js collects completely anonymous telemetry data about general usage.
+# Learn more here: https://nextjs.org/telemetry
+# Uncomment the following line in case you want to disable telemetry during the build.
+# ENV NEXT_TELEMETRY_DISABLED=1
+
+RUN \
+  if [ -f yarn.lock ]; then yarn run build; \
+  elif [ -f package-lock.json ]; then npm run build; \
+  elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm run build; \
+  else echo "Lockfile not found." && exit 1; \
+  fi
+
+# Production image, copy all the files and run next
+FROM base AS runner
+WORKDIR /app
+
+ENV NODE_ENV=production
+# Uncomment the following line in case you want to disable telemetry during runtime.
+# ENV NEXT_TELEMETRY_DISABLED=1
+
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+COPY --from=builder /app/public ./public
+
+# Automatically leverage output traces to reduce image size
+# https://nextjs.org/docs/advanced-features/output-file-tracing
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+
+USER nextjs
+
+EXPOSE 3000
+
+ENV PORT=3000
+
+# server.js is created by next build from the standalone output
+# https://nextjs.org/docs/pages/api-reference/config/next-config-js/output
+ENV HOSTNAME="0.0.0.0"
+ENV PORT=3000
+CMD echo "Starting server $CHAT_WIDGET_HOST, $ROWBOAT_HOST" && node server.js
+#CMD ["node", "server.js"]

apps/chat_widget/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

apps/chat_widget/app/api/bootstrap.js/bootstrap.js

@@ -0,0 +1,183 @@
+// Split into separate configuration file/module
+const CONFIG = {
+  CHAT_URL: '__CHAT_WIDGET_HOST__',
+  API_URL: '__ROWBOAT_HOST__/api/widget/v1',
+  STORAGE_KEYS: {
+    MINIMIZED: 'rowboat_chat_minimized',
+    SESSION: 'rowboat_session_id'
+  },
+  IFRAME_STYLES: {
+    MINIMIZED: {
+      width: '48px',
+      height: '48px',
+      borderRadius: '50%'
+    },
+    MAXIMIZED: {
+      width: '400px',
+      height: 'min(calc(100vh - 32px), 600px)',
+      borderRadius: '10px'
+    },
+    BASE: {
+      position: 'fixed',
+      bottom: '20px',
+      right: '20px',
+      border: 'none',
+      boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
+      zIndex: '999999',
+      transition: 'all 0.1s ease-in-out'
+    }
+  }
+};
+
+// New SessionManager class to handle session-related operations
+class SessionManager {
+  static async createGuestSession() {
+    try {
+      const response = await fetch(`${CONFIG.API_URL}/session/guest`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'x-client-id': window.ROWBOAT_CONFIG.clientId
+        },
+      });
+      
+      if (!response.ok) throw new Error('Failed to create session');
+      
+      const data = await response.json();
+      CookieManager.setCookie(CONFIG.STORAGE_KEYS.SESSION, data.sessionId);
+      return true;
+    } catch (error) {
+      console.error('Failed to create chat session:', error);
+      return false;
+    }
+  }
+}
+
+// New CookieManager class for cookie operations
+class CookieManager {
+  static getCookie(name) {
+    const value = `; ${document.cookie}`;
+    const parts = value.split(`; ${name}=`);
+    if (parts.length === 2) return parts.pop().split(';').shift();
+    return null;
+  }
+
+  static setCookie(name, value) {
+    document.cookie = `${name}=${value}; path=/`;
+  }
+
+  static deleteCookie(name) {
+    document.cookie = `${name}=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT`;
+  }
+}
+
+// New IframeManager class to handle iframe-specific operations
+class IframeManager {
+  static createIframe(url, isMinimized) {
+    const iframe = document.createElement('iframe');
+    iframe.hidden = true;
+    iframe.src = url.toString();
+    
+    Object.assign(iframe.style, CONFIG.IFRAME_STYLES.BASE);
+    IframeManager.updateSize(iframe, isMinimized);
+    
+    return iframe;
+  }
+
+  static updateSize(iframe, isMinimized) {
+    const styles = isMinimized ? CONFIG.IFRAME_STYLES.MINIMIZED : CONFIG.IFRAME_STYLES.MAXIMIZED;
+    Object.assign(iframe.style, styles);
+  }
+
+  static removeIframe(iframe) {
+    if (iframe && iframe.parentNode) {
+      iframe.parentNode.removeChild(iframe);
+    }
+  }
+}
+
+// Refactored main ChatWidget class
+class ChatWidget {
+  constructor() {
+    this.iframe = null;
+    this.messageHandlers = {
+      chatLoaded: () => this.iframe.hidden = false,
+      chatStateChange: (data) => this.handleStateChange(data),
+      sessionExpired: () => this.handleSessionExpired()
+    };
+    
+    this.init();
+  }
+
+  async init() {
+    const sessionId = CookieManager.getCookie(CONFIG.STORAGE_KEYS.SESSION);
+    if (!sessionId && !(await SessionManager.createGuestSession())) {
+      console.error('Chat widget initialization failed: Could not create session');
+      return;
+    }
+    
+    this.createAndMountIframe();
+    this.setupEventListeners();
+  }
+
+  createAndMountIframe() {
+    const url = this.buildUrl();
+    const isMinimized = this.getStoredMinimizedState();
+    this.iframe = IframeManager.createIframe(url, isMinimized);
+    document.body.appendChild(this.iframe);
+  }
+
+  buildUrl() {
+    const sessionId = CookieManager.getCookie(CONFIG.STORAGE_KEYS.SESSION);
+    const isMinimized = this.getStoredMinimizedState();
+    
+    const url = new URL(`${CONFIG.CHAT_URL}/`);
+    url.searchParams.append('session_id', sessionId);
+    url.searchParams.append('minimized', isMinimized);
+    
+    return url;
+  }
+
+  setupEventListeners() {
+    window.addEventListener('message', (event) => this.handleMessage(event));
+  }
+
+  handleMessage(event) {
+    if (event.origin !== CONFIG.CHAT_URL) return;
+
+    if (this.messageHandlers[event.data.type]) {
+      this.messageHandlers[event.data.type](event.data);
+    }
+  }
+
+  async handleSessionExpired() {
+    console.log("Session expired");
+    IframeManager.removeIframe(this.iframe);
+    CookieManager.deleteCookie(CONFIG.STORAGE_KEYS.SESSION);
+    
+    const sessionCreated = await SessionManager.createGuestSession();
+    if (!sessionCreated) {
+      console.error('Failed to recreate session after expiry');
+      return;
+    }
+    
+    this.createAndMountIframe();
+    document.body.appendChild(this.iframe);
+  }
+
+  handleStateChange(data) {
+    localStorage.setItem(CONFIG.STORAGE_KEYS.MINIMIZED, data.isMinimized);
+    IframeManager.updateSize(this.iframe, data.isMinimized);
+  }
+
+  getStoredMinimizedState() {
+    return localStorage.getItem(CONFIG.STORAGE_KEYS.MINIMIZED) !== 'false';
+  }
+}
+
+// Initialize when DOM is ready
+if (document.readyState === 'complete') {
+  new ChatWidget();
+} else {
+  window.addEventListener('load', () => new ChatWidget());
+}

apps/chat_widget/app/api/bootstrap.js/route.ts

@@ -0,0 +1,35 @@
+import { promises as fs } from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+export const dynamic = 'force-dynamic'
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+// Read the file once when the module loads
+const jsFileContents = fs.readFile(
+  path.join(__dirname, 'bootstrap.js'),
+  'utf-8'
+);
+
+export async function GET() {
+  try {
+    // Reuse the cached content
+    const template = await jsFileContents;
+    
+    // Replace placeholder values with actual URLs
+    const contents = template
+      .replace('__CHAT_WIDGET_HOST__', process.env.CHAT_WIDGET_HOST || '')
+      .replace('__ROWBOAT_HOST__', process.env.ROWBOAT_HOST || '');
+    
+    return new Response(contents, {
+      headers: {
+        'Content-Type': 'application/javascript',
+        'Cache-Control': 'no-cache, no-store, must-revalidate',
+      },
+    });
+  } catch (error) {
+    console.error('Error serving bootstrap.js:', error);
+    return new Response('Error loading script', { status: 500 });
+  }
+}

apps/chat_widget/app/app.tsx

@@ -0,0 +1,466 @@
+"use client";
+import { useEffect, useRef, useState, useCallback } from "react";
+import { useSearchParams } from "next/navigation";
+import { apiV1 } from "rowboat-shared";
+import { z } from "zod";
+import { Button, Dropdown, DropdownItem, DropdownMenu, DropdownTrigger, Textarea } from "@nextui-org/react";
+import MarkdownContent from "./markdown-content";
+
+type Message = {
+  role: "user" | "assistant" | "system" | "tool";
+  content: string;
+  tool_call_id?: string;
+  tool_name?: string;
+}
+
+function ChatWindowHeader({
+  chatId,
+  closeChat,
+  closed,
+  setMinimized,
+}: {
+  chatId: string | null;
+  closeChat: () => Promise<void>;
+  closed: boolean;
+  setMinimized: (minimized: boolean) => void;
+}) {
+  return <div className="shrink-0 flex justify-between items-center gap-2 bg-gray-400 px-2 py-1 rounded-t-lg dark:bg-gray-800">
+    <div className="text-gray-800 dark:text-white">Chat</div>
+    <div className="flex gap-1 items-center">
+      {(chatId && !closed) && <Dropdown>
+        <DropdownTrigger>
+          <button>
+            <svg className="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+              <path stroke="currentColor" strokeLinecap="round" strokeWidth="2" d="M6 12h.01m6 0h.01m5.99 0h.01" />
+            </svg>
+          </button>
+        </DropdownTrigger>
+        <DropdownMenu onAction={(key) => {
+          if (key === "close") {
+            closeChat();
+          }
+        }}>
+          <DropdownItem key="close">
+            Close chat
+          </DropdownItem>
+        </DropdownMenu>
+      </Dropdown>}
+      <button onClick={() => setMinimized(true)}>
+        <svg className="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+          <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="m19 9-7 7-7-7" />
+        </svg>
+      </button>
+    </div>
+  </div>
+}
+
+function LoadingAssistantResponse() {
+  return <div className="flex gap-2 items-end">
+    <div className="shrink-0 w-10 h-10 bg-gray-400 rounded-full dark:bg-gray-800"></div>
+    <div className="bg-white rounded-md dark:bg-gray-800 text-gray-800 dark:text-white mr-[20%] rounded-bl-none p-2">
+      <div className="flex gap-1">
+        <div className="w-2 h-2 rounded-full bg-gray-400 dark:bg-gray-600 animate-bounce"></div>
+        <div className="w-2 h-2 rounded-full bg-gray-400 dark:bg-gray-600 animate-bounce [animation-delay:0.2s]"></div>
+        <div className="w-2 h-2 rounded-full bg-gray-400 dark:bg-gray-600 animate-bounce [animation-delay:0.4s]"></div>
+      </div>
+    </div>
+  </div>
+}
+function AssistantMessage({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return <div className="flex flex-col gap-1 items-start">
+    <div className="text-gray-800 dark:text-white text-xs pl-2">Assistant</div>
+    <div className="bg-gray-200 rounded-md dark:bg-gray-800 text-gray-800 dark:text-white mr-[20%] rounded-bl-none p-2">
+      {typeof children === 'string' ? <MarkdownContent content={children} /> : children}
+    </div>
+  </div>
+}
+
+function UserMessage({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return <div className="flex flex-col gap-1 items-end">
+    <div className="bg-gray-200 rounded-md dark:bg-gray-800 text-gray-800 dark:text-white ml-[20%] rounded-br-none p-2">
+      {typeof children === 'string' ? <MarkdownContent content={children} /> : children}
+    </div>
+  </div>
+}
+function ChatWindowMessages({
+  messages,
+  loadingAssistantResponse,
+}: {
+  messages: Message[];
+  loadingAssistantResponse: boolean;
+}) {
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [messages]);
+
+  return <div className="flex flex-col grow p-2 gap-4 overflow-auto">
+    <AssistantMessage>
+      Hello! I&apos;m Rowboat, your personal assistant. How can I help you today?
+    </AssistantMessage>
+    {messages.map((message, index) => {
+      switch (message.role) {
+        case "user":
+          return <UserMessage key={index}>{message.content}</UserMessage>;
+        case "assistant":
+          return <AssistantMessage key={index}>{message.content}</AssistantMessage>;
+        case "system":
+          return null; // Hide system messages from the UI
+        case "tool":
+          return <AssistantMessage key={index}>
+            Tool response ({message.tool_name}): {message.content}
+          </AssistantMessage>;
+        default:
+          return null;
+      }
+    })}
+    {loadingAssistantResponse && <LoadingAssistantResponse />}
+    <div ref={messagesEndRef} />
+  </div>
+}
+
+function ChatWindowInput({
+  handleUserMessage,
+}: {
+  handleUserMessage: (message: string) => Promise<void>;
+}) {
+  const [prompt, setPrompt] = useState<string>("");
+
+  function handleInputKeyDown(event: React.KeyboardEvent<HTMLInputElement>) {
+    if (event.key === 'Enter' && !event.shiftKey) {
+      event.preventDefault();
+      const input = prompt.trim();
+      setPrompt('');
+
+      handleUserMessage(input);
+    }
+  }
+
+  return <div className="bg-white rounded-md dark:bg-gray-900 shrink-0 p-2">
+    <Textarea
+      placeholder="Ask me anything..."
+      minRows={1}
+      maxRows={3}
+      variant="flat"
+      className="w-full"
+      onKeyDown={handleInputKeyDown}
+      value={prompt}
+      onValueChange={setPrompt}
+    />
+  </div>
+}
+
+function ChatWindowBody({
+  chatId,
+  createChat,
+  getAssistantResponse,
+  closed,
+  resetState,
+  messages,
+  setMessages,
+}: {
+  chatId: string | null;
+  createChat: () => Promise<string>;
+  getAssistantResponse: (chatId: string, message: string) => Promise<Message>;
+  closed: boolean;
+  resetState: () => Promise<void>;
+  messages: Message[];
+  setMessages: (messages: Message[]) => void;
+}) {
+  const [loadingAssistantResponse, setLoadingAssistantResponse] = useState<boolean>(false);
+
+  async function handleUserMessage(message: string) {
+    const userMessage: Message = { role: "user", content: message };
+    setMessages([...messages, userMessage]);
+    setLoadingAssistantResponse(true);
+
+    let availableChatId = chatId;
+    if (!availableChatId) {
+      availableChatId = await createChat();
+    }
+
+    const response = await getAssistantResponse(availableChatId, message);
+    setMessages([...messages, userMessage, response]);
+    setLoadingAssistantResponse(false);
+  }
+
+  return <div className="flex flex-col grow bg-white rounded-b-lg dark:bg-gray-900 overflow-auto">
+    <ChatWindowMessages messages={messages} loadingAssistantResponse={loadingAssistantResponse} />
+    {!closed && <ChatWindowInput
+      handleUserMessage={handleUserMessage}
+    />}
+    {closed && <div className="flex flex-col items-center py-4 gap-2">
+      <div className="text-gray-800 dark:text-white">This chat is closed</div>
+      <Button
+        onPress={resetState}
+      >
+        Start new chat
+      </Button>
+    </div>}
+  </div>
+}
+
+function ChatWindow({
+  chatId,
+  closed,
+  closeChat,
+  createChat,
+  getAssistantResponse,
+  resetState,
+  messages,
+  setMessages,
+  setMinimized,
+}: {
+  chatId: string | null;
+  closed: boolean;
+  closeChat: () => Promise<void>;
+  createChat: () => Promise<string>;
+  getAssistantResponse: (chatId: string, message: string) => Promise<Message>;
+  resetState: () => Promise<void>;
+  messages: Message[];
+  setMessages: (messages: Message[]) => void;
+  setMinimized: (minimized: boolean) => void;
+}) {
+  return <div className="h-full flex flex-col rounded-lg overflow-hidden">
+    <ChatWindowHeader
+      chatId={chatId}
+      closeChat={closeChat}
+      closed={closed}
+      setMinimized={setMinimized}
+    />
+    <ChatWindowBody
+      chatId={chatId}
+      createChat={createChat}
+      getAssistantResponse={getAssistantResponse}
+      closed={closed}
+      resetState={resetState}
+      messages={messages}
+      setMessages={setMessages}
+    />
+  </div>
+}
+
+export function App({
+  apiUrl,
+}: {
+  apiUrl: string;
+}) {
+  const searchParams = useSearchParams();
+  const sessionId = searchParams.get("session_id");
+  const [minimized, setMinimized] = useState(searchParams.get("minimized") === 'true');
+  const [chatId, setChatId] = useState<string | null>(null);
+  const [closed, setClosed] = useState(false);
+  const [messages, setMessages] = useState<Message[]>([]);
+
+  const fetchLastChat = useCallback(async (): Promise<{
+    chat: z.infer<typeof apiV1.ApiGetChatsResponse.shape.chats.element>;
+    messages: Message[];
+  } | null> => {
+    const response = await fetch(`${apiUrl}/chats`, {
+      headers: {
+        "Authorization": `Bearer ${sessionId}`,
+      },
+    });
+    if (response.status === 403) {
+      window.parent.postMessage({
+        type: 'sessionExpired'
+      }, '*');
+      return null;
+    }
+    if (!response.ok) {
+      throw new Error("Failed to fetch last chat");
+    }
+    const { chats }: z.infer<typeof apiV1.ApiGetChatsResponse> = await response.json();
+    if (chats.length === 0) {
+      return null;
+    }
+    const chat = chats[0];
+
+    // fetch all chat messages
+    let allMessages: Message[] = [];
+    let nextCursor: string | undefined = undefined;
+
+    do {
+      const url = new URL(`${apiUrl}/chats/${chat.id}/messages`);
+      if (nextCursor) {
+        url.searchParams.set('next', nextCursor);
+      }
+
+      const messagesResponse = await fetch(url, {
+        headers: {
+          "Authorization": `Bearer ${sessionId}`,
+        },
+      });
+      if (!messagesResponse.ok) {
+        throw new Error("Failed to fetch chat messages");
+      }
+      const { messages, next }: z.infer<typeof apiV1.ApiGetChatMessagesResponse> = await messagesResponse.json();
+      
+      const formattedMessages = messages.map(m => ({
+        role: m.role,
+        content: m.role === "assistant" ? (m.content || '') : m.content,
+        ...(m.role === "tool" ? {
+          tool_call_id: m.tool_call_id,
+          tool_name: m.tool_name,
+        } : {})
+      }));
+      
+      allMessages = [...allMessages, ...formattedMessages];
+      nextCursor = next;
+    } while (nextCursor);
+
+    return {
+      chat,
+      messages: allMessages,
+    };
+  }, [sessionId]);
+
+  async function resetState() {
+    setChatId(null);
+    setClosed(false);
+    setMessages([]);
+  }
+
+  async function closeChat() {
+    const response = await fetch(`${apiUrl}/chats/${chatId}/close`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "Authorization": `Bearer ${sessionId}`,
+      },
+    });
+    if (response.status === 403) {
+      window.parent.postMessage({
+        type: 'sessionExpired'
+      }, '*');
+      return;
+    }
+    if (!response.ok) {
+      throw new Error("Failed to close chat");
+    }
+    setClosed(true);
+  }
+
+  async function createChat(): Promise<string> {
+    const response = await fetch(`${apiUrl}/chats`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "Authorization": `Bearer ${sessionId}`,
+      },
+      body: JSON.stringify({}),
+    });
+
+    if (response.status === 403) {
+      window.parent.postMessage({
+        type: 'sessionExpired'
+      }, '*');
+      throw new Error("Session expired");
+    }
+
+    const { id }: z.infer<typeof apiV1.ApiCreateChatResponse> = await response.json();
+    setChatId(id);
+    return id;
+  }
+
+  async function getAssistantResponse(chatId: string, message: string): Promise<Message> {
+    const response = await fetch(`${apiUrl}/chats/${chatId}/turn`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "Authorization": `Bearer ${sessionId}`,
+      },
+      body: JSON.stringify({
+        message: message,
+      }),
+    });
+    if (response.status === 403) {
+      window.parent.postMessage({
+        type: 'sessionExpired'
+      }, '*');
+      throw new Error("Session expired");
+    }
+    if (!response.ok) {
+      throw new Error("Failed to get assistant response");
+    }
+    const { content }: z.infer<typeof apiV1.ApiChatTurnResponse> = await response.json();
+    return {
+      role: "assistant",
+      content: content || '',
+    };
+  }
+
+  useEffect(() => {
+    window.parent.postMessage({
+      type: 'chatStateChange',
+      isMinimized: minimized
+    }, '*');
+  }, [minimized]);
+
+  useEffect(() => {
+    let abort = false;
+    async function process(){
+      const lastChat = await fetchLastChat();
+      if (abort) {
+        return;
+      }
+      if (lastChat) {
+        setChatId(lastChat.chat.id);
+        setClosed(lastChat.chat.closed || false);
+        setMessages(lastChat.messages);
+      }
+    }
+    process()
+      .finally(() => {
+        if (!abort) {
+          window.parent.postMessage({
+            type: 'chatLoaded',
+          }, '*');
+        }
+      });
+
+    return () => {
+      abort = true;
+    }
+  }, [sessionId, fetchLastChat]);
+
+  if (!sessionId) {
+    return <></>;
+  }
+
+  return <>
+    {minimized && <div className="fixed bottom-0 right-0">
+      <button
+        onClick={() => setMinimized(false)}
+        className="w-12 h-12 bg-gray-200 dark:bg-gray-800 hover:bg-gray-300 dark:hover:bg-gray-700 rounded-full flex items-center justify-center shadow-lg transition-colors"
+      >
+        <svg className="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+          <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 17h6l3 3v-3h2V9h-2M4 4h11v8H9l-3 3v-3H4V4Z" />
+        </svg>
+      </button>
+    </div>}
+    {!minimized && <div className="fixed h-full">
+      <ChatWindow
+        key={sessionId}
+        chatId={chatId}
+        closed={closed}
+        closeChat={closeChat}
+        createChat={createChat}
+        getAssistantResponse={getAssistantResponse}
+        resetState={resetState}
+        messages={messages}
+        setMessages={setMessages}
+        setMinimized={setMinimized}
+      />
+    </div>}
+  </>
+}

apps/chat_widget/app/globals.css

@@ -0,0 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+  font-family: Arial, Helvetica, sans-serif;
+}

apps/chat_widget/app/layout.tsx

@@ -0,0 +1,35 @@
+import type { Metadata } from "next";
+import localFont from "next/font/local";
+import "./globals.css";
+
+const geistSans = localFont({
+  src: "./fonts/GeistVF.woff",
+  variable: "--font-geist-sans",
+  weight: "100 900",
+});
+const geistMono = localFont({
+  src: "./fonts/GeistMonoVF.woff",
+  variable: "--font-geist-mono",
+  weight: "100 900",
+});
+
+export const metadata: Metadata = {
+  title: "RowBoat Chat",
+  description: "RowBoat Chat",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en" className="h-full bg-transparent">
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased h-full`}
+      >
+        {children}
+      </body>
+    </html>
+  );
+}

apps/chat_widget/app/markdown-content.tsx

@@ -0,0 +1,51 @@
+import Markdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
+
+export default function MarkdownContent({ content }: { content: string }) {
+    return <Markdown
+        className="overflow-auto break-words"
+        remarkPlugins={[remarkGfm]}
+        components={{
+            strong({ children }) {
+                return <span className="font-semibold">{children}</span>
+            },
+            p({ children }) {
+                return <p className="py-1">{children}</p>
+            },
+            ul({ children }) {
+                return <ul className="py-1 pl-5 list-disc">{children}</ul>
+            },
+            ol({ children }) {
+                return <ul className="py-1 pl-5 list-decimal">{children}</ul>
+            },
+            h3({ children }) {
+                return <h3 className="font-semibold">{children}</h3>
+            },
+            table({ children }) {
+                return <table className="my-1 border-collapse border border-gray-400 rounded">{children}</table>
+            },
+            th({ children }) {
+                return <th className="px-2 py-1 border-collapse border border-gray-300 rounded">{children}</th>
+            },
+            td({ children }) {
+                return <td className="px-2 py-1 border-collapse border border-gray-300 rounded">{children}</td>
+            },
+            blockquote({ children }) {
+                return <blockquote className='bg-gray-200 px-1'>{children}</blockquote>;
+            },
+            a(props) {
+                const { children, ...rest } = props
+                return <a className="inline-flex items-center gap-1" target="_blank" {...rest} >
+                    <span className='underline'>
+                        {children}
+                    </span>
+                    <svg className="w-[16px] h-[16px]" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+                        <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1" d="M18 14v4.833A1.166 1.166 0 0 1 16.833 20H5.167A1.167 1.167 0 0 1 4 18.833V7.167A1.166 1.166 0 0 1 5.167 6h4.618m4.447-2H20v5.768m-7.889 2.121 7.778-7.778" />
+                    </svg>
+                </a>
+            },
+        }}
+    >
+        {content}
+    </Markdown>;
+}

apps/chat_widget/app/page.tsx

@@ -0,0 +1,10 @@
+import { Suspense } from 'react';
+import { App } from './app';
+
+export const dynamic = 'force-dynamic';
+
+export default function Page() {
+  return <Suspense>
+    <App apiUrl={`${process.env.ROWBOAT_HOST}/api/widget/v1`} />
+  </Suspense>
+}

apps/chat_widget/app/providers.tsx

@@ -0,0 +1,16 @@
+import * as React from "react";
+
+// 1. import `NextUIProvider` component
+import {NextUIProvider} from "@nextui-org/react";
+
+export default function Providers({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <NextUIProvider>
+      {children}
+    </NextUIProvider>
+  );
+}

apps/chat_widget/next.config.mjs

@@ -0,0 +1,6 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+    output: 'standalone',
+};
+
+export default nextConfig;

apps/chat_widget/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "chat-widget",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@nextui-org/react": "^2.4.8",
+    "framer-motion": "^11.11.11",
+    "next": "^14.2.16",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-markdown": "^9.0.1",
+    "remark-gfm": "^4.0.0",
+    "rowboat-shared": "github:rowboatlabs/shared",
+    "zod": "^3.23.8"
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "eslint": "^8",
+    "eslint-config-next": "15.0.2",
+    "postcss": "^8",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5"
+  }
+}

apps/chat_widget/postcss.config.mjs

@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {},
+  },
+};
+
+export default config;

apps/chat_widget/public/file.svg

@@ -0,0 +1 @@
+<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>

apps/chat_widget/public/globe.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>

apps/chat_widget/public/next.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>

apps/chat_widget/public/vercel.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>

apps/chat_widget/public/window.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>

apps/chat_widget/tailwind.config.ts

@@ -0,0 +1,16 @@
+import { nextui } from "@nextui-org/react";
+import type { Config } from "tailwindcss";
+
+const config: Config = {
+  content: [
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+    "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [nextui()],
+};
+export default config;

apps/chat_widget/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}

apps/rowboat/app/api/widget/v1/chats/[chatId]/close/route.ts

@@ -1,12 +1,8 @@
 import { NextRequest } from "next/server";
-import { apiV1 } from "rowboat-shared";
+import { chatsCollection } from "../../../../../../lib/mongodb";
-import { db } from "../../../../../../lib/mongodb";
-import { z } from "zod";
 import { ObjectId } from "mongodb";
 import { authCheck } from "../../../utils";
 
-const chatsCollection = db.collection<z.infer<typeof apiV1.Chat>>("chats");
-
 export async function POST(
     request: NextRequest,
     { params }: { params: { chatId: string } }

apps/rowboat/app/api/widget/v1/chats/[chatId]/messages/route.ts

@@ -1,13 +1,10 @@
 import { NextRequest } from "next/server";
 import { apiV1 } from "rowboat-shared";
-import { db } from "../../../../../../lib/mongodb";
+import { chatsCollection, chatMessagesCollection } from "../../../../../../lib/mongodb";
 import { z } from "zod";
 import { Filter, ObjectId } from "mongodb";
 import { authCheck } from "../../../utils";
 
-const chatsCollection = db.collection<z.infer<typeof apiV1.Chat>>("chats");
-const chatMessagesCollection = db.collection<z.infer<typeof apiV1.ChatMessage>>("chatMessages");
-
 // list messages
 export async function GET(
     req: NextRequest,

apps/rowboat/app/api/widget/v1/chats/[chatId]/turn/route.ts

@@ -1,6 +1,6 @@
 import { NextRequest } from "next/server";
 import { apiV1 } from "rowboat-shared";
-import { agentWorkflowsCollection, db, projectsCollection } from "../../../../../../lib/mongodb";
+import { agentWorkflowsCollection, projectsCollection, chatsCollection, chatMessagesCollection } from "../../../../../../lib/mongodb";
 import { z } from "zod";
 import { ObjectId, WithId } from "mongodb";
 import { authCheck } from "../../../utils";
@@ -8,11 +8,12 @@ import { convertFromAgenticAPIChatMessages } from "../../../../../../lib/types/a
 import { convertToAgenticAPIChatMessages } from "../../../../../../lib/types/agents_api_types";
 import { convertWorkflowToAgenticAPI } from "../../../../../../lib/types/agents_api_types";
 import { AgenticAPIChatRequest } from "../../../../../../lib/types/agents_api_types";
-import { callClientToolWebhook, getAgenticApiResponse } from "../../../../../../lib/utils";
+import { callClientToolWebhook, getAgenticApiResponse, runRAGToolCall, mockToolResponse } from "../../../../../../lib/utils";
 import { check_query_limit } from "../../../../../../lib/rate_limiting";
+import { PrefixLogger } from "../../../../../../lib/utils";
 
-const chatsCollection = db.collection<z.infer<typeof apiV1.Chat>>("chats");
+// Add max turns constant at the top with other constants
-const chatMessagesCollection = db.collection<z.infer<typeof apiV1.ChatMessage>>("chatMessages");
+const MAX_TURNS = 3;
 
 // get next turn / agent response
 export async function POST(
@@ -21,9 +22,13 @@ export async function POST(
 ): Promise<Response> {
     return await authCheck(req, async (session) => {
         const { chatId } = await params;
+        const logger = new PrefixLogger(`widget-chat:${chatId}`);
+        
+        logger.log(`Processing turn request for chat ${chatId}`);
 
         // check query limit
         if (!await check_query_limit(session.projectId)) {
+            logger.log(`Query limit exceeded for project ${session.projectId}`);
             return Response.json({ error: "Query limit exceeded" }, { status: 429 });
         }
 
@@ -32,10 +37,12 @@ export async function POST(
         try {
             body = await req.json();
         } catch (e) {
+            logger.log(`Invalid JSON in request body: ${e}`);
             return Response.json({ error: "Invalid JSON in request body" }, { status: 400 });
         }
         const result = apiV1.ApiChatTurnRequest.safeParse(body);
         if (!result.success) {
+            logger.log(`Invalid request body: ${result.error.message}`);
             return Response.json({ error: `Invalid request body: ${result.error.message}` }, { status: 400 });
         }
         const userMessage: z.infer<typeof apiV1.ChatMessage> = {
@@ -90,7 +97,15 @@ export async function POST(
         const unsavedMessages: z.infer<typeof apiV1.ChatMessage>[] = [userMessage];
         let resolvingToolCalls = true;
         let state: unknown = chat.agenticState ?? {last_agent_name: startAgent};
+        let turns = 0;  // Add turns counter
+
         while (resolvingToolCalls) {
+            if (turns >= MAX_TURNS) {
+                logger.log(`Max turns (${MAX_TURNS}) reached for chat ${chatId}`);
+                throw new Error("Max turns reached");
+            }
+            turns++;
+
             const request: z.infer<typeof AgenticAPIChatRequest> = {
                 messages: convertToAgenticAPIChatMessages([systemMessage, ...messages, ...unsavedMessages]),
                 state,
@@ -99,7 +114,7 @@ export async function POST(
                 prompts,
                 startAgent,
             };
-            console.log("turn: sending agentic request", JSON.stringify(request, null, 2));
+            logger.log(`Turn ${turns}: sending agentic request`);
             const response = await getAgenticApiResponse(request);
             state = response.state;
             if (response.messages.length === 0) {
@@ -116,18 +131,43 @@ export async function POST(
             // if the last messages is tool call, execute them
             const lastMessage = convertedMessages[convertedMessages.length - 1];
             if (lastMessage.role === 'assistant' && 'tool_calls' in lastMessage) {
-                // execute tool calls
+                logger.log(`Processing ${lastMessage.tool_calls.length} tool calls`);
-                console.log("Executing tool calls", lastMessage.tool_calls);
                 const toolCallResults = await Promise.all(lastMessage.tool_calls.map(async toolCall => {
-                    console.log('executing tool call', toolCall);
+                    logger.log(`Executing tool call: ${toolCall.function.name}`);
                     try {
+                        if (toolCall.function.name === "getArticleInfo") {
+                            logger.log(`Processing RAG tool call for agent ${lastMessage.agenticSender}`);
+                            const agent = workflow.agents.find(a => a.name === lastMessage.agenticSender);
+                            if (!agent || !agent.ragDataSources) {
+                                throw new Error("Agent not found or has no data sources");
+                            }
+                            return await runRAGToolCall(
+                                session.projectId,
+                                toolCall.function.arguments,
+                                agent.ragDataSources,
+                                agent.ragReturnType,
+                                agent.ragK
+                            );
+                        }
+
+                        const workflowTool = workflow.tools.find(t => t.name === toolCall.function.name);
+                        if (workflowTool?.mockTool) {
+                            logger.log(`Using mock response for tool: ${toolCall.function.name}`);
+                            return await mockToolResponse(
+                                toolCall.id,
+                                [...messages, ...unsavedMessages],
+                                workflowTool.mockInstructions || ''
+                            );
+                        }
+
+                        logger.log(`Calling webhook for tool: ${toolCall.function.name}`);
                         return await callClientToolWebhook(
                             toolCall,
                             [...messages, ...unsavedMessages],
                             session.projectId,
                         );
                     } catch (error) {
-                        console.error(`Error executing tool call ${toolCall.id}:`, error);
+                        logger.log(`Error executing tool call ${toolCall.id}: ${error}`);
                         return { error: "Tool execution failed" };
                     }
                 }));
@@ -151,11 +191,11 @@ export async function POST(
             }
         }
 
-        // save unsaved messages and update chat state
+        logger.log(`Saving ${unsavedMessages.length} new messages and updating chat state`);
         await chatMessagesCollection.insertMany(unsavedMessages);
         await chatsCollection.updateOne({ _id: new ObjectId(chatId) }, { $set: { agenticState: state } });
 
-        // send back the last message
+        logger.log(`Turn processing completed successfully`);
         const lastMessage = unsavedMessages[unsavedMessages.length - 1] as WithId<z.infer<typeof apiV1.ChatMessage>>;
         return Response.json({
             ...lastMessage,

apps/rowboat/app/lib/mongodb.ts

@@ -9,6 +9,7 @@ import { DataSourceDoc } from "./types/datasource_types";
 import { DataSource } from "./types/datasource_types";
 import { TestScenario, TestResult, TestRun, TestProfile, TestSimulation } from "./types/testing_types";
 import { z } from 'zod';
+import { apiV1 } from "rowboat-shared";
 
 const client = new MongoClient(process.env["MONGODB_CONNECTION_STRING"] || "mongodb://localhost:27017");
 
@@ -26,3 +27,5 @@ export const testProfilesCollection = db.collection<z.infer<typeof TestProfile>>
 export const testSimulationsCollection = db.collection<z.infer<typeof TestSimulation>>("test_simulations");
 export const testRunsCollection = db.collection<z.infer<typeof TestRun>>("test_runs");
 export const testResultsCollection = db.collection<z.infer<typeof TestResult>>("test_results");
+export const chatsCollection = db.collection<z.infer<typeof apiV1.Chat>>("chats");
+export const chatMessagesCollection = db.collection<z.infer<typeof apiV1.ChatMessage>>("chat_messages");

apps/rowboat/app/projects/[projectId]/config/app.tsx

@@ -427,8 +427,10 @@ export function WebhookUrlSection({
 
 export function ChatWidgetSection({
     projectId,
+    chatWidgetHost,
 }: {
     projectId: string;
+    chatWidgetHost: string;
 }) {
     const [loading, setLoading] = useState(false);
     const [chatClientId, setChatClientId] = useState<string | null>(null);
@@ -448,7 +450,7 @@ export function ChatWidgetSection({
     };
     (function(d) {
         var s = d.createElement('script');
-        s.src = 'https://chat.rowboatlabs.com/bootstrap.js';
+        s.src = '${chatWidgetHost}/api/bootstrap.js';
         s.async = true;
         d.getElementsByTagName('head')[0].appendChild(s);
     })(document);
@@ -567,8 +569,10 @@ export function DeleteProjectSection({
 
 export default function App({
     projectId,
+    chatWidgetHost,
 }: {
     projectId: string;
+    chatWidgetHost: string;
 }) {
     return <div className="flex flex-col h-full">
         <div className="shrink-0 flex justify-between items-center pb-4 border-b border-border">
@@ -582,7 +586,7 @@ export default function App({
                 <SecretSection projectId={projectId} />
                 <ApiKeysSection projectId={projectId} />
                 <WebhookUrlSection projectId={projectId} />
-                {/* <ChatWidgetSection projectId={projectId} /> */}
+                <ChatWidgetSection projectId={projectId} chatWidgetHost={chatWidgetHost} />
                 <DeleteProjectSection projectId={projectId} />
             </div>
         </div>

apps/rowboat/app/projects/[projectId]/config/page.tsx

@@ -11,5 +11,8 @@ export default function Page({
         projectId: string;
     };
 }) {
-    return <App projectId={params.projectId} />;
+    return <App
+        projectId={params.projectId}
+        chatWidgetHost={process.env.CHAT_WIDGET_HOST || 'https://chat.rowboatlabs.com'}
+    />;
 }

apps/rowboat/middleware.ts

@@ -41,5 +41,5 @@ export async function middleware(request: NextRequest, event: NextFetchEvent) {
 }
 
 export const config = {
-  matcher: ['/projects/:path*', '/api/v1/:path*'],
+  matcher: ['/projects/:path*', '/api/v1/:path*', '/api/widget/v1/:path*'],
 };

docker-compose.yml

@@ -26,6 +26,7 @@ services:
       - REDIS_URL=redis://redis:6379
       - MAX_QUERIES_PER_MINUTE=${MAX_QUERIES_PER_MINUTE}
       - MAX_PROJECTS_PER_USER=${MAX_PROJECTS_PER_USER}
+      - CHAT_WIDGET_HOST=${CHAT_WIDGET_HOST}
     restart: unless-stopped
 
   agents:
@@ -78,6 +79,18 @@ services:
       - "8000:8000"
     restart: unless-stopped
   
+  chat_widget:
+    build:
+      context: ./apps/chat_widget
+      dockerfile: Dockerfile
+    ports:
+      - "3006:3006"
+    environment:
+      - PORT=3006
+      - CHAT_WIDGET_HOST=${CHAT_WIDGET_HOST}
+      - ROWBOAT_HOST=${ROWBOAT_HOST}
+    restart: unless-stopped
+
   redis:
     image: redis:latest
     ports: