change semantics

Update README deployment steps and add deploy:secrets script to package.json

update local inference script and README

update lockfile

reconfigure package scripts for development

update test execution

pass server tests

Update README with revised Bun commands and workspace details

remove pnpm package manager designator

create bun server

packages/client/src/components/code/CodeBlock.tsx

@@ -0,0 +1,69 @@
+import React, { useState, useEffect, useCallback, useMemo } from "react";
+import { buildCodeHighlighter } from "./CodeHighlighter";
+
+interface CodeBlockProps {
+  language: string;
+  code: string;
+  onRenderComplete: () => void;
+}
+
+const highlighter = buildCodeHighlighter();
+
+const CodeBlock: React.FC<CodeBlockProps> = ({
+  language,
+  code,
+  onRenderComplete,
+}) => {
+  const [html, setHtml] = useState<string>("");
+  const [loading, setLoading] = useState<boolean>(true);
+
+  const highlightCode = useCallback(async () => {
+    try {
+      const highlighted = (await highlighter).codeToHtml(code, {
+        lang: language,
+        theme: "github-dark",
+      });
+      setHtml(highlighted);
+    } catch (error) {
+      console.error("Error highlighting code:", error);
+      setHtml(`<pre>${code}</pre>`);
+    } finally {
+      setLoading(false);
+      onRenderComplete();
+    }
+  }, [language, code, onRenderComplete]);
+
+  useEffect(() => {
+    highlightCode();
+  }, [highlightCode]);
+
+  if (loading) {
+    return (
+      <div
+        style={{
+          backgroundColor: "#24292e",
+          padding: "10px",
+          borderRadius: "1.5em",
+        }}
+      >
+        Loading code...
+      </div>
+    );
+  }
+
+  return (
+    <div
+      dangerouslySetInnerHTML={{ __html: html }}
+      style={{
+        transition: "none",
+        padding: 20,
+        backgroundColor: "#24292e",
+        overflowX: "auto",
+        borderRadius: ".37em",
+        fontSize: ".75rem",
+      }}
+    />
+  );
+};
+
+export default React.memo(CodeBlock);

packages/client/src/components/code/CodeHighlighter.ts

@@ -0,0 +1,75 @@
+import { createHighlighterCore } from "shiki";
+
+export async function buildCodeHighlighter() {
+  const [
+    githubDark,
+    html,
+    javascript,
+    jsx,
+    typescript,
+    tsx,
+    go,
+    rust,
+    python,
+    java,
+    kotlin,
+    shell,
+    sql,
+    yaml,
+    toml,
+    markdown,
+    json,
+    xml,
+    zig,
+    wasm,
+  ] = await Promise.all([
+    import("shiki/themes/github-dark.mjs"),
+    import("shiki/langs/html.mjs"),
+    import("shiki/langs/javascript.mjs"),
+    import("shiki/langs/jsx.mjs"),
+    import("shiki/langs/typescript.mjs"),
+    import("shiki/langs/tsx.mjs"),
+    import("shiki/langs/go.mjs"),
+    import("shiki/langs/rust.mjs"),
+    import("shiki/langs/python.mjs"),
+    import("shiki/langs/java.mjs"),
+    import("shiki/langs/kotlin.mjs"),
+    import("shiki/langs/shell.mjs"),
+    import("shiki/langs/sql.mjs"),
+    import("shiki/langs/yaml.mjs"),
+    import("shiki/langs/toml.mjs"),
+    import("shiki/langs/markdown.mjs"),
+    import("shiki/langs/json.mjs"),
+    import("shiki/langs/xml.mjs"),
+    import("shiki/langs/zig.mjs"),
+    import("shiki/wasm"),
+  ]);
+
+  // Create the highlighter instance with the loaded themes and languages
+  const instance = await createHighlighterCore({
+    themes: [githubDark], // Set the Base_theme
+    langs: [
+      html,
+      javascript,
+      jsx,
+      typescript,
+      tsx,
+      go,
+      rust,
+      python,
+      java,
+      kotlin,
+      shell,
+      sql,
+      yaml,
+      toml,
+      markdown,
+      json,
+      xml,
+      zig,
+    ],
+    loadWasm: wasm, // Ensure correct loading of WebAssembly
+  });
+
+  return instance;
+}