Chat-widget: Fix test theming & update env workflows

CONTRIBUTING.md

@@ -24,7 +24,8 @@ Install the following tools:
 1. **Create environment files:**
 
    ```sh
-   cd server && touch .env && cd ../pql && touch .env
+   cp server/.env.template server/.env
+   cp pql/.env.template pql/.env
    ```
 
    Fill them with the key-values from the **Product ACT** vault in 1Password (ask a team member for access if needed).

README.md

@@ -16,12 +16,14 @@ This repository demonstrates a complete PromptQL-powered chat bot for documentat
 [DDN CLI](https://promptql.io/docs/reference/cli/installation/)
 
 ```sh
-# 1. Clone and setup
+# 1. Clone and setup environment files
 git clone https://github.com/hasura/pql-docs-bot.git
 cd pql-docs-bot
-touch .env && cd pql && touch .env
+cp server/.env.template server/.env
+cp pql/.env.template pql/.env
 
-# 2. Add environment variables from 1Password (Product ACT vault)
+# 2. Add environment variable values from 1Password (Product ACT vault)
+# Edit server/.env and pql/.env with the actual values
 
 # 3. Start services
 cd server && docker compose up -d

packages/chat-widget/test-app/src/App.css

@@ -2,6 +2,7 @@
   min-height: 100vh;
   background: #f8fafc;
   padding: 20px;
+  transition: background-color 0.2s ease;
 }
 
 .header {
@@ -17,13 +18,17 @@
 .header h1 {
   margin: 0;
   color: #1e293b;
+  transition: color 0.2s ease;
 }
 
 .theme-controls select {
   margin-left: 8px;
   padding: 4px 8px;
   border: 1px solid #d1d5db;
   border-radius: 4px;
+  background: white;
+  color: #1e293b;
+  transition: all 0.2s ease;
 }
 
 .main {
@@ -36,12 +41,43 @@
   max-width: 600px;
 }
 
+/* Light theme explicit override */
+html[data-theme="light"] .app {
+  background: #ffffff;
+}
+
+html[data-theme="light"] .header h1 {
+  color: #000000;
+}
+
+/* Dark theme overrides */
+html[data-theme="dark"] .app {
+  background: #0f172a;
+}
+
+html[data-theme="dark"] .header h1 {
+  color: #f1f5f9;
+}
+
+html[data-theme="dark"] .theme-controls select {
+  background: #1e293b;
+  color: #f1f5f9;
+  border-color: #334155;
+}
+
+/* Auto theme (existing media query) */
 @media (prefers-color-scheme: dark) {
   .app {
     background: #0f172a;
   }
-  
+
   .header h1 {
     color: #f1f5f9;
   }
-}
+
+  .theme-controls select {
+    background: #1e293b;
+    color: #f1f5f9;
+    border-color: #334155;
+  }
+}

packages/chat-widget/test-app/src/App.tsx

@@ -1,10 +1,22 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { ChatWidget } from "@pql/chat-widget";
 import "./App.css";
 
 function App() {
   const [theme, setTheme] = useState<"light" | "dark" | "auto">("auto");
 
+  useEffect(() => {
+    const root = document.documentElement;
+
+    if (theme === "dark") {
+      root.setAttribute("data-theme", "dark");
+    } else if (theme === "light") {
+      root.setAttribute("data-theme", "light");
+    } else {
+      root.removeAttribute("data-theme");
+    }
+  }, [theme]);
+
   return (
     <div className="app">
       <header className="header">

pql/.env.template

@@ -0,0 +1,17 @@
+APP_PG_AUTHORIZATION_HEADER=""
+APP_PG_HASURA_CONNECTOR_PORT=5644
+APP_PG_HASURA_SERVICE_TOKEN_SECRET=""
+APP_PG_JDBC_SCHEMAS=""
+APP_PG_JDBC_URL=""
+APP_PG_OTEL_EXPORTER_OTLP_ENDPOINT="http://local.hasura.dev:4317"
+APP_PG_OTEL_SERVICE_NAME="app_pg"
+APP_PG_READ_URL="http://local.hasura.dev:5644"
+APP_PG_WRITE_URL="http://local.hasura.dev:5644"
+APP_TS_AUTHORIZATION_HEADER=""
+APP_TS_HASURA_CONNECTOR_PORT=9789
+APP_TS_HASURA_SERVICE_TOKEN_SECRET=""
+APP_TS_OTEL_EXPORTER_OTLP_ENDPOINT="http://local.hasura.dev:4317"
+APP_TS_OTEL_SERVICE_NAME="app_ts"
+APP_TS_READ_URL="http://local.hasura.dev:9789"
+APP_TS_WRITE_URL="http://local.hasura.dev:9789"
+ANTHROPIC_KEY=""

pql/.gitignore

@@ -1,3 +1,3 @@
 engine/build
 /.env
-/.env.*
+/.env.cloud

server/.env.template

@@ -0,0 +1,4 @@
+SERVER_PORT=4000
+NGROK_AUTHTOKEN=""
+PQL_ENDPOINT_QUERY=""
+PQL_API_KEY=""