fullstacked 0.12.0-1173 → 0.12.0-1184

package/fullstacked_modules/@fullstacked/ai-agent/package.json

@@ -0,0 +1,15 @@
+{
+    "dependencies": {
+        "@fullstacked/codemirror-view": "github.com:fullstackedorg/codemirror-view",
+        "@langchain/core": "^0.3.66",
+        "@langchain/ollama": "^0.2.3",
+        "@langchain/openai": "^0.6.3",
+        "ollama": "^0.5.16",
+        "openai": "^5.10.2",
+        "streaming-markdown": "^0.2.15",
+        "zod": "^4.0.14"
+    },
+    "main": "./src/index.ts",
+    "name": "@fullstacked/ai-agent",
+    "version": "0.0.0"
+}

package/fullstacked_modules/@fullstacked/ai-agent/src/conversation.ts

@@ -0,0 +1,169 @@
+import {
+    AIMessageChunk,
+    BaseMessage,
+    HumanMessage,
+    mapChatMessagesToStoredMessages,
+    mapStoredMessagesToChatMessages,
+    StoredMessage,
+    ToolMessage,
+    AIMessage,
+} from "@langchain/core/messages";
+import { createHumanInput } from "./input";
+import { createMarkdownStreamRenderer } from "./markdown";
+import { tool } from "@langchain/core/tools";
+import { ToolCall } from "@langchain/core/messages/tool";
+import { z } from "zod";
+import { Provider } from "./providers/interface";
+
+type ConversationOptions = {
+    model: string;
+    provider: Provider;
+    messages?: StoredMessage[];
+    tools?: ReturnType<typeof createTool>[];
+};
+
+export function createTool<T extends z.ZodSchema>(opts: {
+    name: string;
+    description: string;
+    schema: T;
+    fn(args: z.infer<T>): any;
+    message?(args: z.infer<T>): string;
+}) {
+    return {
+        tool: tool(opts.fn, {
+            name: opts.name,
+            description: opts.description,
+            schema: opts.schema as any,
+        }),
+        message: opts.message,
+    };
+}
+
+function classForMessageType(message: BaseMessage) {
+    if (message instanceof HumanMessage) {
+        return "human";
+    } else if (
+        message instanceof AIMessage ||
+        message instanceof AIMessageChunk
+    ) {
+        return "ai";
+    } else if (message instanceof ToolMessage) {
+        return "tool";
+    }
+}
+
+export function createConversation(opts: ConversationOptions) {
+    const client = opts.provider.client(opts.model);
+
+    const chatModel = opts.tools
+        ? client.bindTools(opts.tools.map(({ tool }) => tool))
+        : client;
+
+    const element = document.createElement("div");
+    element.classList.add("conversation");
+
+    const conversation: BaseMessage[] = mapStoredMessagesToChatMessages(
+        opts?.messages || [],
+    );
+    const messagesContainer = document.createElement("div");
+    messagesContainer.classList.add("messages");
+
+    const renderMessage = (message: BaseMessage) => {
+        const messageContainer = document.createElement("div");
+        messageContainer.classList.add(classForMessageType(message));
+        messagesContainer.append(messageContainer);
+        const renderer = createMarkdownStreamRenderer(messageContainer);
+        renderer.write(message.response_metadata["user-defined-message"] || message.content as string);
+        renderer.end();
+    };
+
+    conversation.forEach(renderMessage);
+
+    const onToolRequest = async (toolCall: ToolCall) => {
+        const t = opts.tools.find(
+            ({ tool: { name } }) => name === toolCall.name,
+        );
+
+        const container = document.createElement("div");
+        const userDefinedMessage = t.message?.(toolCall.args) || `Using tool ${toolCall.name}`;
+        container.innerText = userDefinedMessage;
+        messagesContainer.append(container);
+
+        const toolResponse: ToolMessage = await t.tool.invoke(toolCall);
+        toolResponse.response_metadata["user-defined-message"] =
+            userDefinedMessage;
+        conversation.push(toolResponse);
+
+        return !!toolResponse.content;
+    };
+
+    const onHumanPrompt = (text: string) => {
+        const humanMessage = new HumanMessage(text);
+        conversation.push(humanMessage);
+        renderMessage(humanMessage);
+        promptAgent();
+    };
+
+    const promptAgent = async () => {
+        let done = false;
+        const aiMessageContainer = document.createElement("div");
+        messagesContainer.append(aiMessageContainer);
+
+        const responseContainer = document.createElement("div");
+        const loadingContainer = document.createElement("div");
+        const loadingDisplayInterval = setInterval(() => {
+            if (done) {
+                clearInterval(loadingDisplayInterval);
+                loadingContainer.remove();
+            } else {
+                const dotCount = loadingContainer.innerText.length;
+                loadingContainer.innerText = new Array((dotCount % 3) + 1)
+                    .fill(".")
+                    .join("");
+            }
+        }, 250);
+
+        aiMessageContainer.append(responseContainer, loadingContainer);
+
+        const renderer = createMarkdownStreamRenderer(responseContainer);
+        const stream = await chatModel.stream(conversation);
+        let messageIndex: number = null;
+        for await (const chunk of stream) {
+            if (messageIndex === null) {
+                messageIndex = conversation.length;
+                conversation.push(chunk);
+                aiMessageContainer.classList.add(classForMessageType(chunk));
+            } else {
+                conversation[messageIndex] = (
+                    conversation[messageIndex] as AIMessageChunk
+                ).concat(chunk);
+            }
+
+            if (typeof chunk.content === "string") {
+                renderer.write(chunk.content);
+            }
+        }
+        renderer.end();
+
+        const aiMessage = conversation.at(messageIndex) as AIMessageChunk;
+        const toolPromises = aiMessage.tool_calls.map((t) => onToolRequest(t));
+        const awaitedToolPromises = await Promise.all(toolPromises);
+        if (awaitedToolPromises.some((r) => r)) {
+            promptAgent();
+        }
+        done = true;
+    };
+
+    const humanInput = createHumanInput({
+        onSubmit: onHumanPrompt,
+    });
+
+    element.append(messagesContainer, humanInput);
+
+    const serialize = () => mapChatMessagesToStoredMessages(conversation);
+
+    return {
+        element,
+        serialize,
+    };
+}

package/fullstacked_modules/@fullstacked/ai-agent/src/default.scss

@@ -0,0 +1,23 @@
+.conversation {
+    height: 100%;
+    width: 100%;
+    position: relative;
+    overflow: hidden;
+
+    display: flex;
+    flex-direction: column;
+
+    .messages {
+        width: 100%;
+        flex: 1;
+        overflow: auto;
+
+        .human {
+            text-align: right;
+        }
+    }
+
+    .input {
+        margin: 5px;
+    }
+}

package/fullstacked_modules/@fullstacked/ai-agent/src/index.ts

@@ -0,0 +1,3 @@
+export * from "./conversation";
+export * from "./providers/ollama";
+export * from "./providers/openai";

package/fullstacked_modules/@fullstacked/ai-agent/src/input.ts

@@ -0,0 +1,36 @@
+type HumanInputOptions = {
+    placeholderText: string;
+    onSubmit(text: string): void;
+};
+
+export function createHumanInput(opts?: Partial<HumanInputOptions>) {
+    const placeholder = opts?.placeholderText || "Ask me anything...";
+    const input = document.createElement("div");
+    input.classList.add("input");
+    input.contentEditable = "true";
+    input.innerText = placeholder;
+
+    input.addEventListener("focus", () => {
+        if (input.innerText !== placeholder) return;
+        input.innerText = "";
+    });
+
+    input.addEventListener("blur", () => {
+        if (input.innerText !== "") return;
+        input.innerText = placeholder;
+    });
+
+    input.addEventListener("keydown", async (e) => {
+        if (e.shiftKey || e.key !== "Enter") return;
+        e.preventDefault();
+        e.stopPropagation();
+
+        const text = input.innerText;
+        opts.onSubmit(text);
+
+        input.innerText = "";
+        input.blur();
+    });
+
+    return input;
+}

package/fullstacked_modules/@fullstacked/ai-agent/src/markdown.ts

@@ -0,0 +1,46 @@
+import * as smd from "streaming-markdown";
+import { createCodeMirrorView } from "@fullstacked/codemirror-view";
+import { SupportedLanguage } from "@fullstacked/codemirror-view/languages";
+
+export function createMarkdownStreamRenderer(el: HTMLElement) {
+    const renderer = smd.default_renderer(el);
+    const defaultAddToken = renderer.add_token;
+    renderer.add_token = function (data: any, type: any) {
+        if (type !== 9 && type !== 10) {
+            return defaultAddToken(data, type);
+        }
+
+        let parent = data.nodes[data.index];
+        const codeView = createCodeMirrorView() as ReturnType<
+            typeof createCodeMirrorView
+        > & {
+            setAttribute(attr: string, value: string): void;
+            appendChild(text: Text): void;
+        };
+        codeView.editing.lock();
+        codeView.setAttribute = async function (attr, value) {
+            if (attr !== "class") return;
+            codeView.setLanguage(value as SupportedLanguage);
+        };
+        codeView.appendChild = (text) => {
+            codeView.editorView.dispatch({
+                changes: {
+                    from: codeView.editorView.state.doc.length,
+                    insert: text.wholeText,
+                },
+            });
+        };
+        parent = parent.appendChild(codeView.element);
+
+        data.nodes[++data.index] = codeView;
+    };
+    const parser = smd.parser(renderer);
+    return {
+        write(md: string) {
+            smd.parser_write(parser, md);
+        },
+        end() {
+            smd.parser_end(parser);
+        },
+    };
+}

package/fullstacked_modules/@fullstacked/ai-agent/src/providers/interface.ts

@@ -0,0 +1,6 @@
+import { BaseChatModel } from "@langchain/core/language_models/chat_models";
+
+export interface Provider {
+    models(): Promise<string[]>;
+    client(model: string): BaseChatModel;
+}

package/fullstacked_modules/@fullstacked/ai-agent/src/providers/ollama.ts

@@ -0,0 +1,42 @@
+// @ts-ignore
+import { Ollama as OllamaClient } from "ollama/browser";
+import type * as ollama from "ollama";
+import { Provider } from "./interface";
+import { core_fetch2 } from "fetch";
+import { ChatOllama } from "@langchain/ollama";
+
+async function models(opts: ollama.Config) {
+    const ollamaClient: ollama.Ollama = new OllamaClient({
+        ...opts,
+        fetch: core_fetch2,
+    });
+
+    const { models } = await ollamaClient.list();
+
+    return models.map((m) => m.name);
+}
+
+type OllamaOptions = {
+    host: string;
+    headers: { [key: string]: string };
+};
+
+export function createOllama(opts?: Partial<OllamaOptions>): Provider {
+    const baseUrl = opts?.host || "http://localhost:11434";
+    const headers = opts?.headers || {};
+
+    return {
+        models: () =>
+            models({
+                host: baseUrl,
+                headers,
+            }),
+        client: (model) =>
+            new ChatOllama({
+                baseUrl,
+                headers,
+                model,
+                fetch: core_fetch2,
+            }),
+    };
+}

package/fullstacked_modules/@fullstacked/ai-agent/src/providers/openai.ts

@@ -0,0 +1,33 @@
+import { core_fetch2 } from "fetch";
+import { Provider } from "./interface";
+import openai from "openai";
+import { ChatOpenAI } from "@langchain/openai";
+
+async function models(opts: OpenAIOptions) {
+    const openAIClient = new openai({
+        apiKey: opts.apiKey,
+        fetch: core_fetch2,
+        dangerouslyAllowBrowser: true,
+    });
+
+    const models = await openAIClient.models.list();
+    return models.data.map(({ id }) => id);
+}
+
+type OpenAIOptions = {
+    apiKey: string;
+};
+
+export function createOpenAI(opts: OpenAIOptions): Provider {
+    return {
+        models: () => models(opts),
+        client: (model) =>
+            new ChatOpenAI({
+                model,
+                apiKey: opts.apiKey,
+                configuration: {
+                    fetch: core_fetch2,
+                },
+            }),
+    };
+}

package/fullstacked_modules/@fullstacked/ai-agent/story.txt

@@ -0,0 +1,7 @@
+Once upon a time, in a land far away, there was a curious little fox named Felix. Felix had a peculiar habit of collecting shiny objects. One day, while exploring the forest, he stumbled upon a magical mirror that showed not his reflection, but his deepest desires.
+
+Felix looked into the mirror and saw himself as a mighty king, ruling over a grand kingdom. He wished for that life instantly. The mirror granted his wish, and suddenly, Felix was a king with a golden crown and a kingdom of his own.
+
+But as days passed, Felix realized that being a king was lonely. He missed the simplicity of his forest life. One day, he decided to return to the mirror and wished to be himself again. The mirror, surprised by his honesty, granted his wish and returned him to the forest.
+
+From that day on, Felix learned that true happiness comes from being himself, not from what he desires. And so, he continued his adventures, collecting shiny objects, but always remembering the lesson he learned from the magical mirror.

package/fullstacked_modules/ai/index.d.ts

@@ -0,0 +1,2 @@
+import ".";
+declare module "ai" {}