React packaging (#542)

Co-authored-by: Jacob Habib <jahgoreds@gmail.com>
Co-authored-by: Luke Lalor <lukehlalor@gmail.com>

.github/workflows/release_webui_packages.yml

@@ -0,0 +1,52 @@
+name: Release @eidolon-components and @eidolon-client
+
+on:
+  push:
+    branches:
+      - main
+
+concurrency: ${{ github.workflow }}-${{ github.ref }}
+
+jobs:
+  release:
+    name: Release
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Repo
+        uses: actions/checkout@v3
+
+      - name: Setup Node.js 20
+        uses: actions/setup-node@v3
+        with:
+          node-version: 20
+
+      - name: Install pnpm
+        run: npm install -g pnpm
+
+      - name: Install Dependencies
+        run: pnpm install
+        working-directory: eidolon/webui
+
+      - name: Build Packages
+        run: pnpm build
+        working-directory: eidolon/webui
+
+      - name: Version Packages
+        run: pnpm changeset version
+        working-directory: eidolon/webui
+
+      - name: Publish Packages
+        run: |
+          pnpm --filter @eidolon/client changeset publish --no-git-checks
+          pnpm --filter @eidolon/components changeset publish --no-git-checks
+        working-directory: eidolon/webui
+
+      - name: Push Tags to GitHub
+        run: git push --follow-tags
+        working-directory: eidolon/webui
+
+      - name: Create Release Pull Request
+        id: changesets
+        uses: changesets/action@v1
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

k8s-operator/README.md

@@ -42,7 +42,9 @@ We develop on a Mac, so we have the following instructions for Mac users.  If yo
   - `ANTHROPIC_API_KEY` - your Anthropic API key if you are using Anthropic.
 
   If you already have a .env file with these keys, you can create the secret with the following command:
-  - `kubectl create secret generic eidolon --from-env-file=<location of your env file>/.env`
+```sh
+kubectl create secret generic eidolon --from-env-file=<location of your env file>/.env
+```
 
 * Install the eidolon operator
     ```sh
@@ -88,3 +90,23 @@ minikube service eidolon-server --url
 ```
 
 You can use this URL to access your eidolon server.
+
+### Running the web UI
+To start the webui, you can use the following command:
+```sh
+kubectl apply -f config/samples/webui.yaml
+```
+
+To expose the webui service we need to create a load balancer service, get the URL, and update the nextjs config map with the URL.:
+```sh
+# Get the URL from minikube
+API_URL=$(minikube service eidolon-webui --url)
+
+# Update the ConfigMap
+kubectl create configmap eidolon-webui-config --from-literal=NEXT_PUBLIC_API_URL=$API_URL -o yaml --dry-run=client | kubectl apply -f -
+
+# Restart the deployment to pick up the new ConfigMap value
+kubectl rollout restart deployment eidolon-webui-deployment
+
+echo "Web UI is available at $API_URL"
+```

k8s-operator/config/samples/webui.yaml

@@ -0,0 +1,30 @@
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: eidolon-webui-deployment
+spec:
+  replicas: 1
+  selector:
+    matchLabels:
+      app: webui
+  template:
+    metadata:
+      labels:
+        app: webui
+    spec:
+      containers:
+      - name: webui
+        image: docker.io/eidolonai/webui:1.0.50
+        imagePullPolicy: IfNotPresent
+        env:
+          - name: NEXTAUTH_SECRET
+            value: "mysecret"
+          - name: EIDOLON_SERVER
+            value: "http://eidolon-server:8080"
+        envFrom:
+          - secretRef:
+              name: eidolon-webui
+              optional: true
+          - configMapRef:
+              name: eidolon-webui-config
+              optional: true

webui/.changeset/README.md

@@ -0,0 +1,8 @@
+# Changesets
+
+Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
+with multi-package repos, or single-package repos to help you version and publish your code. You can
+find the full documentation for it [in our repository](https://github.com/changesets/changesets)
+
+We have a quick list of common questions to get you started engaging with this project in
+[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)

webui/.changeset/config.json

@@ -0,0 +1,11 @@
+{
+  "$schema": "https://unpkg.com/@changesets/config@3.0.1/schema.json",
+  "changelog": "@changesets/cli/changelog",
+  "commit": false,
+  "fixed": [],
+  "linked": [],
+  "access": "restricted",
+  "baseBranch": "main",
+  "updateInternalDependencies": "patch",
+  "ignore": []
+}

webui/Dockerfile

@@ -15,9 +15,28 @@ COPY .gitignore .gitignore
 COPY --from=builder /app/out/json/ .
 RUN pnpm install
 
+# Build eidolon-client first
+FROM base_installer as eidolon_client_builder
+WORKDIR /app/packages/eidolon-client
+COPY packages/eidolon-client .
+COPY packages/typescript-config /app/packages/typescript-config
+RUN pnpm install
+RUN pnpm run build
+
+# Build eidolon-components next
+FROM eidolon_client_builder as eidolon_components_builder
+WORKDIR /app/packages/eidolon-components
+COPY packages/eidolon-components .
+COPY packages/typescript-config /app/packages/typescript-config
+COPY --from=eidolon_client_builder /app/packages/eidolon-client/dist /app/packages/eidolon-client/dist
+RUN pnpm install
+RUN pnpm run build
+
 # Build from our project, which will be constant cache misses
 FROM base_installer as installer
 COPY --from=builder /app/out/full/ .
+COPY --from=eidolon_client_builder /app/packages/eidolon-client/dist /app/packages/eidolon-client/dist
+COPY --from=eidolon_components_builder /app/packages/eidolon-components/dist /app/packages/eidolon-components/dist
 COPY .eslintrc.js .eslintrc.js
 RUN pnpm --prefix apps/eidolon-ui2 run build
 
@@ -30,7 +49,7 @@ RUN addgroup --system --gid 1001 nodejs
 RUN adduser --system --uid 1001 nextjs
 USER nextjs
 
-COPY --from=installer /app/apps/eidolon-ui2/next.config.js .
+COPY --from=installer /app/apps/eidolon-ui2/next.config.mjs .
 COPY --from=installer /app/apps/eidolon-ui2/package.json .
 # Leverage standalone output traces to reduce image size
 # https://nextjs.org/docs/advanced-features/output-file-tracing
@@ -42,4 +61,4 @@ ENV NEXTAUTH_URL=http://localhost:3000/api/auth
 ENV AUTH_TRUST_HOST=http://localhost:3000
 ENV NEXTAUTH_SECRET=secret
 ENV EIDOLON_AUTH_PROVIDERS=""
-CMD node apps/eidolon-ui2/server.js
+CMD node apps/eidolon-ui2/server.js

webui/Makefile

@@ -0,0 +1,29 @@
+.PHONY: docker push_image dockerx maybe_docker_push
+
+PROJECT ?= docker.io/eidolonai
+VERSION :=  $$(node -p "require('./package.json').version")
+
+version:
+	@echo $(VERSION)
+
+docker:
+	docker build -t ${PROJECT}/webui -t ${PROJECT}/webui:${VERSION} .
+
+push_image: docker
+	docker push ${PROJECT}/webui
+	docker push ${PROJECT}/webui:${VERSION}
+
+PLATFORMS ?= linux/arm64,linux/amd64
+CONTAINER_TOOL ?= docker
+
+dockerx:
+	# copy existing Dockerfile and insert --platform=${BUILDPLATFORM} into Dockerfile.cross, and preserve the original Dockerfile
+	sed -e '1 s/\(^FROM\)/FROM --platform=\$$\{BUILDPLATFORM\}/; t' -e ' 1,// s//FROM --platform=\$$\{BUILDPLATFORM\}/' Dockerfile > Dockerfile.cross
+	- $(CONTAINER_TOOL) buildx create --name project-v3-builder
+	$(CONTAINER_TOOL) buildx use project-v3-builder
+	- $(CONTAINER_TOOL) buildx build --platform=$(PLATFORMS) --push -f Dockerfile.cross -t ${PROJECT}/webui -t ${PROJECT}/webui:${VERSION} .
+	- $(CONTAINER_TOOL) buildx rm project-v3-builder
+	rm Dockerfile.cross
+
+maybe_docker_push:
+	@docker manifest inspect $(PROJECT)/webui:$(VERSION) >/dev/null && echo "Image exists" || $(MAKE) dockerx

webui/apps/eidolon-ui2/app/api/eidolon/eidolon_helpers.ts

@@ -1,6 +1,6 @@
-import {ProcessesHandler, ProcessEventsHandler, ProcessHandler} from "@eidolon/components";
+import {ProcessesHandler, ProcessEventsHandler, ProcessHandler} from "@eidolon/components/server";
 import {auth} from "../../../auth";
-import {AgentHandler, FileHandler, FilesHandler, MachineHandler} from "@eidolon/components/src/server/processes-server-handler";
+import {AgentHandler, FileHandler, FilesHandler, MachineHandler} from "@eidolon/components/server";
 
 const getAccessToken = async () => {
   const session = await auth()

webui/apps/eidolon-ui2/app/eidolon-apps/chatbot/app_manifest.json

@@ -11,7 +11,7 @@
     "inputLabel": "How can I help you?",
     "titleOperationName": "generate_title",
     "allowSpeech": true,
-    "speechAgent": "speech_agent",
+    "speechAgent": "speech-agent",
     "speechOperation": "speech_to_text"
   }
 }

webui/apps/eidolon-ui2/app/eidolon-apps/dev-tool/[processId]/page.tsx

@@ -2,7 +2,7 @@
 
 import * as React from "react";
 import {useEffect} from "react";
-import {DevPanel, DevParams, EidolonApp, getApps, getOperations, getProcessStatus} from "@eidolon/components";
+import {DevPanel, DevParams, EidolonApp, getApps, getOperations, getProcessStatus} from "@eidolon/components/client";
 
 export interface ProcessPageProps {
   params: {

webui/apps/eidolon-ui2/app/eidolon-apps/dev-tool/components/start-program-dialog.tsx

@@ -3,7 +3,7 @@
 import {Button, Dialog, DialogActions, DialogContent, DialogTitle, Divider, Typography} from "@mui/material";
 import * as React from "react";
 import {usePathname, useRouter} from "next/navigation";
-import {ChooseAgentForm, getAppPathFromPath} from "@eidolon/components";
+import {ChooseAgentForm, getAppPathFromPath} from "@eidolon/components/client";
 
 export function StartProgramDialog({open, onClose, machineUrl}: { machineUrl: string, open: boolean, onClose: (wasCanceled: boolean) => void }) {
   const router = useRouter()

webui/apps/eidolon-ui2/app/eidolon-apps/sp/[app_name]/[processId]/page.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import * as React from "react";
-import {CopilotPanel, CopilotParams, useProcess} from "@eidolon/components";
+import {CopilotPanel, CopilotParams, useProcess} from "@eidolon/components/client";
 import {Box} from "@mui/material";
 import {useSession} from "next-auth/react";
 import {useEffect} from "react";

webui/apps/eidolon-ui2/app/eidolon-apps/sp/[app_name]/layout.tsx

@@ -1,6 +1,6 @@
 import {ProcessWithListLayout} from "../../../../components/ProcessWithListLayout";
 import {getApp} from "@/utils/eidolon-apps";
-import {ProcessProvider} from "@eidolon/components";
+import {ProcessProvider} from "@eidolon/components/client";
 
 interface ChatbotLayoutProps {
   params: {

webui/apps/eidolon-ui2/app/eidolon-apps/venture-agent/[processId]/PageWithStepper.tsx

@@ -4,7 +4,7 @@ import {Box, Step, StepButton, Stepper} from "@mui/material";
 import * as React from "react";
 import {Fragment, useEffect, useRef} from "react";
 import {usePathname} from "next/navigation";
-import {useProcess} from "@eidolon/components";
+import {useProcess} from "@eidolon/components/client";
 
 interface ChatbotLayoutProps {
   children: JSX.Element

webui/apps/eidolon-ui2/app/eidolon-apps/venture-agent/[processId]/choose/page.tsx

@@ -3,14 +3,13 @@
 import * as React from "react";
 import {useEffect} from "react";
 import {Box} from "@mui/material";
-import {executeOperation} from "@eidolon/components/src/client-api-helpers/process-event-helper";
-import {CopilotPanel, CopilotParams, useProcess, useProcesses} from "@eidolon/components";
+import {executeOperation} from "@eidolon/components/client";
+import {CopilotPanel, CopilotParams, useProcess, useProcesses} from "@eidolon/components/client";
 import EnhancedTable from "./company_list";
 import {useRouter} from "next/navigation";
 import {Company, Thesis} from "../../types";
 import FloatingColumns from "@/components/floating-columns";
 import {useSession} from "next-auth/react";
-import {sleep} from "@/utils/index";
 
 const findCompanyChat = {
   "agent": "CompanyFinder",

webui/apps/eidolon-ui2/app/eidolon-apps/venture-agent/[processId]/layout.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import * as React from "react";
-import {ProcessProvider} from "@eidolon/components";
+import {ProcessProvider} from "@eidolon/components/client";
 import PageWithStepper from "./PageWithStepper";
 
 interface ChatbotLayoutProps {

webui/apps/eidolon-ui2/app/eidolon-apps/venture-agent/[processId]/thesis/company-detail-chat.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import {CopilotPanel, CopilotParams} from "@eidolon/components";
+import {CopilotPanel, CopilotParams} from "@eidolon/components/client";
 import * as React from "react";
 import {Company} from "../../types";
 import {Box, IconButton, Paper, useMediaQuery, useTheme} from "@mui/material";

webui/apps/eidolon-ui2/app/eidolon-apps/venture-agent/[processId]/thesis/page.tsx

@@ -3,8 +3,8 @@
 import * as React from "react";
 import {useEffect} from "react";
 import {Box} from "@mui/material";
-import {executeOperation, streamOperation} from "@eidolon/components/src/client-api-helpers/process-event-helper";
-import {CopilotParams, useProcess} from "@eidolon/components";
+import {executeOperation, streamOperation} from "@eidolon/components/client";
+import {CopilotParams, useProcess} from "@eidolon/components/client";
 import {CompanyImageList} from "./CompanyImageList";
 import {Company} from "../../types";
 import CompanyDetailChat from "./company-detail-chat";

webui/apps/eidolon-ui2/app/home/EidolonAppItem.tsx

@@ -2,7 +2,7 @@
 
 import {Card, CardActionArea, CardContent, CardMedia, Typography} from "@mui/material";
 import {useRouter} from "next/navigation";
-import {EidolonApp} from "@eidolon/components";
+import {EidolonApp} from "@eidolon/components/client";
 
 export interface EidolonAppItemProps {
   path: string;

webui/apps/eidolon-ui2/app/layout.tsx

@@ -6,7 +6,7 @@ import defaultTheme, {ThemeProvider} from '@/theme';
 import CurrentLayout from '@/layout';
 import './globals.css';
 import {SessionProvider} from "next-auth/react";
-import {EidolonProvider} from "@eidolon/components";
+import {EidolonProvider} from "@eidolon/components/client";
 
 const THEME_COLOR = (defaultTheme.palette?.primary as SimplePaletteColorOptions)?.main || '#FFFFFF';
 

webui/apps/eidolon-ui2/auth.ts

@@ -42,7 +42,7 @@ if (providerTypes.includes('azure')) {
   )
 }
 
-if (providerTypes.length === 0) {
+if (providerTypes.includes('password')) {
   providers.push(CredentialsProvider({
     credentials: {
       username: {label: "Username", type: "text", placeholder: "system"},
@@ -146,7 +146,7 @@ const nextAuth = NextAuth({
 
       const parsedParams = qs.parse(currentURL.search, {ignoreQueryPrefix: true})
 
-      const shouldAuth = pathname.startsWith("/eidolon-apps")
+      const shouldAuth = providers.length > 0 && pathname.startsWith("/eidolon-apps")
       let authenticated = !!auth
 
       if (authenticated && pathname.startsWith("/signin") && "callbackUrl" in parsedParams) {

webui/apps/eidolon-ui2/components/ListItemWithCode.tsx

@@ -2,7 +2,7 @@
 
 import {ListItem, ListItemText, Typography} from "@mui/material";
 import {useState} from "react";
-import {EidolonMarkdown} from "@eidolon/components/src/messages/eidolon-markdown";
+import {EidolonMarkdown} from "@eidolon/components/client";
 
 interface ListItemWithCodeProps {
   title: string

webui/apps/eidolon-ui2/components/ProcessListWithAdd.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import {CopilotParams, createProcess, EidolonApp, ProcessList} from "@eidolon/components";
+import {CopilotParams, createProcess, EidolonApp, ProcessList} from "@eidolon/components/client";
 import {usePathname, useRouter} from "next/navigation";
 import {ProcessStatus} from "@eidolon/client";
 import * as React from "react";
@@ -9,7 +9,7 @@ import {StartProgramDialog} from "../app/eidolon-apps/dev-tool/components/start-
 import {Box, Divider, ListItem, ListItemButton, ListItemIcon, ListItemText, Toolbar} from "@mui/material";
 import List from "@mui/material/List";
 import {AddCircleOutline} from "@mui/icons-material";
-import {useProcesses} from "@eidolon/components";
+import {useProcesses} from "@eidolon/components/client";
 import {TOP_BAR_DESKTOP_HEIGHT, TOP_BAR_MOBILE_HEIGHT} from "@/layout/config";
 import {useOnMobile} from "@/hooks/index";
 

webui/apps/eidolon-ui2/components/ProcessWithListLayout.tsx

@@ -3,10 +3,9 @@
 import {Box} from "@mui/material";
 import ResizableDrawer from "@/components/ResizableDrawer/ResizableDrawer";
 import {DevProcessListWithAdd} from "./ProcessListWithAdd";
-import {ProcessesProvider} from "../../../packages/eidolon-components/src/hooks/processes_context";
-import {EidolonApp} from "@eidolon/components";
-import {useEffect, useRef, useState} from "react";
-import {getAgents} from "@eidolon/components/src/client-api-helpers/machine-helper";
+import {ProcessesProvider} from "@eidolon/components/client";
+import {EidolonApp} from "@eidolon/components/client";
+import {useRef} from "react";
 
 
 export interface DevTooLayoutProps {