feat: add code assistant (#300)

admin/actions/code/suggestions.ts

@@ -0,0 +1,19 @@
+import { AppContext } from "../../mod.ts";
+import { Reply } from "../../../ai-assistants/actions/chat.ts";
+
+interface Props {
+  prompt: string;
+  currentCode: string;
+}
+
+export default async function action(
+  { currentCode, prompt }: Props,
+  _req: Request,
+  ctx: AppContext,
+): Promise<Response | { replies: Reply<unknown>[]; thread: string }> {
+  return await ctx.invoke("ai-assistants/actions/chat.ts", {
+    assistant: "code-assistant",
+    message:
+      `The user asks: ${prompt}. \n\nThe current the user is prompting upon is: ${currentCode}`,
+  });
+}

admin/loaders/assistants/code.ts

@@ -0,0 +1,53 @@
+import type { AIAssistant, Prompt } from "../../../ai-assistants/mod.ts";
+
+export interface Props {
+  prompts?: Prompt[];
+}
+
+const BASE_INSTRUCTIONS = `
+You are a code guru in typescript, preact and tailwindcss. 
+Users will ask you for improving and creating new components based on preact, tailwindcss and typescript
+Under no circunstance ask something back. You should always respond with the full component code. This code should be runnable
+
+Things to consider:
+  1. Do not import h from preact, we are using automatic jsx
+  2. Do not wrapp with any code formatting strings, like backsticks etc
+  3. Return a code that is ready to be used in a Deno like environment
+  4. Since this is a server component, do not use preact hooks. Always prefer css-only solutions. 
+
+Examples: 
+  question: Give me a fancy component
+  response: interface Props {
+    /**
+    * @description The description of name.
+    */
+    name: string;
+  }
+  
+  export default function Section({ name }: Props) {
+    return (<div class="bg-white p-8 rounded-md shadow-md">
+      <h2 class="text-2xl font-semibold mb-4">Fancy Component</h2>
+  
+      
+      <div class="space-y-4">
+        <button class="btn btn-primary">Click me</button>
+  
+        <input type="text" class="input input-bordered" placeholder="Type something" />
+  
+          <div class="alert alert-success">
+            {name}
+          </div>
+      </div>
+    </div>)
+  }
+`;
+
+export default function loader(props: Props): AIAssistant {
+  return {
+    name: "code-assistant",
+    model: "gpt-3.5-turbo-1106",
+    availableFunctions: [],
+    instructions: BASE_INSTRUCTIONS,
+    prompts: props.prompts,
+  };
+}

admin/manifest.gen.ts

@@ -10,31 +10,34 @@ import * as $$$4 from "./loaders/state.ts";
 import * as $$$5 from "./loaders/releases/get.ts";
 import * as $$$6 from "./loaders/releases/blocks.ts";
 import * as $$$7 from "./loaders/platforms/forSite.ts";
-import * as $$$8 from "./loaders/deploy.ts";
-import * as $$$9 from "./loaders/pages/list.ts";
+import * as $$$8 from "./loaders/assistants/code.ts";
+import * as $$$9 from "./loaders/deploy.ts";
+import * as $$$10 from "./loaders/pages/list.ts";
 import * as $$$$$$$$$0 from "./actions/blocks/publish.ts";
 import * as $$$$$$$$$1 from "./actions/blocks/restore.ts";
 import * as $$$$$$$$$2 from "./actions/blocks/safeDelete.ts";
 import * as $$$$$$$$$3 from "./actions/blocks/newRevision.ts";
 import * as $$$$$$$$$4 from "./actions/blocks/delete.ts";
 import * as $$$$$$$$$5 from "./actions/releases/fork.ts";
-import * as $$$$$$$$$6 from "./actions/sites/linkRepo.ts";
-import * as $$$$$$$$$7 from "./actions/sites/newDomain.ts";
-import * as $$$$$$$$$8 from "./actions/sites/unlinkRepo.ts";
-import * as $$$$$$$$$9 from "./actions/github/setStatus.ts";
-import * as $$$$$$$$$10 from "./actions/github/webhooks/broker.ts";
-import * as $$$$$$$$$11 from "./actions/pages/publish.ts";
-import * as $$$$$$$$$12 from "./actions/pages/new.ts";
-import * as $$$$$$$$$13 from "./actions/pages/delete.ts";
+import * as $$$$$$$$$6 from "./actions/code/suggestions.ts";
+import * as $$$$$$$$$7 from "./actions/sites/linkRepo.ts";
+import * as $$$$$$$$$8 from "./actions/sites/newDomain.ts";
+import * as $$$$$$$$$9 from "./actions/sites/unlinkRepo.ts";
+import * as $$$$$$$$$10 from "./actions/github/setStatus.ts";
+import * as $$$$$$$$$11 from "./actions/github/webhooks/broker.ts";
+import * as $$$$$$$$$12 from "./actions/pages/publish.ts";
+import * as $$$$$$$$$13 from "./actions/pages/new.ts";
+import * as $$$$$$$$$14 from "./actions/pages/delete.ts";
 
 const manifest = {
   "loaders": {
+    "deco-sites/admin/loaders/assistants/code.ts": $$$8,
     "deco-sites/admin/loaders/blocks/latest.ts": $$$2,
     "deco-sites/admin/loaders/blocks/listRevisions.ts": $$$3,
     "deco-sites/admin/loaders/blocks/published.ts": $$$1,
     "deco-sites/admin/loaders/blocks/revision.ts": $$$0,
-    "deco-sites/admin/loaders/deploy.ts": $$$8,
-    "deco-sites/admin/loaders/pages/list.ts": $$$9,
+    "deco-sites/admin/loaders/deploy.ts": $$$9,
+    "deco-sites/admin/loaders/pages/list.ts": $$$10,
     "deco-sites/admin/loaders/platforms/forSite.ts": $$$7,
     "deco-sites/admin/loaders/releases/blocks.ts": $$$6,
     "deco-sites/admin/loaders/releases/get.ts": $$$5,
@@ -46,15 +49,16 @@ const manifest = {
     "deco-sites/admin/actions/blocks/publish.ts": $$$$$$$$$0,
     "deco-sites/admin/actions/blocks/restore.ts": $$$$$$$$$1,
     "deco-sites/admin/actions/blocks/safeDelete.ts": $$$$$$$$$2,
-    "deco-sites/admin/actions/github/setStatus.ts": $$$$$$$$$9,
-    "deco-sites/admin/actions/github/webhooks/broker.ts": $$$$$$$$$10,
-    "deco-sites/admin/actions/pages/delete.ts": $$$$$$$$$13,
-    "deco-sites/admin/actions/pages/new.ts": $$$$$$$$$12,
-    "deco-sites/admin/actions/pages/publish.ts": $$$$$$$$$11,
+    "deco-sites/admin/actions/code/suggestions.ts": $$$$$$$$$6,
+    "deco-sites/admin/actions/github/setStatus.ts": $$$$$$$$$10,
+    "deco-sites/admin/actions/github/webhooks/broker.ts": $$$$$$$$$11,
+    "deco-sites/admin/actions/pages/delete.ts": $$$$$$$$$14,
+    "deco-sites/admin/actions/pages/new.ts": $$$$$$$$$13,
+    "deco-sites/admin/actions/pages/publish.ts": $$$$$$$$$12,
     "deco-sites/admin/actions/releases/fork.ts": $$$$$$$$$5,
-    "deco-sites/admin/actions/sites/linkRepo.ts": $$$$$$$$$6,
-    "deco-sites/admin/actions/sites/newDomain.ts": $$$$$$$$$7,
-    "deco-sites/admin/actions/sites/unlinkRepo.ts": $$$$$$$$$8,
+    "deco-sites/admin/actions/sites/linkRepo.ts": $$$$$$$$$7,
+    "deco-sites/admin/actions/sites/newDomain.ts": $$$$$$$$$8,
+    "deco-sites/admin/actions/sites/unlinkRepo.ts": $$$$$$$$$9,
   },
   "name": "deco-sites/admin",
   "baseUrl": import.meta.url,

admin/mod.ts

@@ -14,6 +14,7 @@ import { prEventHandler } from "./github/pr.ts";
 import { pushEventHandler } from "./github/push.ts";
 import { State as Resolvables } from "./loaders/state.ts";
 import manifest, { Manifest as AppManifest } from "./manifest.gen.ts";
+import { Manifest as AIAssistantManifest } from "../ai-assistants/manifest.gen.ts";
 
 export const ANONYMOUS = "Anonymous";
 export interface BlockStore extends Release {
@@ -123,6 +124,8 @@ export default function App(
   };
 }
 
-export type AppContext = AC<ReturnType<typeof App>>;
+export type AppContext = AC<
+  Omit<App<AIAssistantManifest>, "dependencies"> & ReturnType<typeof App>
+>;
 
 export type Manifest = ManifestOf<ReturnType<typeof App>>;

ai-assistants/actions/chat.ts

@@ -94,7 +94,7 @@ export default async function openChat(
   props: Props,
   req: Request,
   ctx: AppContext,
-) {
+): Promise<Response | { replies: Reply<unknown>[]; thread: string }> {
   if (!props.assistant) {
     notFound();
   }

website/components/_seo/Preview.tsx

@@ -12,7 +12,7 @@ import Slack from "./Slack.tsx";
 import Telegram from "./Telegram.tsx";
 import Twitter from "./Twitter.tsx";
 import WhatsApp from "./WhatsApp.tsx";
-import instructions from "./instructions.json" assert { type: "json" };
+import instructions from "./instructions.json" with { type: "json" };
 
 type SeoProps = ComponentProps<typeof Seo>;