Merge pull request #19 from BBai-Tips/staging

BUI is hosted

CHANGELOG.md

@@ -9,6 +9,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 
 
+## [0.0.11-alpha] - 2024-09-06
+
+### Changed
+
+- BUI is not a hosted site (can still be run manually from localhost)
+- Running `bbai start` will open browser page for hosted BUI, with apiPort pointing to localhost API
+
+
 ## [0.0.10b-alpha] - 2024-09-03
 
 ### Changed

api/deno.jsonc

@@ -1,6 +1,6 @@
 {
 	"name": "bbai-api",
-	"version": "0.0.10b-alpha",
+	"version": "0.0.11-alpha",
 	"exports": "./src/main.ts",
 	"tasks": {
 		"start": "deno run --allow-read --allow-write --allow-run --allow-net --allow-env src/main.ts",

api/src/llms/tools/rewriteFileTool.ts

@@ -1,5 +1,6 @@
-import { JSX } from 'preact';
-import LLMTool, { LLMToolInputSchema, LLMToolRunResult, LLMToolRunResultContent } from 'api/llms/llmTool.ts';
+import type { JSX } from 'preact';
+import LLMTool from 'api/llms/llmTool.ts';
+import type { LLMToolInputSchema, LLMToolRunResult, LLMToolRunResultContent } from 'api/llms/llmTool.ts';
 import {
 	formatToolResult as formatToolResultBrowser,
 	formatToolUse as formatToolUseBrowser,
@@ -8,12 +9,12 @@ import {
 	formatToolResult as formatToolResultConsole,
 	formatToolUse as formatToolUseConsole,
 } from './formatters/rewriteFileTool.console.ts';
-import LLMConversationInteraction from '../interactions/conversationInteraction.ts';
-import ProjectEditor from '../../editor/projectEditor.ts';
+import type LLMConversationInteraction from '../interactions/conversationInteraction.ts';
+import type ProjectEditor from '../../editor/projectEditor.ts';
 import { isPathWithinProject } from '../../utils/fileHandling.utils.ts';
 import { createError, ErrorType } from '../../utils/error.utils.ts';
-import { FileHandlingErrorOptions } from '../../errors/error.ts';
-import { LLMAnswerToolUse } from 'api/llms/llmMessage.ts';
+import type { FileHandlingErrorOptions } from '../../errors/error.ts';
+import type { LLMAnswerToolUse } from 'api/llms/llmMessage.ts';
 import { logger } from 'shared/logger.ts';
 import { ensureDir } from '@std/fs';
 import { dirname, join } from '@std/path';
@@ -33,7 +34,7 @@ export default class LLMToolRewriteFile extends LLMTool {
 			type: 'object',
 			properties: {
 				filePath: { type: 'string', description: 'The path of the file to be rewritten or created' },
-				content: { type: 'string', description: 'The new content of the file' },
+				content: { type: 'string', description: 'The new content of the file. Include the full file contents. Do not replace any of the content with comments or placeholders.' },
 				createIfMissing: {
 					type: 'boolean',
 					description: 'Create the file if it does not exist',
@@ -120,7 +121,7 @@ export default class LLMToolRewriteFile extends LLMTool {
 			if (error.name === 'rewrite-file') {
 				throw error;
 			}
-			let errorMessage = `Failed to write contents to ${filePath}: ${error.message}`;
+			const errorMessage = `Failed to write contents to ${filePath}: ${error.message}`;
 			logger.error(errorMessage);
 
 			throw createError(ErrorType.FileHandling, errorMessage, {

api/src/main.ts

@@ -72,8 +72,8 @@ if (environment === 'local') {
 }
 
 app.use(oakCors({
-	origin: /^https?:\/\/localhost(:\d+)?$/,
-})); // Enable CORS for all localhost requests, regardless of port
+	origin: [/^https?:\/\/localhost(:\d+)?$/, /^https?:\/\/(chat\.)?bbai\.tips$/],
+})); // Enable CORS for localhost, bbai.tips, and chat.bbai.tips
 app.use(router.routes());
 app.use(router.allowedMethods());
 

bui/BUI_INSTRUCTIONS.md

@@ -1,59 +1,87 @@
 # BBai Browser User Interface (BUI) Development Instructions
 
 ## Overview
-The BBai Browser User Interface (BUI) is being developed using Deno Fresh to provide a web-based interface for the BBai project. The BUI aims to offer the same core functionality as the CLI, with a focus on conversation management and interaction with the BBai system.
+
+The BBai Browser User Interface (BUI) is being developed using Deno Fresh to
+provide a web-based interface for the BBai project. The BUI aims to offer the
+same core functionality as the CLI, with a focus on conversation management and
+interaction with the BBai system.
 
 ## Key Features
+
 1. WebSocket-based real-time communication with the BBai API
 2. Conversation management (start new, continue existing)
 3. Chat interface for interacting with BBai
 4. Setting and using the current working directory for project context
 
 ## Current Implementation
-The main component of the BUI is the `Chat.tsx` file located in `bui/src/islands/Chat.tsx`. This component handles:
+
+The main component of the BUI is the `Chat.tsx` file located in
+`bui/src/islands/Chat.tsx`. This component handles:
 
 1. WebSocket connection management with retry logic
 2. User input for messages and current working directory
 3. Displaying conversation history
 4. Error handling and display
 
 ## Important Notes
-1. The `generateConversationId` function is imported from `shared/conversationManagement.ts`. This import should not be changed without explicit instruction.
-2. The `startDir` (current working directory) is crucial for the BBai system and must be sent with each message.
-3. A greeting message is sent automatically when the WebSocket connection is established.
+
+1. The `generateConversationId` function is imported from
+   `shared/conversationManagement.ts`. This import should not be changed without
+   explicit instruction.
+2. The `startDir` (current working directory) is crucial for the BBai system and
+   must be sent with each message.
+3. A greeting message is sent automatically when the WebSocket connection is
+   established.
 4. The default `startDir` is set to `/Users/cng/working/bbai/`.
 5. The WebSocket server is expected to be running on `localhost:3002`.
 
 ## WebSocket Implementation
-- The WebSocket connection is established using the browser's native WebSocket API.
-- The connection URL is constructed using `localhost:3002` as the host and the generated conversation ID.
-- Reconnection attempts use exponential backoff with jitter to avoid overwhelming the server.
+
+- The WebSocket connection is established using the browser's native WebSocket
+  API.
+- The connection URL is constructed using `localhost:3002` as the host and the
+  generated conversation ID.
+- Reconnection attempts use exponential backoff with jitter to avoid
+  overwhelming the server.
 
 ## Future Improvements
-1. Implement input validation for the `startDir` to ensure it's a valid directory path.
-2. Add a visual indicator to show the WebSocket connection status (connected, disconnected, reconnecting).
-3. Implement error handling for cases where the server rejects the `startDir` as invalid.
+
+1. Implement input validation for the `startDir` to ensure it's a valid
+   directory path.
+2. Add a visual indicator to show the WebSocket connection status (connected,
+   disconnected, reconnecting).
+3. Implement error handling for cases where the server rejects the `startDir` as
+   invalid.
 4. Improve the UI/UX of the chat interface.
 5. Add more robust error handling or input validation.
 6. Implement additional features like conversation history or file uploads.
 7. Optimize performance if needed.
 
 ## Testing
+
 When testing the BUI, focus on:
+
 1. Setting and using custom working directories.
 2. Verifying that the greeting message is sent and received properly.
 3. Testing the conversation flow by sending and receiving messages.
 4. Checking the reconnection mechanism by intentionally disconnecting.
-5. Ensure the WebSocket connection is properly established with the server at `localhost:3002`.
+5. Ensure the WebSocket connection is properly established with the server at
+   `localhost:3002`.
 
 ## Development Guidelines
+
 1. Maintain consistency in import statements, especially for shared utilities.
 2. Ensure all user inputs are properly sanitized and validated.
 3. Keep error messages informative and user-friendly.
 4. Maintain a responsive and accessible design for various screen sizes.
 5. Document any new features or significant changes in this file.
 
 ## API Integration
-The BUI communicates with the BBai API primarily through WebSocket connections. Ensure that any changes to the API are reflected in the BUI, particularly in the message structure and handling.
 
-Remember to update this document as the BUI evolves to keep it as a current and useful reference for ongoing development.
+The BUI communicates with the BBai API primarily through WebSocket connections.
+Ensure that any changes to the API are reflected in the BUI, particularly in the
+message structure and handling.
+
+Remember to update this document as the BUI evolves to keep it as a current and
+useful reference for ongoing development.

bui/deno.jsonc

@@ -0,0 +1,50 @@
+{
+	"lock": false,
+	"tasks": {
+		"check": "deno fmt --check && deno lint && deno check **/*.ts && deno check **/*.tsx",
+		"cli": "echo \"import '\\$fresh/src/dev/cli.ts'\" | deno run --unstable -A -",
+		"manifest": "deno task cli manifest $(pwd)/src",
+		"start": "deno run -A --watch=static/,routes/ src/dev.ts",
+		"start-prod": "deno run -A src/dev.ts",
+		"build": "deno run -A src/dev.ts build",
+		"preview": "deno run -A src/main.ts",
+		"update": "deno run -A -r https://fresh.deno.dev/update .",
+		"format": "deno fmt",
+		"check-format": "deno fmt --check",
+		"check-types": "deno check src/main.ts",
+		"update-deps": "deno cache src/main.ts && deno cache tests/deps.ts"
+	},
+	"lint": {
+		"rules": {
+			"tags": [
+				"fresh",
+				"recommended"
+			]
+		}
+	},
+	"exclude": [
+		"**/src/_fresh/*"
+	],
+	"importMap": "../import_map.json",
+	"compilerOptions": {
+		"jsx": "react-jsx",
+		"jsxImportSource": "preact"
+	},
+	"fmt": {
+		"useTabs": true,
+		"lineWidth": 120,
+		"indentWidth": 4,
+		"semiColons": true,
+		"singleQuote": true,
+		"proseWrap": "preserve",
+		"include": [
+			"src/",
+			"tests/"
+		],
+		"exclude": [
+			"src/testdata/",
+			"src/fixtures/**/*.ts"
+		]
+	},
+	"version": "0.0.11-alpha"
+}

bui/src/components/Button.tsx

@@ -1,12 +1,12 @@
-import { JSX } from "preact";
-import { IS_BROWSER } from "$fresh/runtime.ts";
+import { JSX } from 'preact';
+import { IS_BROWSER } from '$fresh/runtime.ts';
 
 export function Button(props: JSX.HTMLAttributes<HTMLButtonElement>) {
-  return (
-    <button
-      {...props}
-      disabled={!IS_BROWSER || props.disabled}
-      class="px-2 py-1 border-gray-500 border-2 rounded bg-white hover:bg-gray-200 transition-colors"
-    />
-  );
+	return (
+		<button
+			{...props}
+			disabled={!IS_BROWSER || props.disabled}
+			class='px-2 py-1 border-gray-500 border-2 rounded bg-white hover:bg-gray-200 transition-colors'
+		/>
+	);
 }

bui/src/dev.ts

@@ -1,8 +1,8 @@
 #!/usr/bin/env -S deno run -A --watch=static/,routes/
 
-import dev from "$fresh/dev.ts";
-import config from "./fresh.config.ts";
+import dev from '$fresh/dev.ts';
+import config from './fresh.config.ts';
 
-import "$std/dotenv/load.ts";
+import '$std/dotenv/load.ts';
 
-await dev(import.meta.url, "./main.ts", config);
+await dev(import.meta.url, './main.ts', config);

bui/src/fresh.config.ts

@@ -1,6 +1,6 @@
-import { defineConfig } from "$fresh/server.ts";
-import tailwind from "$fresh/plugins/tailwind.ts";
+import { defineConfig } from '$fresh/server.ts';
+import tailwind from '$fresh/plugins/tailwind.ts';
 
 export default defineConfig({
-  plugins: [tailwind()],
-});
+	plugins: [tailwind()],
+});

bui/src/fresh.gen.ts

@@ -2,30 +2,30 @@
 // This file SHOULD be checked into source version control.
 // This file is automatically updated during development when running `dev.ts`.
 
-import * as $_404 from "./routes/_404.tsx";
-import * as $_app from "./routes/_app.tsx";
-import * as $_middleware from "./routes/_middleware.ts";
-import * as $api_joke from "./routes/api/joke.ts";
-import * as $greet_name_ from "./routes/greet/[name].tsx";
-import * as $index from "./routes/index.tsx";
-import * as $Chat from "./islands/Chat.tsx";
-import * as $Counter from "./islands/Counter.tsx";
-import { type Manifest } from "$fresh/server.ts";
+import * as $_404 from './routes/_404.tsx';
+import * as $_app from './routes/_app.tsx';
+import * as $_middleware from './routes/_middleware.ts';
+import * as $api_joke from './routes/api/joke.ts';
+import * as $greet_name_ from './routes/greet/[name].tsx';
+import * as $index from './routes/index.tsx';
+import * as $Chat from './islands/Chat.tsx';
+import * as $Counter from './islands/Counter.tsx';
+import { type Manifest } from '$fresh/server.ts';
 
 const manifest = {
-  routes: {
-    "./routes/_404.tsx": $_404,
-    "./routes/_app.tsx": $_app,
-    "./routes/_middleware.ts": $_middleware,
-    "./routes/api/joke.ts": $api_joke,
-    "./routes/greet/[name].tsx": $greet_name_,
-    "./routes/index.tsx": $index,
-  },
-  islands: {
-    "./islands/Chat.tsx": $Chat,
-    "./islands/Counter.tsx": $Counter,
-  },
-  baseUrl: import.meta.url,
+	routes: {
+		'./routes/_404.tsx': $_404,
+		'./routes/_app.tsx': $_app,
+		'./routes/_middleware.ts': $_middleware,
+		'./routes/api/joke.ts': $api_joke,
+		'./routes/greet/[name].tsx': $greet_name_,
+		'./routes/index.tsx': $index,
+	},
+	islands: {
+		'./islands/Chat.tsx': $Chat,
+		'./islands/Counter.tsx': $Counter,
+	},
+	baseUrl: import.meta.url,
 } satisfies Manifest;
 
 export default manifest;