@mulmochat-plugin/ui-image 0.1.0

package/README.md

@@ -0,0 +1,50 @@
+# @mulmochat-plugin/ui-image
+
+Shared image UI components for MulmoChat plugins.
+
+## Installation
+
+```bash
+npm install @mulmochat-plugin/ui-image
+```
+
+## Usage
+
+```typescript
+import { ImageView, ImagePreview } from "@mulmochat-plugin/ui-image";
+import type { ImageToolData } from "@mulmochat-plugin/ui-image";
+import "@mulmochat-plugin/ui-image/style.css";
+
+export const plugin = {
+  // ...
+  viewComponent: ImageView,
+  previewComponent: ImagePreview,
+};
+```
+
+## Components
+
+### ImageView
+
+Full-size image view component with prompt display.
+
+Props:
+- `selectedResult: ToolResult<ImageToolData>` - The tool result containing image data
+
+### ImagePreview
+
+Thumbnail preview component for sidebar.
+
+Props:
+- `result: ToolResult<ImageToolData>` - The tool result containing image data
+
+## Types
+
+### ImageToolData
+
+```typescript
+interface ImageToolData {
+  imageData: string;  // Base64 encoded image data URL
+  prompt?: string;    // Optional prompt used to generate the image
+}
+```

package/dist/ImagePreview.vue.d.ts

@@ -0,0 +1,7 @@
+import type { ToolResult, ImageToolData } from "./types";
+type __VLS_Props = {
+    result: ToolResult<ImageToolData>;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/ImageView.vue.d.ts

@@ -0,0 +1,7 @@
+import type { ToolResult, ImageToolData } from "./types";
+type __VLS_Props = {
+    selectedResult: ToolResult<ImageToolData>;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),s={class:"w-full h-full overflow-y-auto"},c={class:"min-h-full flex flex-col items-center justify-center p-4"},n={class:"flex-1 flex items-center justify-center min-h-0"},o=["src"],r={key:0,class:"mt-4 p-3 bg-gray-100 dark:bg-gray-800 rounded-lg max-w-full flex-shrink-0"},i={class:"text-sm text-gray-700 dark:text-gray-300"},m=e.defineComponent({__name:"ImageView",props:{selectedResult:{}},setup(t){return(l,a)=>(e.openBlock(),e.createElementBlock("div",s,[e.createElementVNode("div",c,[e.createElementVNode("div",n,[e.createElementVNode("img",{src:t.selectedResult.data?.imageData,class:"max-w-full max-h-full object-contain rounded",alt:"Current generated image"},null,8,o)]),t.selectedResult.data?.prompt?(e.openBlock(),e.createElementBlock("div",r,[e.createElementVNode("p",i,[a[0]||(a[0]=e.createElementVNode("span",{class:"font-medium"},"Prompt:",-1)),e.createTextVNode(" "+e.toDisplayString(t.selectedResult.data.prompt),1)])])):e.createCommentVNode("",!0)])]))}}),d={class:"min-h-[100px] flex items-center justify-center"},u=["src"],g={key:1,class:"text-gray-400 text-sm"},f=e.defineComponent({__name:"ImagePreview",props:{result:{}},setup(t){return(l,a)=>(e.openBlock(),e.createElementBlock("div",d,[t.result.data?.imageData?(e.openBlock(),e.createElementBlock("img",{key:0,src:t.result.data.imageData,class:"max-w-full h-auto rounded",alt:"Generated image"},null,8,u)):(e.openBlock(),e.createElementBlock("div",g,"No image yet"))]))}});exports.ImagePreview=f;exports.ImageView=m;

package/dist/index.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @mulmochat-plugin/ui-image
+ *
+ * Shared image UI components for MulmoChat plugins.
+ *
+ * @example
+ * ```typescript
+ * import { ImageView, ImagePreview } from "@mulmochat-plugin/ui-image";
+ * import "@mulmochat-plugin/ui-image/style.css";
+ * ```
+ */
+export { default as ImageView } from "./ImageView.vue";
+export { default as ImagePreview } from "./ImagePreview.vue";
+export type { ImageToolData, ToolResult } from "./types";

package/dist/index.js

@@ -0,0 +1,51 @@
+import { defineComponent as r, createElementBlock as s, openBlock as a, createElementVNode as t, createCommentVNode as c, createTextVNode as o, toDisplayString as i } from "vue";
+const m = { class: "w-full h-full overflow-y-auto" }, d = { class: "min-h-full flex flex-col items-center justify-center p-4" }, u = { class: "flex-1 flex items-center justify-center min-h-0" }, f = ["src"], g = {
+  key: 0,
+  class: "mt-4 p-3 bg-gray-100 dark:bg-gray-800 rounded-lg max-w-full flex-shrink-0"
+}, _ = { class: "text-sm text-gray-700 dark:text-gray-300" }, v = /* @__PURE__ */ r({
+  __name: "ImageView",
+  props: {
+    selectedResult: {}
+  },
+  setup(e) {
+    return (n, l) => (a(), s("div", m, [
+      t("div", d, [
+        t("div", u, [
+          t("img", {
+            src: e.selectedResult.data?.imageData,
+            class: "max-w-full max-h-full object-contain rounded",
+            alt: "Current generated image"
+          }, null, 8, f)
+        ]),
+        e.selectedResult.data?.prompt ? (a(), s("div", g, [
+          t("p", _, [
+            l[0] || (l[0] = t("span", { class: "font-medium" }, "Prompt:", -1)),
+            o(" " + i(e.selectedResult.data.prompt), 1)
+          ])
+        ])) : c("", !0)
+      ])
+    ]));
+  }
+}), x = { class: "min-h-[100px] flex items-center justify-center" }, h = ["src"], p = {
+  key: 1,
+  class: "text-gray-400 text-sm"
+}, w = /* @__PURE__ */ r({
+  __name: "ImagePreview",
+  props: {
+    result: {}
+  },
+  setup(e) {
+    return (n, l) => (a(), s("div", x, [
+      e.result.data?.imageData ? (a(), s("img", {
+        key: 0,
+        src: e.result.data.imageData,
+        class: "max-w-full h-auto rounded",
+        alt: "Generated image"
+      }, null, 8, h)) : (a(), s("div", p, "No image yet"))
+    ]));
+  }
+});
+export {
+  w as ImagePreview,
+  v as ImageView
+};

package/dist/types.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Image UI Component Types
+ */
+/**
+ * Data structure for image tool results
+ */
+export interface ImageToolData {
+    imageData: string;
+    prompt?: string;
+}
+/**
+ * Minimal ToolResult interface for view components
+ */
+export interface ToolResult<T = unknown> {
+    toolName?: string;
+    message: string;
+    data?: T;
+}

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@mulmochat-plugin/ui-image",
+  "version": "0.1.0",
+  "description": "Shared image UI components for MulmoChat plugins",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build && vue-tsc -p tsconfig.build.json --emitDeclarationOnly",
+    "typecheck": "vue-tsc --noEmit",
+    "lint": "eslint src"
+  },
+  "peerDependencies": {
+    "vue": "^3.5.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.1.18",
+    "@typescript-eslint/eslint-plugin": "^8.53.0",
+    "@typescript-eslint/parser": "^8.53.0",
+    "@vitejs/plugin-vue": "^6.0.3",
+    "eslint": "^9.39.2",
+    "eslint-plugin-vue": "^10.6.2",
+    "globals": "^17.0.0",
+    "tailwindcss": "^4.1.18",
+    "typescript": "~5.9.3",
+    "vite": "^7.3.1",
+    "vue": "^3.5.26",
+    "vue-eslint-parser": "^10.2.0",
+    "vue-tsc": "^3.2.2"
+  },
+  "keywords": [
+    "mulmochat",
+    "plugin",
+    "ui",
+    "image"
+  ],
+  "license": "MIT"
+}