@readymadeit/mcp 0.0.0-stage → 0.1.0

package/bundle/hkp-frontend/src/runtime/browser/services/MonitorUI.tsx

@@ -0,0 +1,281 @@
+import { useState } from "react";
+import {
+  CircleX,
+  SquarePlay,
+  Pencil,
+  ScanText,
+  Speech,
+  SquareCode,
+  TerminalSquare,
+} from "lucide-react";
+import { Textarea } from "hkp-frontend/src/ui-components/primitives/textarea";
+
+import { ServiceUIProps } from "hkp-frontend/src/types";
+import Editor from "hkp-frontend/src/components/shared/Editor/index";
+
+import ServiceUI, {
+  needsUpdate,
+} from "hkp-frontend/src/ui-components/service/ServiceUI";
+import MenuIcon from "hkp-frontend/src/ui-components/MenuIcon";
+import { isBlob } from "./helpers";
+
+export default function MonitorUI(props: ServiceUIProps) {
+  const [message, setMessage] = useState("");
+  const [renderTextEditor, setRenderTextEditor] = useState(true);
+  const [asciiMode, setAsciiMode] = useState(false);
+  // Read width/height synchronously from the service so Resizable gets them on first render.
+  const [initialSize] = useState(() => {
+    const svc = props.service as any;
+    return { width: svc.width ?? 278, height: svc.height ?? undefined };
+  });
+  const onInit = (state: any) => {
+    if (needsUpdate(state.message, message)) {
+      setMessage(state.message);
+    }
+    if (needsUpdate(state.renderTextEditor, renderTextEditor)) {
+      setRenderTextEditor(state.renderTextEditor);
+    }
+    if (state.mode === "ascii") {
+      setAsciiMode(true);
+    }
+  };
+
+  const onNotification = (params: any) => {
+    // Mode change from service configure()
+    if (params?.mode !== undefined) {
+      setAsciiMode(params.mode === "ascii");
+      return;
+    }
+
+    if (typeof params?.ascii === "string") {
+      setMessage(params.ascii);
+      return;
+    }
+
+    const type = typeof params;
+    if (type === "string") {
+      setMessage(params);
+    } else if (type === "number") {
+      setMessage(`${params}`);
+    } else if (params instanceof ArrayBuffer) {
+      const hexView = createHexView(params);
+      setMessage(`ArrayBuffer (${params.byteLength} bytes): \n\n${hexView}`);
+    } else if (Array.isArray(params)) {
+      setMessage(JSON.stringify(params));
+    } else if (isBlob(params)) {
+      setMessage(`Blob (${params.type} ${params.size} bytes)`);
+    } else {
+      const nil = params === null && "<null>";
+      const undef = params === undefined && "<undefined>";
+      const { bypass, __internal, ...rest } = params || {};
+      const s = nil || undef || unroll(rest);
+      if (bypass !== undefined || __internal !== undefined) {
+        return;
+      }
+      setMessage(isObject(s) ? JSON.stringify(s, null, 2) : s);
+    }
+  };
+
+  const switchEditor = () => setRenderTextEditor(!renderTextEditor);
+
+  const clearEditor = () => setMessage("");
+
+  const onFormatJSON = () => {
+    try {
+      const obj = JSON.parse(message);
+      setMessage(JSON.stringify(obj, null, 2));
+    } catch (err) {
+      console.error("MonitorUI.onFormatJSON", err);
+    }
+  };
+
+  const toggleAsciiMode = () => setAsciiMode((prev) => !prev);
+
+  const canUseSpeechSynthesis =
+    typeof window !== "undefined" &&
+    typeof window.speechSynthesis !== "undefined" &&
+    typeof SpeechSynthesisUtterance !== "undefined";
+
+  const { service } = props;
+  const customMenuEntries = [
+    {
+      name: "Clear Buffer",
+      icon: <MenuIcon icon={CircleX} />,
+      onClick: clearEditor,
+    },
+    {
+      name: asciiMode ? "Standard Mode" : "Ascii Mode",
+      icon: <MenuIcon icon={TerminalSquare} />,
+      onClick: toggleAsciiMode,
+    },
+    {
+      name: renderTextEditor ? "Edit Mode" : "Close Edit Mode",
+      icon: renderTextEditor ? (
+        <MenuIcon icon={Pencil} />
+      ) : (
+        <MenuIcon icon={ScanText} />
+      ),
+      onClick: switchEditor,
+    },
+    {
+      name: "Inject Buffer",
+      icon: <MenuIcon icon={SquarePlay} />,
+      onClick: () => {
+        let data;
+        try {
+          data = JSON.parse(message);
+        } catch (_err) {
+          data = message;
+        }
+        service.app.next(service, data, { replay: true });
+      },
+    },
+    {
+      name: "Prettify",
+      icon: <MenuIcon icon={SquareCode} />,
+      onClick: onFormatJSON,
+    },
+    {
+      name: "Read it",
+      icon: <MenuIcon icon={Speech} />,
+      onClick: () => {
+        if (!canUseSpeechSynthesis) {
+          return;
+        }
+        const utterance = new SpeechSynthesisUtterance(message);
+        window.speechSynthesis.speak(utterance);
+      },
+      disabled: !message || !canUseSpeechSynthesis,
+    },
+  ];
+
+  const renderEditor = () => {
+    if (asciiMode) {
+      return (
+        <pre
+          style={{
+            margin: "5px 0",
+            padding: "8px",
+            background: "#111",
+            color: "#c8ffc8",
+            fontFamily: "monospace",
+            fontSize: "7px",
+            lineHeight: 1.15,
+            whiteSpace: "pre",
+            overflowX: "hidden",
+            overflowY: "hidden",
+            borderRadius: 4,
+            flexGrow: 1,
+          }}
+        >
+          {message}
+        </pre>
+      );
+    }
+
+    return renderTextEditor ? (
+      <Textarea
+        className="text-base border-none"
+        style={{
+          margin: "5px 0px",
+          fontFamily: "monospace",
+          resize: "none",
+          borderRadius: 5,
+          flexGrow: 1,
+        }}
+        value={message}
+        rows={8}
+        cols={30}
+        readOnly
+      />
+    ) : (
+      <Editor
+        value={message}
+        language="json"
+        onChange={(val) => val && setMessage(val)}
+      />
+    );
+  };
+
+  return (
+    <ServiceUI
+      className="pb-4"
+      {...props}
+      onInit={onInit}
+      onNotification={onNotification}
+      customMenuEntries={customMenuEntries}
+      initialSize={initialSize}
+    >
+      {renderEditor()}
+    </ServiceUI>
+  );
+}
+
+function isObject(obj: any) {
+  return typeof obj === "object" && obj !== null;
+}
+
+function unroll(params: any): any {
+  const type = typeof params;
+  if (type === "string") {
+    return params;
+  }
+  const isBlob = params instanceof Blob;
+  if (isBlob) {
+    return `Blob (${params.type} ${params.size} bytes)`;
+  }
+
+  const isUint8Array = params instanceof Uint8Array;
+  if (isUint8Array) {
+    return `Uint8Array of ${params.length} bytes)`;
+  }
+
+  const isPrimitive = !isObject(params);
+  if (isPrimitive) {
+    return params;
+  }
+  const isArray = Array.isArray(params);
+  if (isArray) {
+    return params.map((x) => unroll(x));
+  }
+
+  return Object.keys(params).reduce(
+    (all, key) => ({
+      ...all,
+      [key]: unroll(params[key]),
+    }),
+    {},
+  );
+}
+
+function createHexView(buffer: ArrayBuffer): string {
+  const view = new Uint8Array(buffer);
+  const hexArray = Array.from(view, (byte) =>
+    byte.toString(16).padStart(2, "0"),
+  );
+  // Prepare offset labels for each line
+  const offsetLabels: Array<string> = [];
+  for (let i = 0; i < view.length; i += 16) {
+    const from = i;
+    const to = Math.min(i + 15, view.length - 1);
+    offsetLabels.push(
+      `${from.toString().padStart(4, "0")}-${to.toString().padStart(4, "0")}`,
+    );
+  }
+  // First columns are hex values, 16 bytes per line
+  const hexLines: Array<string> = [];
+  for (let i = 0; i < hexArray.length; i += 16) {
+    const line = hexArray.slice(i, i + 16).join(" ");
+    hexLines.push(line);
+  }
+
+  // Add ASCII representation as a second column
+  for (let i = 0; i < view.length; i += 16) {
+    const hex = hexArray.slice(i, i + 16).join(" ");
+    const ascii = Array.from(view.slice(i, i + 16))
+      .map((b) => (b >= 32 && b <= 126 ? String.fromCharCode(b) : "."))
+      .join("");
+    hexLines[i / 16] = `${offsetLabels[i / 16]}: ${hex.padEnd(47)}  |${ascii}|`;
+  }
+  return hexLines.join("\n");
+}

package/bundle/hkp-frontend/src/runtime/browser/services/OllamaPrompt.ts

@@ -0,0 +1,237 @@
+import { AppInstance, ServiceClass } from "hkp-frontend/src/types";
+import ServiceBase from "./ServiceBase";
+
+import OllamaPromptUI from "./OllamaPromptUI";
+import { needsUpdate } from "hkp-frontend/src/ui-components/service/ServiceUI";
+
+const serviceName = "Ollama Prompt";
+const serviceId = "hookup.to/service/ollama-prompt";
+
+type State = {
+  availableModels: Array<string>;
+  model: string;
+  endpoint: string;
+  responseIsJson: boolean;
+  prompt: string;
+  temperature: number;
+  seed: number;
+};
+
+export class OllamaPrompt extends ServiceBase<State> {
+  constructor(
+    app: AppInstance,
+    board: string,
+    descriptor: ServiceClass,
+    id: string
+  ) {
+    super(app, board, descriptor, id, {
+      availableModels: [],
+      endpoint: "http://localhost:11434/api",
+      model: "",
+      responseIsJson: false,
+      prompt: "",
+      temperature: 0,
+      seed: 0,
+    });
+  }
+
+  fetchAvailableModels = () => {
+    fetch(`${this.state.endpoint}/tags`)
+      .then((r) => r.json())
+      .then((r) => r.models)
+      .then(this.onAvailableModels);
+  };
+
+  onAvailableModels = (models: Array<{ model: string }>) => {
+    this.state.availableModels = models.map((m) => m.model);
+    this.app.notify(this, {
+      availableModels: this.state.availableModels,
+    });
+  };
+
+  async configure(config: any) {
+    const { prompt, injectPrompt, model, temperature, endpoint } = config;
+
+    if (needsUpdate(endpoint, this.state.endpoint)) {
+      this.state.endpoint = endpoint;
+      this.app.notify(this, { endpoint: this.state.endpoint });
+    }
+    if (needsUpdate(model, this.state.model)) {
+      this.state.model = model;
+      this.app.notify(this, { model: this.state.model });
+    }
+
+    if (needsUpdate(config.responseIsJson, this.state.responseIsJson)) {
+      this.state.responseIsJson = config.responseIsJson;
+      this.app.notify(this, { responseIsJson: this.state.responseIsJson });
+    }
+
+    if (prompt !== undefined) {
+      this.state.prompt = prompt;
+      this.app.notify(this, { prompt: this.state.prompt });
+      if (injectPrompt) {
+        this.processAndInject("");
+      }
+    }
+
+    if (
+      !this.state.availableModels ||
+      this.state.availableModels.length === 0
+    ) {
+      this.fetchAvailableModels();
+    }
+
+    if (needsUpdate(temperature, this.state.temperature)) {
+      this.state.temperature = temperature;
+      this.app.notify(this, { temperature });
+    }
+  }
+
+  processAndInject = async (prompt: string) => {
+    const resume =
+      this.app.defer?.(this) ??
+      ((result: any) => this.app.next(this, result));
+    const result = await this.process(prompt);
+    this.app.notify(this, { answer: result });
+    resume(result);
+  };
+
+  async process(params: any) {
+    if (!this.state.model) {
+      throw new Error("Ollama no model specified");
+    }
+
+    const t = typeof params;
+    if (t !== "string") {
+      if (t === "object") {
+        params = JSON.stringify(params);
+      } else {
+        this.pushErrorNotification(
+          "Ollama prompt input must be of type string"
+        );
+        return null;
+      }
+    }
+    this.app.notify(this, { busy: true });
+
+    const messages = [
+      {
+        role: "system",
+        content: this.state.prompt,
+      },
+      {
+        role: "user",
+        content: `${params}`,
+      },
+    ];
+    console.log("OLLAMA PROMPT", messages);
+    const body: any = {
+      model: this.state.model,
+      messages,
+      options: {
+        seed: this.state.seed || undefined,
+        temperature: this.state.temperature,
+      },
+    };
+
+    const reportProgress = (partial: string) => {
+      const progressToOutput = false;
+      return progressToOutput
+        ? this.app.next(this, partial)
+        : this.app.notify(this, { update: partial });
+    };
+
+    const readAsStream = true;
+    if (readAsStream) {
+      const resp = await fetch(`${this.state.endpoint}/chat`, {
+        method: "POST",
+        body: JSON.stringify({ ...body, stream: true }),
+      });
+      const reader = resp.body?.getReader();
+      if (reader) {
+        const stream = new ReadableStream({
+          start(controller) {
+            function push() {
+              reader?.read().then(({ done, value }) => {
+                if (done) {
+                  return controller.close();
+                }
+                controller.enqueue(value);
+                const str = uint8arrayToStringMethod(value);
+                try {
+                  const partialResponse = str
+                    ? JSON.parse(str)?.message?.content
+                    : "";
+                  reportProgress(partialResponse);
+                } catch (_err) {
+                  /*
+                  console.error(
+                    "Could not parse the following partial JSON response",
+                    str
+                  );
+                  */
+                }
+
+                push();
+              });
+            }
+            push();
+          },
+        });
+
+        const r = new Response(stream, {
+          headers: { "Content-Type": "text/html" },
+        });
+        const chunks = await r.text();
+        this.app.notify(this, { busy: false });
+
+        const plainText = chunks
+          .split("\n")
+          .map((x) => (x ? JSON.parse(x) : ""))
+          .map((x) => x.message?.content)
+          .join("");
+
+        try {
+          const result = this.state.responseIsJson
+            ? JSON.parse(plainText)
+            : plainText;
+          return result;
+        } catch (err) {
+          console.error("OllamaPrompt", err);
+          throw new Error(
+            `Ollama Prompt attempted to parse a buffer as JSON which is not valid json: ${plainText}`
+          );
+        }
+      }
+    } else {
+      const resp = await fetch(this.state.endpoint, {
+        method: "POST",
+        body: JSON.stringify({ ...body, stream: false }),
+      });
+      const { response, done, done_reason } = await resp.json();
+      if (done && done_reason === "stop") {
+        this.app.notify(this, { busy: false });
+      }
+
+      return response || null;
+    }
+  }
+}
+
+function uint8arrayToStringMethod(uint8array: Uint8Array) {
+  return new TextDecoder("utf-8").decode(uint8array);
+}
+
+const descriptor = {
+  serviceName,
+  serviceId,
+  create: (
+    app: AppInstance,
+    board: string,
+    descriptor: ServiceClass,
+    id: string
+  ) => new OllamaPrompt(app, board, descriptor, id),
+  createUI: OllamaPromptUI,
+};
+
+export default descriptor;

package/bundle/hkp-frontend/src/runtime/browser/services/OllamaPromptUI/BusyIndicator.tsx

@@ -0,0 +1,18 @@
+type Props = {
+  isBusy: boolean;
+};
+
+export default function BusyIndicator({ isBusy }: Props) {
+  return (
+    <span className="relative flex h-3 w-3 mb-2 pt-1">
+      {isBusy && (
+        <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-sky-400 opacity-75"></span>
+      )}
+      <span
+        className={`relative inline-flex rounded-full h-3 w-3 ${
+          isBusy ? "bg-sky-500" : "bg-gray-200"
+        }`}
+      />
+    </span>
+  );
+}

package/bundle/hkp-frontend/src/runtime/browser/services/OllamaPromptUI/PromptInput.tsx

@@ -0,0 +1,71 @@
+import { useRef } from "react";
+
+import SubmittableTextarea from "hkp-frontend/src/ui-components/SubmittableTextarea";
+
+import Button from "hkp-frontend/src/ui-components/Button";
+import BusyIndicator from "./BusyIndicator";
+import StreamingPreview from "./StreamingPreview";
+
+type Props = {
+  accumulatedUpdate: string;
+  prompt: string;
+  isBusy: boolean;
+  isDisabled?: boolean;
+  buttonText?: string;
+  title?: string | null;
+  displayPreview?: boolean;
+  onProcessButton: (prompt: string) => void;
+  onSubmitPrompt: (prompt: string) => void;
+  onBlurPrompt?: (prompt: string) => void;
+};
+
+export default function PromptInput({
+  accumulatedUpdate,
+  prompt,
+  isBusy,
+  isDisabled,
+  title,
+  buttonText = "Process",
+  displayPreview = true,
+  onProcessButton,
+  onSubmitPrompt,
+  onBlurPrompt,
+}: Props) {
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+
+  const onBlur = () => {
+    onBlurPrompt?.(inputRef.current?.value || "");
+  };
+
+  return (
+    <div className="flex flex-col h-full w-full">
+      <SubmittableTextarea
+        ref={inputRef}
+        className="font-menu text-base resize-none h-full w-full"
+        title={title === null ? undefined : title || "Prompt"}
+        value={prompt}
+        onSubmit={onSubmitPrompt}
+        onBlur={onBlur}
+        disabled={isDisabled}
+      />
+      <div className="w-full my-2">
+        <Button
+          className="hkp-svc-btn w-full tracking-widest"
+          onClick={() =>
+            inputRef.current && onProcessButton(inputRef.current.value)
+          }
+        >
+          {buttonText}
+        </Button>
+      </div>
+      {displayPreview && (
+        <div className="flex items-top gap-4 border border-solid">
+          <div className="my-2 ml-2">
+            <BusyIndicator isBusy={isBusy} />
+          </div>
+          <StreamingPreview value={accumulatedUpdate} />
+        </div>
+      )}
+    </div>
+  );
+}

package/bundle/hkp-frontend/src/runtime/browser/services/OllamaPromptUI/StreamingPreview.tsx

@@ -0,0 +1,24 @@
+export default function StreamingPreview({ value }: { value: string }) {
+  return (
+    <div
+      className="w-full min-h-9 max-h-9 py-2 my-0 text-md font-menu text-left w-full overflow-y-auto"
+      style={{ position: "relative" }}
+    >
+      <div
+        className="text-gray-500"
+        style={{
+          position: "absolute",
+          textOverflow: "ellipsis",
+          overflowX: "hidden",
+          whiteSpace: "nowrap",
+          width: "100%",
+          direction: "rtl",
+          textAlign: "left",
+          minWidth: "500px",
+        }}
+      >
+        Idle, updates appear here during process {value}
+      </div>
+    </div>
+  );
+}