@gui-chat-plugin/html 0.1.0 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/core.cjs CHANGED
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=["tailwind","d3.js","three.js","p5.js","mermaid"],n={tailwind:"Tailwind CSS for utility-first styling","d3.js":"D3.js for data-driven visualizations and interactive charts","three.js":"Three.js for 3D graphics and WebGL rendering","p5.js":"p5.js for creative coding, animations, and generative art",mermaid:"Mermaid for diagrams and flowcharts from text definitions"},a="renderHtml",s={type:"function",name:a,description:"Render a full HTML page with specified library support (Tailwind CSS, D3.js, Three.js, Chart.js, p5.js, or Mermaid). The HTML will be rendered in an isolated iframe.",parameters:{type:"object",properties:{title:{type:"string",description:"Title for the HTML page"},html:{type:"string",description:"The complete HTML content to render. Should be a full HTML document including DOCTYPE, html, head, and body tags."},type:{type:"string",enum:[...e],description:`The primary library used in this HTML page. Valid values: ${e.map(t=>`'${t}' for ${n[t]}`).join(", ")}.`}},required:["title","html","type"]}},d="",o=async(l,t)=>{const{html:p,type:i,title:r}=t;if(!e.includes(i))throw new Error(`Invalid library type: ${i}. Must be one of: ${e.join(", ")}`);return{message:`Rendered HTML page: ${r} (using ${i})`,title:r,data:{html:p,type:i},instructions:"Acknowledge that the HTML page has been created and is displayed to the user."}},c={toolDefinition:s,execute:o,generatingMessage:"Rendering HTML page...",waitingMessage:"Tell the user that the HTML page was created and will be presented shortly.",isEnabled:()=>!0,systemPrompt:d};exports.HTML_LIBRARIES=e;exports.LIBRARY_DESCRIPTIONS=n;exports.SYSTEM_PROMPT=d;exports.TOOL_DEFINITION=s;exports.TOOL_NAME=a;exports.executeRenderHtml=o;exports.pluginCore=c;
1
+ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./plugin-3MyQV1DH.cjs`);exports.HTML_LIBRARIES=e.o,exports.LIBRARY_DESCRIPTIONS=e.s,exports.SYSTEM_PROMPT=e.r,exports.TOOL_DEFINITION=e.i,exports.TOOL_NAME=e.a,exports.executeRenderHtml=e.t,exports.pluginCore=e.n;
package/dist/core.js CHANGED
@@ -1,66 +1,2 @@
1
- const i = [
2
- "tailwind",
3
- "d3.js",
4
- "three.js",
5
- "p5.js",
6
- "mermaid"
7
- ], s = {
8
- tailwind: "Tailwind CSS for utility-first styling",
9
- "d3.js": "D3.js for data-driven visualizations and interactive charts",
10
- "three.js": "Three.js for 3D graphics and WebGL rendering",
11
- "p5.js": "p5.js for creative coding, animations, and generative art",
12
- mermaid: "Mermaid for diagrams and flowcharts from text definitions"
13
- }, d = "renderHtml", o = {
14
- type: "function",
15
- name: d,
16
- description: "Render a full HTML page with specified library support (Tailwind CSS, D3.js, Three.js, Chart.js, p5.js, or Mermaid). The HTML will be rendered in an isolated iframe.",
17
- parameters: {
18
- type: "object",
19
- properties: {
20
- title: {
21
- type: "string",
22
- description: "Title for the HTML page"
23
- },
24
- html: {
25
- type: "string",
26
- description: "The complete HTML content to render. Should be a full HTML document including DOCTYPE, html, head, and body tags."
27
- },
28
- type: {
29
- type: "string",
30
- enum: [...i],
31
- description: `The primary library used in this HTML page. Valid values: ${i.map(
32
- (e) => `'${e}' for ${s[e]}`
33
- ).join(", ")}.`
34
- }
35
- },
36
- required: ["title", "html", "type"]
37
- }
38
- }, l = "", p = async (n, e) => {
39
- const { html: a, type: t, title: r } = e;
40
- if (!i.includes(t))
41
- throw new Error(
42
- `Invalid library type: ${t}. Must be one of: ${i.join(", ")}`
43
- );
44
- return {
45
- message: `Rendered HTML page: ${r} (using ${t})`,
46
- title: r,
47
- data: { html: a, type: t },
48
- instructions: "Acknowledge that the HTML page has been created and is displayed to the user."
49
- };
50
- }, c = {
51
- toolDefinition: o,
52
- execute: p,
53
- generatingMessage: "Rendering HTML page...",
54
- waitingMessage: "Tell the user that the HTML page was created and will be presented shortly.",
55
- isEnabled: () => !0,
56
- systemPrompt: l
57
- };
58
- export {
59
- i as HTML_LIBRARIES,
60
- s as LIBRARY_DESCRIPTIONS,
61
- l as SYSTEM_PROMPT,
62
- o as TOOL_DEFINITION,
63
- d as TOOL_NAME,
64
- p as executeRenderHtml,
65
- c as pluginCore
66
- };
1
+ import { a as e, i as t, n, o as r, r as i, s as a, t as o } from "./plugin-BRpYWrE-.js";
2
+ export { r as HTML_LIBRARIES, a as LIBRARY_DESCRIPTIONS, i as SYSTEM_PROMPT, t as TOOL_DEFINITION, e as TOOL_NAME, o as executeRenderHtml, n as pluginCore };
@@ -0,0 +1,20 @@
1
+ /**
2
+ * EditHtml Plugin Tool Definition
3
+ */
4
+ export declare const TOOL_NAME = "editHtml";
5
+ export declare const TOOL_DEFINITION: {
6
+ type: "function";
7
+ name: string;
8
+ description: string;
9
+ parameters: {
10
+ type: "object";
11
+ properties: {
12
+ prompt: {
13
+ type: string;
14
+ description: string;
15
+ };
16
+ };
17
+ required: string[];
18
+ };
19
+ };
20
+ export declare const SYSTEM_PROMPT = "";
@@ -0,0 +1,7 @@
1
+ /**
2
+ * EditHtml Plugin - Core (Framework-agnostic)
3
+ */
4
+ export type { EditHtmlArgs, HtmlToolData, HtmlLibraryType } from "../shared/types";
5
+ export { HTML_LIBRARIES, LIBRARY_DESCRIPTIONS } from "../shared/types";
6
+ export { TOOL_NAME, TOOL_DEFINITION, SYSTEM_PROMPT } from "./definition";
7
+ export { executeEditHtml, pluginCore } from "./plugin";
@@ -0,0 +1,11 @@
1
+ /**
2
+ * EditHtml Plugin Core (Framework-agnostic)
3
+ */
4
+ import type { ToolPluginCore, ToolContext, ToolResult } from "gui-chat-protocol";
5
+ import type { EditHtmlArgs, HtmlToolData } from "../shared/types";
6
+ export { TOOL_NAME, TOOL_DEFINITION, SYSTEM_PROMPT } from "./definition";
7
+ /**
8
+ * Execute the editHtml function
9
+ */
10
+ export declare const executeEditHtml: (context: ToolContext, args: EditHtmlArgs) => Promise<ToolResult<HtmlToolData>>;
11
+ export declare const pluginCore: ToolPluginCore<HtmlToolData, unknown, EditHtmlArgs>;
@@ -0,0 +1,20 @@
1
+ /**
2
+ * GenerateHtml Plugin Tool Definition
3
+ */
4
+ export declare const TOOL_NAME = "generateHtml";
5
+ export declare const TOOL_DEFINITION: {
6
+ type: "function";
7
+ name: string;
8
+ description: string;
9
+ parameters: {
10
+ type: "object";
11
+ properties: {
12
+ prompt: {
13
+ type: string;
14
+ description: string;
15
+ };
16
+ };
17
+ required: string[];
18
+ };
19
+ };
20
+ export declare const SYSTEM_PROMPT = "";
@@ -0,0 +1,7 @@
1
+ /**
2
+ * GenerateHtml Plugin - Core (Framework-agnostic)
3
+ */
4
+ export type { GenerateHtmlArgs, HtmlToolData, HtmlLibraryType } from "../shared/types";
5
+ export { HTML_LIBRARIES, LIBRARY_DESCRIPTIONS } from "../shared/types";
6
+ export { TOOL_NAME, TOOL_DEFINITION, SYSTEM_PROMPT } from "./definition";
7
+ export { executeGenerateHtml, pluginCore } from "./plugin";
@@ -0,0 +1,11 @@
1
+ /**
2
+ * GenerateHtml Plugin Core (Framework-agnostic)
3
+ */
4
+ import type { ToolPluginCore, ToolContext, ToolResult } from "gui-chat-protocol";
5
+ import type { GenerateHtmlArgs, HtmlToolData } from "../shared/types";
6
+ export { TOOL_NAME, TOOL_DEFINITION, SYSTEM_PROMPT } from "./definition";
7
+ /**
8
+ * Execute the generateHtml function
9
+ */
10
+ export declare const executeGenerateHtml: (context: ToolContext, args: GenerateHtmlArgs) => Promise<ToolResult<HtmlToolData>>;
11
+ export declare const pluginCore: ToolPluginCore<HtmlToolData, unknown, GenerateHtmlArgs>;
package/dist/index.cjs CHANGED
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./core.cjs");exports.HTML_LIBRARIES=e.HTML_LIBRARIES;exports.LIBRARY_DESCRIPTIONS=e.LIBRARY_DESCRIPTIONS;exports.SYSTEM_PROMPT=e.SYSTEM_PROMPT;exports.TOOL_DEFINITION=e.TOOL_DEFINITION;exports.TOOL_NAME=e.TOOL_NAME;exports.executeRenderHtml=e.executeRenderHtml;exports.pluginCore=e.pluginCore;
1
+ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./plugin-3MyQV1DH.cjs`);require(`./core.cjs`),exports.HTML_LIBRARIES=e.o,exports.LIBRARY_DESCRIPTIONS=e.s,exports.SYSTEM_PROMPT=e.r,exports.TOOL_DEFINITION=e.i,exports.TOOL_NAME=e.a,exports.executeRenderHtml=e.t,exports.pluginCore=e.n;
package/dist/index.js CHANGED
@@ -1,10 +1,3 @@
1
- import { HTML_LIBRARIES as O, LIBRARY_DESCRIPTIONS as R, SYSTEM_PROMPT as T, TOOL_DEFINITION as E, TOOL_NAME as L, executeRenderHtml as S, pluginCore as _ } from "./core.js";
2
- export {
3
- O as HTML_LIBRARIES,
4
- R as LIBRARY_DESCRIPTIONS,
5
- T as SYSTEM_PROMPT,
6
- E as TOOL_DEFINITION,
7
- L as TOOL_NAME,
8
- S as executeRenderHtml,
9
- _ as pluginCore
10
- };
1
+ import { a as e, i as t, n, o as r, r as i, s as a, t as o } from "./plugin-BRpYWrE-.js";
2
+ import "./core.js";
3
+ export { r as HTML_LIBRARIES, a as LIBRARY_DESCRIPTIONS, i as SYSTEM_PROMPT, t as TOOL_DEFINITION, e as TOOL_NAME, o as executeRenderHtml, n as pluginCore };
@@ -0,0 +1 @@
1
+ var e=[`tailwind`,`d3.js`,`three.js`,`p5.js`,`mermaid`],t={tailwind:`Tailwind CSS for utility-first styling`,"d3.js":`D3.js for data-driven visualizations and interactive charts`,"three.js":`Three.js for 3D graphics and WebGL rendering`,"p5.js":`p5.js for creative coding, animations, and generative art`,mermaid:`Mermaid for diagrams and flowcharts from text definitions`},n=`renderHtml`,r={type:`function`,name:n,description:`Render a full HTML page with specified library support (Tailwind CSS, D3.js, Three.js, Chart.js, p5.js, or Mermaid). The HTML will be rendered in an isolated iframe.`,parameters:{type:`object`,properties:{title:{type:`string`,description:`Title for the HTML page`},html:{type:`string`,description:`The complete HTML content to render. Should be a full HTML document including DOCTYPE, html, head, and body tags.`},type:{type:`string`,enum:[...e],description:`The primary library used in this HTML page. Valid values: ${e.map(e=>`'${e}' for ${t[e]}`).join(`, `)}.`}},required:[`title`,`html`,`type`]}},i=``,a=async(t,n)=>{let{html:r,type:i,title:a}=n;if(!e.includes(i))throw Error(`Invalid library type: ${i}. Must be one of: ${e.join(`, `)}`);return{message:`Rendered HTML page: ${a} (using ${i})`,title:a,data:{html:r,type:i},instructions:`Acknowledge that the HTML page has been created and is displayed to the user.`}},o={toolDefinition:r,execute:a,generatingMessage:`Rendering HTML page...`,waitingMessage:`Tell the user that the HTML page was created and will be presented shortly.`,isEnabled:()=>!0,systemPrompt:``};Object.defineProperty(exports,`a`,{enumerable:!0,get:function(){return n}}),Object.defineProperty(exports,`i`,{enumerable:!0,get:function(){return r}}),Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return o}}),Object.defineProperty(exports,`o`,{enumerable:!0,get:function(){return e}}),Object.defineProperty(exports,`r`,{enumerable:!0,get:function(){return i}}),Object.defineProperty(exports,`s`,{enumerable:!0,get:function(){return t}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return a}});
@@ -0,0 +1,62 @@
1
+ //#region src/core/types.ts
2
+ var e = [
3
+ "tailwind",
4
+ "d3.js",
5
+ "three.js",
6
+ "p5.js",
7
+ "mermaid"
8
+ ], t = {
9
+ tailwind: "Tailwind CSS for utility-first styling",
10
+ "d3.js": "D3.js for data-driven visualizations and interactive charts",
11
+ "three.js": "Three.js for 3D graphics and WebGL rendering",
12
+ "p5.js": "p5.js for creative coding, animations, and generative art",
13
+ mermaid: "Mermaid for diagrams and flowcharts from text definitions"
14
+ }, n = "renderHtml", r = {
15
+ type: "function",
16
+ name: n,
17
+ description: "Render a full HTML page with specified library support (Tailwind CSS, D3.js, Three.js, Chart.js, p5.js, or Mermaid). The HTML will be rendered in an isolated iframe.",
18
+ parameters: {
19
+ type: "object",
20
+ properties: {
21
+ title: {
22
+ type: "string",
23
+ description: "Title for the HTML page"
24
+ },
25
+ html: {
26
+ type: "string",
27
+ description: "The complete HTML content to render. Should be a full HTML document including DOCTYPE, html, head, and body tags."
28
+ },
29
+ type: {
30
+ type: "string",
31
+ enum: [...e],
32
+ description: `The primary library used in this HTML page. Valid values: ${e.map((e) => `'${e}' for ${t[e]}`).join(", ")}.`
33
+ }
34
+ },
35
+ required: [
36
+ "title",
37
+ "html",
38
+ "type"
39
+ ]
40
+ }
41
+ }, i = "", a = async (t, n) => {
42
+ let { html: r, type: i, title: a } = n;
43
+ if (!e.includes(i)) throw Error(`Invalid library type: ${i}. Must be one of: ${e.join(", ")}`);
44
+ return {
45
+ message: `Rendered HTML page: ${a} (using ${i})`,
46
+ title: a,
47
+ data: {
48
+ html: r,
49
+ type: i
50
+ },
51
+ instructions: "Acknowledge that the HTML page has been created and is displayed to the user."
52
+ };
53
+ }, o = {
54
+ toolDefinition: r,
55
+ execute: a,
56
+ generatingMessage: "Rendering HTML page...",
57
+ waitingMessage: "Tell the user that the HTML page was created and will be presented shortly.",
58
+ isEnabled: () => !0,
59
+ systemPrompt: ""
60
+ };
61
+ //#endregion
62
+ export { n as a, r as i, o as n, e as o, i as r, t as s, a as t };
@@ -0,0 +1,8 @@
1
+ import type { ToolResult } from "gui-chat-protocol/vue";
2
+ import type { HtmlToolData } from "./types";
3
+ type __VLS_Props = {
4
+ result: ToolResult<HtmlToolData>;
5
+ };
6
+ 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>;
7
+ declare const _default: typeof __VLS_export;
8
+ export default _default;
@@ -0,0 +1,8 @@
1
+ import type { ToolResult } from "gui-chat-protocol/vue";
2
+ import type { HtmlToolData } from "./types";
3
+ type __VLS_Props = {
4
+ selectedResult: ToolResult<HtmlToolData>;
5
+ };
6
+ 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>;
7
+ declare const _default: typeof __VLS_export;
8
+ export default _default;
@@ -0,0 +1,5 @@
1
+ /**
2
+ * HTML Plugin - Shared Exports
3
+ */
4
+ export type { HtmlToolData, HtmlLibraryType, GenerateHtmlArgs, EditHtmlArgs, } from "./types";
5
+ export { HTML_LIBRARIES, LIBRARY_DESCRIPTIONS } from "./types";
@@ -0,0 +1,16 @@
1
+ /**
2
+ * HTML Plugin - Shared Types
3
+ */
4
+ export declare const HTML_LIBRARIES: readonly ["tailwind", "d3.js", "three.js", "p5.js", "mermaid"];
5
+ export type HtmlLibraryType = (typeof HTML_LIBRARIES)[number];
6
+ export declare const LIBRARY_DESCRIPTIONS: Record<HtmlLibraryType, string>;
7
+ export interface HtmlToolData {
8
+ html: string;
9
+ type: HtmlLibraryType;
10
+ }
11
+ export interface GenerateHtmlArgs {
12
+ prompt: string;
13
+ }
14
+ export interface EditHtmlArgs {
15
+ prompt: string;
16
+ }
package/dist/style.css CHANGED
@@ -1 +1,3 @@
1
- @layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-space-y-reverse:0;--tw-border-style:solid;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000}}}@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-blue-50:oklch(97% .014 254.604);--color-blue-300:oklch(80.9% .105 251.813);--color-blue-500:oklch(62.3% .214 259.815);--color-blue-600:oklch(54.6% .245 262.881);--color-blue-700:oklch(48.8% .243 264.376);--color-blue-900:oklch(37.9% .146 265.522);--color-gray-50:oklch(98.5% .002 247.839);--color-gray-100:oklch(96.7% .003 264.542);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-400:oklch(70.7% .022 261.325);--color-gray-500:oklch(55.1% .027 264.364);--color-gray-600:oklch(44.6% .03 256.802);--color-gray-800:oklch(27.8% .033 256.848);--color-gray-900:oklch(21% .034 264.665);--color-white:#fff;--spacing:.25rem;--container-4xl:56rem;--text-xs:.75rem;--text-xs--line-height:calc(1/.75);--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-xl:1.25rem;--text-xl--line-height:calc(1.75/1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2/1.5);--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--radius-lg:.5rem;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.mt-1{margin-top:calc(var(--spacing)*1)}.mb-8{margin-bottom:calc(var(--spacing)*8)}.contents{display:contents}.flex{display:flex}.h-96{height:calc(var(--spacing)*96)}.h-full{height:100%}.min-h-screen{min-height:100vh}.w-full{width:100%}.max-w-4xl{max-width:var(--container-4xl)}.flex-1{flex:1}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-2{gap:calc(var(--spacing)*2)}:where(.space-y-4>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*4)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*4)*calc(1 - var(--tw-space-y-reverse)))}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-hidden{overflow:hidden}.rounded{border-radius:.25rem}.rounded-lg{border-radius:var(--radius-lg)}.border-0{border-style:var(--tw-border-style);border-width:0}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-gray-200{border-color:var(--color-gray-200)}.bg-blue-50{background-color:var(--color-blue-50)}.bg-blue-500{background-color:var(--color-blue-500)}.bg-blue-600{background-color:var(--color-blue-600)}.bg-gray-50{background-color:var(--color-gray-50)}.bg-gray-100{background-color:var(--color-gray-100)}.bg-white{background-color:var(--color-white)}.p-4{padding:calc(var(--spacing)*4)}.p-8{padding:calc(var(--spacing)*8)}.px-3{padding-inline:calc(var(--spacing)*3)}.px-4{padding-inline:calc(var(--spacing)*4)}.py-1\.5{padding-block:calc(var(--spacing)*1.5)}.py-2{padding-block:calc(var(--spacing)*2)}.py-3{padding-block:calc(var(--spacing)*3)}.text-center{text-align:center}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.text-blue-600{color:var(--color-blue-600)}.text-gray-500{color:var(--color-gray-500)}.text-gray-600{color:var(--color-gray-600)}.text-gray-800{color:var(--color-gray-800)}.text-gray-900{color:var(--color-gray-900)}.text-white{color:var(--color-white)}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}@media(hover:hover){.hover\:bg-blue-600:hover{background-color:var(--color-blue-600)}.hover\:bg-blue-700:hover{background-color:var(--color-blue-700)}}@media(prefers-color-scheme:dark){.dark\:bg-blue-900{background-color:var(--color-blue-900)}.dark\:bg-gray-800{background-color:var(--color-gray-800)}.dark\:bg-gray-900{background-color:var(--color-gray-900)}.dark\:text-blue-300{color:var(--color-blue-300)}.dark\:text-gray-200{color:var(--color-gray-200)}.dark\:text-gray-400{color:var(--color-gray-400)}.dark\:text-white{color:var(--color-white)}}}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}
1
+ /*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
2
+ @layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-space-y-reverse:0;--tw-border-style:solid;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000}}}@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-blue-50:oklch(97% .014 254.604);--color-blue-300:oklch(80.9% .105 251.813);--color-blue-500:oklch(62.3% .214 259.815);--color-blue-600:oklch(54.6% .245 262.881);--color-blue-700:oklch(48.8% .243 264.376);--color-blue-900:oklch(37.9% .146 265.522);--color-gray-50:oklch(98.5% .002 247.839);--color-gray-100:oklch(96.7% .003 264.542);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-400:oklch(70.7% .022 261.325);--color-gray-500:oklch(55.1% .027 264.364);--color-gray-600:oklch(44.6% .03 256.802);--color-gray-800:oklch(27.8% .033 256.848);--color-gray-900:oklch(21% .034 264.665);--color-white:#fff;--spacing:.25rem;--container-2xl:42rem;--container-4xl:56rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-xl:1.25rem;--text-xl--line-height:calc(1.75 / 1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2 / 1.5);--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--radius-lg:.5rem;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.mt-1{margin-top:calc(var(--spacing) * 1)}.mb-4{margin-bottom:calc(var(--spacing) * 4)}.mb-8{margin-bottom:calc(var(--spacing) * 8)}.contents{display:contents}.flex{display:flex}.h-96{height:calc(var(--spacing) * 96)}.h-full{height:100%}.min-h-screen{min-height:100vh}.w-full{width:100%}.max-w-2xl{max-width:var(--container-2xl)}.max-w-4xl{max-width:var(--container-4xl)}.flex-1{flex:1}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-2{gap:calc(var(--spacing) * 2)}:where(.space-y-4>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)))}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-hidden{overflow:hidden}.rounded{border-radius:.25rem}.rounded-lg{border-radius:var(--radius-lg)}.border-0{border-style:var(--tw-border-style);border-width:0}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-gray-200{border-color:var(--color-gray-200)}.bg-blue-50{background-color:var(--color-blue-50)}.bg-blue-500{background-color:var(--color-blue-500)}.bg-blue-600{background-color:var(--color-blue-600)}.bg-gray-50{background-color:var(--color-gray-50)}.bg-gray-100{background-color:var(--color-gray-100)}.bg-white{background-color:var(--color-white)}.p-4{padding:calc(var(--spacing) * 4)}.p-8{padding:calc(var(--spacing) * 8)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.py-1\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-3{padding-block:calc(var(--spacing) * 3)}.text-center{text-align:center}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.text-blue-600{color:var(--color-blue-600)}.text-gray-500{color:var(--color-gray-500)}.text-gray-600{color:var(--color-gray-600)}.text-gray-800{color:var(--color-gray-800)}.text-gray-900{color:var(--color-gray-900)}.text-white{color:var(--color-white)}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}@media (hover:hover){.hover\:bg-blue-600:hover{background-color:var(--color-blue-600)}.hover\:bg-blue-700:hover{background-color:var(--color-blue-700)}}@media (prefers-color-scheme:dark){.dark\:bg-blue-900{background-color:var(--color-blue-900)}.dark\:bg-gray-800{background-color:var(--color-gray-800)}.dark\:bg-gray-900{background-color:var(--color-gray-900)}.dark\:text-blue-300{color:var(--color-blue-300)}.dark\:text-gray-200{color:var(--color-gray-200)}.dark\:text-gray-400{color:var(--color-gray-400)}.dark\:text-white{color:var(--color-white)}}}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}
3
+ /*$vite$:1*/
@@ -0,0 +1,17 @@
1
+ /**
2
+ * EditHtml Plugin - Vue Implementation
3
+ */
4
+ import "../style.css";
5
+ import type { ToolPlugin } from "gui-chat-protocol/vue";
6
+ import type { EditHtmlArgs, HtmlToolData } from "../shared/types";
7
+ import View from "../shared/View.vue";
8
+ import Preview from "../shared/Preview.vue";
9
+ export declare const plugin: ToolPlugin<HtmlToolData, unknown, EditHtmlArgs>;
10
+ export type { EditHtmlArgs, HtmlToolData, HtmlLibraryType } from "../shared/types";
11
+ export { HTML_LIBRARIES, LIBRARY_DESCRIPTIONS } from "../shared/types";
12
+ export { TOOL_NAME, TOOL_DEFINITION, SYSTEM_PROMPT, executeEditHtml, pluginCore, } from "../edit/plugin";
13
+ export { View, Preview };
14
+ declare const _default: {
15
+ plugin: ToolPlugin<HtmlToolData, unknown, EditHtmlArgs, import("gui-chat-protocol/vue").InputHandler, Record<string, unknown>>;
16
+ };
17
+ export default _default;
@@ -0,0 +1,17 @@
1
+ /**
2
+ * GenerateHtml Plugin - Vue Implementation
3
+ */
4
+ import "../style.css";
5
+ import type { ToolPlugin } from "gui-chat-protocol/vue";
6
+ import type { GenerateHtmlArgs, HtmlToolData } from "../shared/types";
7
+ import View from "../shared/View.vue";
8
+ import Preview from "../shared/Preview.vue";
9
+ export declare const plugin: ToolPlugin<HtmlToolData, unknown, GenerateHtmlArgs>;
10
+ export type { GenerateHtmlArgs, HtmlToolData, HtmlLibraryType } from "../shared/types";
11
+ export { HTML_LIBRARIES, LIBRARY_DESCRIPTIONS } from "../shared/types";
12
+ export { TOOL_NAME, TOOL_DEFINITION, SYSTEM_PROMPT, executeGenerateHtml, pluginCore, } from "../generate/plugin";
13
+ export { View, Preview };
14
+ declare const _default: {
15
+ plugin: ToolPlugin<HtmlToolData, unknown, GenerateHtmlArgs, import("gui-chat-protocol/vue").InputHandler, Record<string, unknown>>;
16
+ };
17
+ export default _default;
package/dist/vue.cjs CHANGED
@@ -1 +1 @@
1
- "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("./core.cjs"),e=require("vue"),b={class:"w-full h-full overflow-hidden bg-white flex flex-col"},_={key:0,class:"flex-1 flex items-center justify-center"},g={class:"flex items-center justify-between px-4 py-3 border-b border-gray-200 bg-gray-50"},x={class:"text-xl font-semibold text-gray-800"},f=["srcdoc"],d=e.defineComponent({__name:"View",props:{selectedResult:{}},setup(s){const o=s,a=()=>{console.log("HTML iframe loaded successfully")},i=()=>{const n=o.selectedResult.data?.html;if(!n)return;const t=new Blob([n],{type:"text/html"}),r=URL.createObjectURL(t),c=document.createElement("a");c.href=r;const p=o.selectedResult.title?`${o.selectedResult.title.replace(/[^a-z0-9]/gi,"_").toLowerCase()}.html`:"page.html";c.download=p,document.body.appendChild(c),c.click(),document.body.removeChild(c),URL.revokeObjectURL(r)};return(n,t)=>(e.openBlock(),e.createElementBlock("div",b,[s.selectedResult.data?.html?(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.createElementVNode("div",g,[e.createElementVNode("h1",x,e.toDisplayString(s.selectedResult.title||"HTML Page"),1),e.createElementVNode("button",{onClick:i,class:"flex items-center gap-2 px-3 py-1.5 bg-blue-500 hover:bg-blue-600 text-white rounded text-sm transition-colors"}," ⬇ HTML ")]),e.createElementVNode("iframe",{srcdoc:s.selectedResult.data.html,class:"flex-1 w-full border-0",sandbox:"allow-scripts allow-same-origin",onLoad:a},null,40,f)],64)):(e.openBlock(),e.createElementBlock("div",_,[...t[0]||(t[0]=[e.createElementVNode("div",{class:"text-gray-500"},"No HTML content available",-1)])]))]))}}),y={class:"text-center p-4 bg-blue-50 dark:bg-blue-900 rounded"},h={class:"text-blue-600 dark:text-blue-300 font-medium"},R={class:"text-sm text-gray-800 dark:text-gray-200 mt-1 font-medium truncate"},L={class:"text-xs text-gray-600 dark:text-gray-400 mt-1"},u=e.defineComponent({__name:"Preview",props:{result:{}},setup(s){const o=s,a=e.computed(()=>o.result.title||"HTML Page"),i=e.computed(()=>{const t=o.result.data?.type;return t?{tailwind:"Tailwind CSS","d3.js":"D3.js","three.js":"Three.js",mermaid:"Mermaid","p5.js":"p5.js"}[t]:""}),n=e.computed(()=>{const t=o.result.data?.type;return t?{tailwind:"🎨","d3.js":"📊","three.js":"🎮",mermaid:"📋","p5.js":"🎨"}[t]:"🌐"});return(t,r)=>(e.openBlock(),e.createElementBlock("div",y,[e.createElementVNode("div",h,e.toDisplayString(n.value)+" HTML ",1),e.createElementVNode("div",R,e.toDisplayString(a.value),1),e.createElementVNode("div",L,e.toDisplayString(i.value),1)]))}}),m={...l.pluginCore,viewComponent:d,previewComponent:u},T={plugin:m};exports.HTML_LIBRARIES=l.HTML_LIBRARIES;exports.LIBRARY_DESCRIPTIONS=l.LIBRARY_DESCRIPTIONS;exports.SYSTEM_PROMPT=l.SYSTEM_PROMPT;exports.TOOL_DEFINITION=l.TOOL_DEFINITION;exports.TOOL_NAME=l.TOOL_NAME;exports.executeRenderHtml=l.executeRenderHtml;exports.pluginCore=l.pluginCore;exports.Preview=u;exports.View=d;exports.default=T;exports.plugin=m;
1
+ Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require(`./plugin-3MyQV1DH.cjs`);let t=require(`vue`);var n={class:`w-full h-full overflow-hidden bg-white flex flex-col`},r={key:0,class:`flex-1 flex items-center justify-center`},i={class:`flex items-center justify-between px-4 py-3 border-b border-gray-200 bg-gray-50`},a={class:`text-xl font-semibold text-gray-800`},o=[`srcdoc`],s=(0,t.defineComponent)({__name:`View`,props:{selectedResult:{}},setup(e){let s=e,c=()=>{console.log(`HTML iframe loaded successfully`)},l=()=>{let e=s.selectedResult.data?.html;if(!e)return;let t=new Blob([e],{type:`text/html`}),n=URL.createObjectURL(t),r=document.createElement(`a`);r.href=n,r.download=s.selectedResult.title?`${s.selectedResult.title.replace(/[^a-z0-9]/gi,`_`).toLowerCase()}.html`:`page.html`,document.body.appendChild(r),r.click(),document.body.removeChild(r),URL.revokeObjectURL(n)};return(s,u)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,n,[e.selectedResult.data?.html?((0,t.openBlock)(),(0,t.createElementBlock)(t.Fragment,{key:1},[(0,t.createElementVNode)(`div`,i,[(0,t.createElementVNode)(`h1`,a,(0,t.toDisplayString)(e.selectedResult.title||`HTML Page`),1),(0,t.createElementVNode)(`button`,{onClick:l,class:`flex items-center gap-2 px-3 py-1.5 bg-blue-500 hover:bg-blue-600 text-white rounded text-sm transition-colors`},` ⬇ HTML `)]),(0,t.createElementVNode)(`iframe`,{srcdoc:e.selectedResult.data.html,class:`flex-1 w-full border-0`,sandbox:`allow-scripts allow-same-origin`,onLoad:c},null,40,o)],64)):((0,t.openBlock)(),(0,t.createElementBlock)(`div`,r,[...u[0]||=[(0,t.createElementVNode)(`div`,{class:`text-gray-500`},`No HTML content available`,-1)]]))]))}}),c={class:`text-center p-4 bg-blue-50 dark:bg-blue-900 rounded`},l={class:`text-blue-600 dark:text-blue-300 font-medium`},u={class:`text-sm text-gray-800 dark:text-gray-200 mt-1 font-medium truncate`},d={class:`text-xs text-gray-600 dark:text-gray-400 mt-1`},f=(0,t.defineComponent)({__name:`Preview`,props:{result:{}},setup(e){let n=e,r=(0,t.computed)(()=>n.result.title||`HTML Page`),i=(0,t.computed)(()=>{let e=n.result.data?.type;return e?{tailwind:`Tailwind CSS`,"d3.js":`D3.js`,"three.js":`Three.js`,mermaid:`Mermaid`,"p5.js":`p5.js`}[e]:``}),a=(0,t.computed)(()=>{let e=n.result.data?.type;return e?{tailwind:`🎨`,"d3.js":`📊`,"three.js":`🎮`,mermaid:`📋`,"p5.js":`🎨`}[e]:`🌐`});return(e,n)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,c,[(0,t.createElementVNode)(`div`,l,(0,t.toDisplayString)(a.value)+` HTML `,1),(0,t.createElementVNode)(`div`,u,(0,t.toDisplayString)(r.value),1),(0,t.createElementVNode)(`div`,d,(0,t.toDisplayString)(i.value),1)]))}}),p={...e.n,viewComponent:s,previewComponent:f},m={plugin:p};exports.HTML_LIBRARIES=e.o,exports.LIBRARY_DESCRIPTIONS=e.s,exports.Preview=f,exports.SYSTEM_PROMPT=e.r,exports.TOOL_DEFINITION=e.i,exports.TOOL_NAME=e.a,exports.View=s,exports.default=m,exports.executeRenderHtml=e.t,exports.plugin=p,exports.pluginCore=e.n;
package/dist/vue.js CHANGED
@@ -1,91 +1,64 @@
1
- import { pluginCore as x } from "./core.js";
2
- import { HTML_LIBRARIES as S, LIBRARY_DESCRIPTIONS as P, SYSTEM_PROMPT as N, TOOL_DEFINITION as $, TOOL_NAME as B, executeRenderHtml as D } from "./core.js";
3
- import { defineComponent as p, createElementBlock as a, openBlock as c, createElementVNode as t, Fragment as f, toDisplayString as i, computed as m } from "vue";
4
- const h = { class: "w-full h-full overflow-hidden bg-white flex flex-col" }, _ = {
5
- key: 0,
6
- class: "flex-1 flex items-center justify-center"
7
- }, y = { class: "flex items-center justify-between px-4 py-3 border-b border-gray-200 bg-gray-50" }, g = { class: "text-xl font-semibold text-gray-800" }, w = ["srcdoc"], v = /* @__PURE__ */ p({
8
- __name: "View",
9
- props: {
10
- selectedResult: {}
11
- },
12
- setup(l) {
13
- const s = l, d = () => {
14
- console.log("HTML iframe loaded successfully");
15
- }, u = () => {
16
- const o = s.selectedResult.data?.html;
17
- if (!o) return;
18
- const e = new Blob([o], { type: "text/html" }), n = URL.createObjectURL(e), r = document.createElement("a");
19
- r.href = n;
20
- const b = s.selectedResult.title ? `${s.selectedResult.title.replace(/[^a-z0-9]/gi, "_").toLowerCase()}.html` : "page.html";
21
- r.download = b, document.body.appendChild(r), r.click(), document.body.removeChild(r), URL.revokeObjectURL(n);
22
- };
23
- return (o, e) => (c(), a("div", h, [
24
- l.selectedResult.data?.html ? (c(), a(f, { key: 1 }, [
25
- t("div", y, [
26
- t("h1", g, i(l.selectedResult.title || "HTML Page"), 1),
27
- t("button", {
28
- onClick: u,
29
- class: "flex items-center gap-2 px-3 py-1.5 bg-blue-500 hover:bg-blue-600 text-white rounded text-sm transition-colors"
30
- }, " ⬇ HTML ")
31
- ]),
32
- t("iframe", {
33
- srcdoc: l.selectedResult.data.html,
34
- class: "flex-1 w-full border-0",
35
- sandbox: "allow-scripts allow-same-origin",
36
- onLoad: d
37
- }, null, 40, w)
38
- ], 64)) : (c(), a("div", _, [...e[0] || (e[0] = [
39
- t("div", { class: "text-gray-500" }, "No HTML content available", -1)
40
- ])]))
41
- ]));
42
- }
43
- }), L = { class: "text-center p-4 bg-blue-50 dark:bg-blue-900 rounded" }, R = { class: "text-blue-600 dark:text-blue-300 font-medium" }, T = { class: "text-sm text-gray-800 dark:text-gray-200 mt-1 font-medium truncate" }, j = { class: "text-xs text-gray-600 dark:text-gray-400 mt-1" }, k = /* @__PURE__ */ p({
44
- __name: "Preview",
45
- props: {
46
- result: {}
47
- },
48
- setup(l) {
49
- const s = l, d = m(() => s.result.title || "HTML Page"), u = m(() => {
50
- const e = s.result.data?.type;
51
- return e ? {
52
- tailwind: "Tailwind CSS",
53
- "d3.js": "D3.js",
54
- "three.js": "Three.js",
55
- mermaid: "Mermaid",
56
- "p5.js": "p5.js"
57
- }[e] : "";
58
- }), o = m(() => {
59
- const e = s.result.data?.type;
60
- return e ? {
61
- tailwind: "🎨",
62
- "d3.js": "📊",
63
- "three.js": "🎮",
64
- mermaid: "📋",
65
- "p5.js": "🎨"
66
- }[e] : "🌐";
67
- });
68
- return (e, n) => (c(), a("div", L, [
69
- t("div", R, i(o.value) + " HTML ", 1),
70
- t("div", T, i(d.value), 1),
71
- t("div", j, i(u.value), 1)
72
- ]));
73
- }
74
- }), M = {
75
- ...x,
76
- viewComponent: v,
77
- previewComponent: k
78
- }, H = { plugin: M };
79
- export {
80
- S as HTML_LIBRARIES,
81
- P as LIBRARY_DESCRIPTIONS,
82
- k as Preview,
83
- N as SYSTEM_PROMPT,
84
- $ as TOOL_DEFINITION,
85
- B as TOOL_NAME,
86
- v as View,
87
- H as default,
88
- D as executeRenderHtml,
89
- M as plugin,
90
- x as pluginCore
91
- };
1
+ import { a as e, i as t, n, o as r, r as i, s as a, t as o } from "./plugin-BRpYWrE-.js";
2
+ import { Fragment as s, computed as c, createElementBlock as l, createElementVNode as u, defineComponent as d, openBlock as f, toDisplayString as p } from "vue";
3
+ //#region src/vue/View.vue?vue&type=script&setup=true&lang.ts
4
+ var m = { class: "w-full h-full overflow-hidden bg-white flex flex-col" }, h = {
5
+ key: 0,
6
+ class: "flex-1 flex items-center justify-center"
7
+ }, g = { class: "flex items-center justify-between px-4 py-3 border-b border-gray-200 bg-gray-50" }, _ = { class: "text-xl font-semibold text-gray-800" }, v = ["srcdoc"], y = /* @__PURE__ */ d({
8
+ __name: "View",
9
+ props: { selectedResult: {} },
10
+ setup(e) {
11
+ let t = e, n = () => {
12
+ console.log("HTML iframe loaded successfully");
13
+ }, r = () => {
14
+ let e = t.selectedResult.data?.html;
15
+ if (!e) return;
16
+ let n = new Blob([e], { type: "text/html" }), r = URL.createObjectURL(n), i = document.createElement("a");
17
+ i.href = r, i.download = t.selectedResult.title ? `${t.selectedResult.title.replace(/[^a-z0-9]/gi, "_").toLowerCase()}.html` : "page.html", document.body.appendChild(i), i.click(), document.body.removeChild(i), URL.revokeObjectURL(r);
18
+ };
19
+ return (t, i) => (f(), l("div", m, [e.selectedResult.data?.html ? (f(), l(s, { key: 1 }, [u("div", g, [u("h1", _, p(e.selectedResult.title || "HTML Page"), 1), u("button", {
20
+ onClick: r,
21
+ class: "flex items-center gap-2 px-3 py-1.5 bg-blue-500 hover:bg-blue-600 text-white rounded text-sm transition-colors"
22
+ }, " ⬇ HTML ")]), u("iframe", {
23
+ srcdoc: e.selectedResult.data.html,
24
+ class: "flex-1 w-full border-0",
25
+ sandbox: "allow-scripts allow-same-origin",
26
+ onLoad: n
27
+ }, null, 40, v)], 64)) : (f(), l("div", h, [...i[0] ||= [u("div", { class: "text-gray-500" }, "No HTML content available", -1)]]))]));
28
+ }
29
+ }), b = { class: "text-center p-4 bg-blue-50 dark:bg-blue-900 rounded" }, x = { class: "text-blue-600 dark:text-blue-300 font-medium" }, S = { class: "text-sm text-gray-800 dark:text-gray-200 mt-1 font-medium truncate" }, C = { class: "text-xs text-gray-600 dark:text-gray-400 mt-1" }, w = /* @__PURE__ */ d({
30
+ __name: "Preview",
31
+ props: { result: {} },
32
+ setup(e) {
33
+ let t = e, n = c(() => t.result.title || "HTML Page"), r = c(() => {
34
+ let e = t.result.data?.type;
35
+ return e ? {
36
+ tailwind: "Tailwind CSS",
37
+ "d3.js": "D3.js",
38
+ "three.js": "Three.js",
39
+ mermaid: "Mermaid",
40
+ "p5.js": "p5.js"
41
+ }[e] : "";
42
+ }), i = c(() => {
43
+ let e = t.result.data?.type;
44
+ return e ? {
45
+ tailwind: "🎨",
46
+ "d3.js": "📊",
47
+ "three.js": "🎮",
48
+ mermaid: "📋",
49
+ "p5.js": "🎨"
50
+ }[e] : "🌐";
51
+ });
52
+ return (e, t) => (f(), l("div", b, [
53
+ u("div", x, p(i.value) + " HTML ", 1),
54
+ u("div", S, p(n.value), 1),
55
+ u("div", C, p(r.value), 1)
56
+ ]));
57
+ }
58
+ }), T = {
59
+ ...n,
60
+ viewComponent: y,
61
+ previewComponent: w
62
+ }, E = { plugin: T };
63
+ //#endregion
64
+ export { r as HTML_LIBRARIES, a as LIBRARY_DESCRIPTIONS, w as Preview, i as SYSTEM_PROMPT, t as TOOL_DEFINITION, e as TOOL_NAME, y as View, E as default, o as executeRenderHtml, T as plugin, n as pluginCore };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gui-chat-plugin/html",
3
- "version": "0.1.0",
3
+ "version": "0.2.0",
4
4
  "description": "Render HTML plugin for GUIChat",
5
5
  "type": "module",
6
6
  "main": "./dist/index.cjs",
@@ -34,24 +34,25 @@
34
34
  "lint": "eslint src demo"
35
35
  },
36
36
  "peerDependencies": {
37
- "gui-chat-protocol": "^0.0.1",
37
+ "gui-chat-protocol": "^0.1.0",
38
38
  "vue": "^3.5.0"
39
39
  },
40
40
  "devDependencies": {
41
- "@tailwindcss/vite": "^4.1.18",
42
- "@typescript-eslint/eslint-plugin": "^8.53.0",
43
- "@typescript-eslint/parser": "^8.53.0",
44
- "@vitejs/plugin-vue": "^6.0.3",
45
- "eslint": "^9.39.2",
46
- "eslint-plugin-vue": "^10.6.2",
47
- "globals": "^17.0.0",
48
- "gui-chat-protocol": "^0.0.1",
49
- "tailwindcss": "^4.1.18",
50
- "typescript": "~5.9.3",
51
- "vite": "^7.3.1",
52
- "vue": "^3.5.27",
53
- "vue-eslint-parser": "^10.2.0",
54
- "vue-tsc": "^3.2.2"
41
+ "@eslint/js": "^10.0.1",
42
+ "@tailwindcss/vite": "^4.2.2",
43
+ "@typescript-eslint/eslint-plugin": "^8.58.0",
44
+ "@typescript-eslint/parser": "^8.58.0",
45
+ "@vitejs/plugin-vue": "^6.0.5",
46
+ "eslint": "^10.1.0",
47
+ "eslint-plugin-vue": "^10.8.0",
48
+ "globals": "^17.4.0",
49
+ "gui-chat-protocol": "^0.1.0",
50
+ "tailwindcss": "^4.2.2",
51
+ "typescript": "~6.0.2",
52
+ "vite": "^8.0.3",
53
+ "vue": "^3.5.31",
54
+ "vue-eslint-parser": "^10.4.0",
55
+ "vue-tsc": "^3.2.6"
55
56
  },
56
57
  "keywords": [
57
58
  "guichat",