@mulmochat-plugin/form 0.1.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/README.md +96 -0
- package/dist/common/index.d.ts +7 -0
- package/dist/common/types.d.ts +128 -0
- package/dist/form.css +1 -0
- package/dist/index.cjs +2 -0
- package/dist/index.d.ts +15 -0
- package/dist/index.js +994 -0
- package/dist/plugin.d.ts +105 -0
- package/dist/previews/FormPreview.vue.d.ts +7 -0
- package/dist/types.d.ts +5 -0
- package/dist/views/FormView.vue.d.ts +12 -0
- package/package.json +50 -0
package/README.md
ADDED
|
@@ -0,0 +1,96 @@
|
|
|
1
|
+
# MulmoChat Plugin Form
|
|
2
|
+
|
|
3
|
+
A form plugin for MulmoChat. Creates structured forms to collect user information.
|
|
4
|
+
|
|
5
|
+
## Overview
|
|
6
|
+
|
|
7
|
+
This plugin provides dynamic form generation with various field types including text, textarea, radio, dropdown, checkbox, date, time, and number fields.
|
|
8
|
+
|
|
9
|
+
- **Tailwind CSS 4** for styling
|
|
10
|
+
- **TypeScript** for type-safe implementation
|
|
11
|
+
- **ESLint** for static analysis
|
|
12
|
+
|
|
13
|
+
## Installation
|
|
14
|
+
|
|
15
|
+
### Adding to MulmoChat
|
|
16
|
+
|
|
17
|
+
1. Install the plugin:
|
|
18
|
+
```bash
|
|
19
|
+
cd MulmoChat
|
|
20
|
+
yarn add @mulmochat-plugin/form
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
2. Import in MulmoChat's `src/tools/index.ts`:
|
|
24
|
+
```typescript
|
|
25
|
+
import FormPlugin from "@mulmochat-plugin/form";
|
|
26
|
+
import "@mulmochat-plugin/form/style.css";
|
|
27
|
+
|
|
28
|
+
// Add to pluginList
|
|
29
|
+
const pluginList = [
|
|
30
|
+
// ... other plugins
|
|
31
|
+
FormPlugin,
|
|
32
|
+
];
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
## Development
|
|
36
|
+
|
|
37
|
+
### Setup
|
|
38
|
+
|
|
39
|
+
```bash
|
|
40
|
+
yarn install
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
### Development Server
|
|
44
|
+
|
|
45
|
+
```bash
|
|
46
|
+
yarn dev
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
Demo page will be available at http://localhost:5173/
|
|
50
|
+
|
|
51
|
+
### Build
|
|
52
|
+
|
|
53
|
+
```bash
|
|
54
|
+
yarn build
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
### Type Check
|
|
58
|
+
|
|
59
|
+
```bash
|
|
60
|
+
yarn typecheck
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
### Lint
|
|
64
|
+
|
|
65
|
+
```bash
|
|
66
|
+
yarn lint
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
## Plugin Structure
|
|
70
|
+
|
|
71
|
+
```
|
|
72
|
+
MulmoChatPluginForm/
|
|
73
|
+
├── src/
|
|
74
|
+
│ ├── index.ts # Export definitions
|
|
75
|
+
│ ├── plugin.ts # Form-specific plugin implementation
|
|
76
|
+
│ ├── types.ts # Re-exports common types (backward compat)
|
|
77
|
+
│ ├── style.css # Tailwind CSS entry
|
|
78
|
+
│ ├── common/ # Plugin-agnostic shared code
|
|
79
|
+
│ │ ├── index.ts # Common exports
|
|
80
|
+
│ │ └── types.ts # ToolPlugin, ToolResult, etc.
|
|
81
|
+
│ ├── views/
|
|
82
|
+
│ │ └── FormView.vue # Form-specific view component
|
|
83
|
+
│ └── previews/
|
|
84
|
+
│ └── FormPreview.vue # Form-specific preview
|
|
85
|
+
├── demo/ # Generic plugin demo
|
|
86
|
+
│ ├── App.vue
|
|
87
|
+
│ └── main.ts
|
|
88
|
+
├── package.json
|
|
89
|
+
├── vite.config.ts
|
|
90
|
+
├── tsconfig.json
|
|
91
|
+
└── eslint.config.js
|
|
92
|
+
```
|
|
93
|
+
|
|
94
|
+
## License
|
|
95
|
+
|
|
96
|
+
MIT
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* MulmoChat Plugin Common
|
|
3
|
+
*
|
|
4
|
+
* Shared types and utilities for building MulmoChat plugins.
|
|
5
|
+
* Import from "@mulmochat-plugin/form/common" or copy to your plugin.
|
|
6
|
+
*/
|
|
7
|
+
export type { ToolContext, ToolResult, ToolPlugin, ToolDefinition, JsonSchemaProperty, StartApiResponse, FileUploadConfig, ToolPluginConfig, ToolSample, } from "./types";
|
|
@@ -0,0 +1,128 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* MulmoChat Plugin Common Types
|
|
3
|
+
*
|
|
4
|
+
* Core interfaces for building MulmoChat plugins.
|
|
5
|
+
* These types are plugin-agnostic and can be used by any plugin implementation.
|
|
6
|
+
*/
|
|
7
|
+
import type { Component } from "vue";
|
|
8
|
+
/**
|
|
9
|
+
* Context passed to plugin execute function
|
|
10
|
+
*/
|
|
11
|
+
export interface ToolContext {
|
|
12
|
+
currentResult?: ToolResult<unknown> | null;
|
|
13
|
+
userPreferences?: Record<string, unknown>;
|
|
14
|
+
getPluginConfig?: <T = unknown>(key: string) => T | undefined;
|
|
15
|
+
}
|
|
16
|
+
/**
|
|
17
|
+
* Result returned from plugin execution
|
|
18
|
+
*/
|
|
19
|
+
export interface ToolResult<T = unknown, J = unknown> {
|
|
20
|
+
toolName?: string;
|
|
21
|
+
uuid?: string;
|
|
22
|
+
message: string;
|
|
23
|
+
title?: string;
|
|
24
|
+
jsonData?: J;
|
|
25
|
+
instructions?: string;
|
|
26
|
+
instructionsRequired?: boolean;
|
|
27
|
+
updating?: boolean;
|
|
28
|
+
cancelled?: boolean;
|
|
29
|
+
data?: T;
|
|
30
|
+
viewState?: Record<string, unknown>;
|
|
31
|
+
}
|
|
32
|
+
/**
|
|
33
|
+
* JSON Schema property definition for tool parameters
|
|
34
|
+
*/
|
|
35
|
+
export interface JsonSchemaProperty {
|
|
36
|
+
type?: string;
|
|
37
|
+
description?: string;
|
|
38
|
+
enum?: string[];
|
|
39
|
+
items?: JsonSchemaProperty;
|
|
40
|
+
minimum?: number;
|
|
41
|
+
maximum?: number;
|
|
42
|
+
minItems?: number;
|
|
43
|
+
maxItems?: number;
|
|
44
|
+
properties?: Record<string, JsonSchemaProperty>;
|
|
45
|
+
required?: string[];
|
|
46
|
+
additionalProperties?: boolean;
|
|
47
|
+
oneOf?: JsonSchemaProperty[];
|
|
48
|
+
[key: string]: unknown;
|
|
49
|
+
}
|
|
50
|
+
/**
|
|
51
|
+
* API response from server start endpoint
|
|
52
|
+
*/
|
|
53
|
+
export interface StartApiResponse {
|
|
54
|
+
hasOpenAIApiKey?: boolean;
|
|
55
|
+
hasAnthropicApiKey?: boolean;
|
|
56
|
+
hasGoogleApiKey?: boolean;
|
|
57
|
+
[key: string]: unknown;
|
|
58
|
+
}
|
|
59
|
+
/**
|
|
60
|
+
* Tool definition for OpenAI-compatible function calling
|
|
61
|
+
*/
|
|
62
|
+
export interface ToolDefinition {
|
|
63
|
+
type: "function";
|
|
64
|
+
name: string;
|
|
65
|
+
description: string;
|
|
66
|
+
parameters?: {
|
|
67
|
+
type: "object";
|
|
68
|
+
properties: Record<string, JsonSchemaProperty>;
|
|
69
|
+
required: string[];
|
|
70
|
+
additionalProperties?: boolean;
|
|
71
|
+
};
|
|
72
|
+
}
|
|
73
|
+
/**
|
|
74
|
+
* File upload configuration
|
|
75
|
+
*/
|
|
76
|
+
export interface FileUploadConfig {
|
|
77
|
+
acceptedTypes: string[];
|
|
78
|
+
handleUpload: (fileData: string, fileName: string, ...args: unknown[]) => ToolResult<unknown, unknown>;
|
|
79
|
+
}
|
|
80
|
+
/**
|
|
81
|
+
* Plugin configuration
|
|
82
|
+
*/
|
|
83
|
+
export interface ToolPluginConfig {
|
|
84
|
+
key: string;
|
|
85
|
+
defaultValue: unknown;
|
|
86
|
+
component: Component;
|
|
87
|
+
}
|
|
88
|
+
/**
|
|
89
|
+
* Sample arguments for testing
|
|
90
|
+
*/
|
|
91
|
+
export interface ToolSample {
|
|
92
|
+
name: string;
|
|
93
|
+
args: Record<string, unknown>;
|
|
94
|
+
}
|
|
95
|
+
/**
|
|
96
|
+
* Main plugin interface
|
|
97
|
+
* @template T - Type of data stored in result.data
|
|
98
|
+
* @template J - Type of data stored in result.jsonData
|
|
99
|
+
* @template A - Type of arguments passed to execute
|
|
100
|
+
*/
|
|
101
|
+
export interface ToolPlugin<T = unknown, J = unknown, A extends object = object> {
|
|
102
|
+
/** Tool definition for LLM function calling */
|
|
103
|
+
toolDefinition: ToolDefinition;
|
|
104
|
+
/** Execute the plugin with given context and arguments */
|
|
105
|
+
execute: (context: ToolContext, args: A) => Promise<ToolResult<T, J>>;
|
|
106
|
+
/** Message shown while generating */
|
|
107
|
+
generatingMessage: string;
|
|
108
|
+
/** Message shown while waiting for user action */
|
|
109
|
+
waitingMessage?: string;
|
|
110
|
+
/** Message shown during file upload */
|
|
111
|
+
uploadMessage?: string;
|
|
112
|
+
/** Check if plugin is enabled based on server capabilities */
|
|
113
|
+
isEnabled: (startResponse?: StartApiResponse | null) => boolean;
|
|
114
|
+
/** Delay in ms after execution before proceeding */
|
|
115
|
+
delayAfterExecution?: number;
|
|
116
|
+
/** Vue component for full view */
|
|
117
|
+
viewComponent?: Component;
|
|
118
|
+
/** Vue component for preview/thumbnail */
|
|
119
|
+
previewComponent?: Component;
|
|
120
|
+
/** System prompt additions for this plugin */
|
|
121
|
+
systemPrompt?: string;
|
|
122
|
+
/** Optional file upload configuration */
|
|
123
|
+
fileUpload?: FileUploadConfig;
|
|
124
|
+
/** Optional plugin-specific configuration */
|
|
125
|
+
config?: ToolPluginConfig;
|
|
126
|
+
/** Optional sample arguments for testing */
|
|
127
|
+
samples?: ToolSample[];
|
|
128
|
+
}
|
package/dist/form.css
ADDED
|
@@ -0,0 +1 @@
|
|
|
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-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-gradient-position:initial;--tw-gradient-from:#0000;--tw-gradient-via:#0000;--tw-gradient-to:#0000;--tw-gradient-stops:initial;--tw-gradient-via-stops:initial;--tw-gradient-from-position:0%;--tw-gradient-via-position:50%;--tw-gradient-to-position:100%;--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;--tw-duration:initial}}}@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-red-50:oklch(97.1% .013 17.38);--color-red-500:oklch(63.7% .237 25.331);--color-red-600:oklch(57.7% .245 27.325);--color-red-700:oklch(50.5% .213 27.518);--color-red-800:oklch(44.4% .177 26.899);--color-amber-600:oklch(66.6% .179 58.318);--color-green-100:oklch(96.2% .044 156.743);--color-green-600:oklch(62.7% .194 149.214);--color-green-700:oklch(52.7% .154 150.069);--color-emerald-50:oklch(97.9% .021 166.113);--color-emerald-100:oklch(95% .052 163.051);--color-emerald-200:oklch(90.5% .093 164.15);--color-emerald-800:oklch(43.2% .095 166.913);--color-blue-50:oklch(97% .014 254.604);--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-indigo-50:oklch(96.2% .018 272.314);--color-indigo-100:oklch(93% .034 272.788);--color-indigo-200:oklch(87% .065 274.039);--color-indigo-300:oklch(78.5% .115 274.713);--color-indigo-500:oklch(58.5% .233 277.117);--color-indigo-600:oklch(51.1% .262 276.966);--color-indigo-700:oklch(45.7% .24 277.023);--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-300:oklch(87.2% .01 258.338);--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-3xl:48rem;--text-xs:.75rem;--text-xs--line-height:calc(1/.75);--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-lg:1.125rem;--text-lg--line-height:calc(1.75/1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75/1.25);--text-3xl:1.875rem;--text-3xl--line-height: 1.2 ;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--radius-md:.375rem;--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{.visible{visibility:visible}.static{position:static}.m-0{margin:calc(var(--spacing)*0)}.mx-auto{margin-inline:auto}.mt-2{margin-top:calc(var(--spacing)*2)}.mt-3{margin-top:calc(var(--spacing)*3)}.mt-4{margin-top:calc(var(--spacing)*4)}.mt-8{margin-top:calc(var(--spacing)*8)}.mr-3{margin-right:calc(var(--spacing)*3)}.mb-1{margin-bottom:calc(var(--spacing)*1)}.mb-2{margin-bottom:calc(var(--spacing)*2)}.mb-3{margin-bottom:calc(var(--spacing)*3)}.mb-4{margin-bottom:calc(var(--spacing)*4)}.mb-5{margin-bottom:calc(var(--spacing)*5)}.mb-6{margin-bottom:calc(var(--spacing)*6)}.mb-8{margin-bottom:calc(var(--spacing)*8)}.ml-1{margin-left:calc(var(--spacing)*1)}.line-clamp-2{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.block{display:block}.contents{display:contents}.flex{display:flex}.inline-flex{display:inline-flex}.h-2{height:calc(var(--spacing)*2)}.h-3{height:calc(var(--spacing)*3)}.h-4{height:calc(var(--spacing)*4)}.h-5{height:calc(var(--spacing)*5)}.h-12{height:calc(var(--spacing)*12)}.h-full{height:100%}.w-3{width:calc(var(--spacing)*3)}.w-4{width:calc(var(--spacing)*4)}.w-5{width:calc(var(--spacing)*5)}.w-12{width:calc(var(--spacing)*12)}.w-32{width:calc(var(--spacing)*32)}.w-full{width:100%}.max-w-3xl{max-width:var(--container-3xl)}.max-w-\[200px\]{max-width:200px}.flex-shrink-0{flex-shrink:0}.transform{transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}.cursor-default{cursor:default}.cursor-pointer{cursor:pointer}.resize-y{resize:vertical}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-center{justify-content:center}.gap-1{gap:calc(var(--spacing)*1)}.gap-2{gap:calc(var(--spacing)*2)}.gap-3{gap:calc(var(--spacing)*3)}:where(.space-y-1>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*1)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*1)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*2)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*2)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-6>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*6)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*6)*calc(1 - var(--tw-space-y-reverse)))}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.border{border-style:var(--tw-border-style);border-width:1px}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-none{--tw-border-style:none;border-style:none}.border-blue-500{border-color:var(--color-blue-500)}.border-emerald-200{border-color:var(--color-emerald-200)}.border-gray-200{border-color:var(--color-gray-200)}.border-gray-300{border-color:var(--color-gray-300)}.border-indigo-200{border-color:var(--color-indigo-200)}.border-red-500{border-color:var(--color-red-500)}.bg-blue-50{background-color:var(--color-blue-50)}.bg-blue-600{background-color:var(--color-blue-600)}.bg-emerald-50{background-color:var(--color-emerald-50)}.bg-emerald-100{background-color:var(--color-emerald-100)}.bg-gray-50{background-color:var(--color-gray-50)}.bg-gray-100{background-color:var(--color-gray-100)}.bg-gray-200{background-color:var(--color-gray-200)}.bg-green-100{background-color:var(--color-green-100)}.bg-green-600{background-color:var(--color-green-600)}.bg-indigo-100{background-color:var(--color-indigo-100)}.bg-indigo-600{background-color:var(--color-indigo-600)}.bg-red-50{background-color:var(--color-red-50)}.bg-white{background-color:var(--color-white)}.bg-gradient-to-br{--tw-gradient-position:to bottom right in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.from-blue-50{--tw-gradient-from:var(--color-blue-50);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.to-indigo-50{--tw-gradient-to:var(--color-indigo-50);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.p-3{padding:calc(var(--spacing)*3)}.p-4{padding:calc(var(--spacing)*4)}.p-5{padding:calc(var(--spacing)*5)}.p-8{padding:calc(var(--spacing)*8)}.px-3{padding-inline:calc(var(--spacing)*3)}.px-4{padding-inline:calc(var(--spacing)*4)}.px-6{padding-inline:calc(var(--spacing)*6)}.px-8{padding-inline:calc(var(--spacing)*8)}.py-1{padding-block:calc(var(--spacing)*1)}.py-2{padding-block:calc(var(--spacing)*2)}.py-2\.5{padding-block:calc(var(--spacing)*2.5)}.py-3{padding-block:calc(var(--spacing)*3)}.text-center{text-align:center}.font-mono{font-family:var(--font-mono)}.text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--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)}.whitespace-pre-wrap{white-space:pre-wrap}.text-amber-600{color:var(--color-amber-600)}.text-blue-600{color:var(--color-blue-600)}.text-emerald-800{color:var(--color-emerald-800)}.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-green-700{color:var(--color-green-700)}.text-indigo-700{color:var(--color-indigo-700)}.text-red-500{color:var(--color-red-500)}.text-red-600{color:var(--color-red-600)}.text-red-700{color:var(--color-red-700)}.text-red-800{color:var(--color-red-800)}.text-white{color:var(--color-white)}.shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px 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{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.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))}.duration-300{--tw-duration:.3s;transition-duration:.3s}@media(hover:hover){.hover\:border-indigo-300:hover{border-color:var(--color-indigo-300)}.hover\:bg-blue-700:hover{background-color:var(--color-blue-700)}.hover\:bg-gray-50:hover{background-color:var(--color-gray-50)}.hover\:bg-indigo-200:hover{background-color:var(--color-indigo-200)}.hover\:bg-indigo-700:hover{background-color:var(--color-indigo-700)}.hover\:underline:hover{text-decoration-line:underline}}.focus\:border-indigo-500:focus{border-color:var(--color-indigo-500)}.focus\:ring-2:focus{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus\:ring-\[3px\]:focus{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(3px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus\:ring-blue-500:focus{--tw-ring-color:var(--color-blue-500)}.focus\:ring-indigo-500\/10:focus{--tw-ring-color:#625fff1a}@supports (color:color-mix(in lab,red,red)){.focus\:ring-indigo-500\/10:focus{--tw-ring-color:color-mix(in oklab,var(--color-indigo-500)10%,transparent)}}.focus\:ring-red-500:focus{--tw-ring-color:var(--color-red-500)}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-gradient-position{syntax:"*";inherits:false}@property --tw-gradient-from{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-via{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-to{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-stops{syntax:"*";inherits:false}@property --tw-gradient-via-stops{syntax:"*";inherits:false}@property --tw-gradient-from-position{syntax:"<length-percentage>";inherits:false;initial-value:0%}@property --tw-gradient-via-position{syntax:"<length-percentage>";inherits:false;initial-value:50%}@property --tw-gradient-to-position{syntax:"<length-percentage>";inherits:false;initial-value:100%}@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}@property --tw-duration{syntax:"*";inherits:false}.form-field[data-v-2615e49a]{transition:all .2s ease}.form-field.has-error[data-v-2615e49a]{animation:shake-2615e49a .3s ease}@keyframes shake-2615e49a{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}
|
package/dist/index.cjs
ADDED
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("vue"),M={class:"w-full h-full overflow-y-auto p-8"},q={key:0,class:"max-w-3xl w-full mx-auto"},A={key:0,class:"text-gray-900 text-3xl font-bold mb-4 text-center"},R={key:1,class:"text-gray-600 text-center mb-8 text-lg"},T={key:2,class:"bg-red-50 border-2 border-red-500 rounded-lg p-4 mb-6",role:"alert"},U={class:"text-red-700 space-y-1"},z=["href","onClick"],O=["id"],j=["for"],I={key:0,class:"text-red-500 ml-1","aria-label":"required"},P={key:0,class:"text-gray-600 text-sm mb-2"},Y=["id","onUpdate:modelValue","placeholder","aria-invalid","aria-describedby","onBlur","onInput"],H=["id","onUpdate:modelValue","placeholder","rows","aria-invalid","aria-describedby","onBlur","onInput"],J=["id","onUpdate:modelValue","min","max","step","aria-invalid","aria-describedby","onBlur","onInput"],W=["id","onUpdate:modelValue","min","max","aria-invalid","aria-describedby","onBlur","onChange"],G=["id","onUpdate:modelValue","aria-invalid","aria-describedby","onBlur","onChange"],K=["aria-invalid","aria-describedby"],Q=["name","value","onUpdate:modelValue","onChange","onBlur"],X={class:"text-gray-800"},Z=["id","onUpdate:modelValue","aria-invalid","aria-describedby","onBlur","onChange"],ee=["value"],te=["aria-invalid","aria-describedby"],re=["value","onUpdate:modelValue","onChange","onBlur"],ae={class:"text-gray-800"},oe=["id"],ne={key:0},ie={class:"mt-8 flex justify-center"},se=["disabled"],le={class:"mt-4 text-center text-gray-600 text-sm"},de=t.defineComponent({__name:"FormView",props:{selectedResult:{},sendTextMessage:{type:Function}},emits:["updateResult"],setup(x,{emit:v}){const c=x,b=v,d=t.ref(null),s=t.ref({}),i=t.ref(new Set),p=t.ref(new Map),m=t.ref(!1),k=t.ref(!1),h=t.ref(!1);t.watch(()=>c.selectedResult,(a,n)=>{if(a?.toolName==="presentForm"&&a.jsonData&&(!n||!n.jsonData||n.uuid!==a.uuid||n.jsonData!==a.jsonData)){if(h.value=!0,d.value=a.jsonData,s.value={},d.value.fields.forEach(o=>{s.value[o.id]=r(o)}),a.viewState){const o=a.viewState;o.userResponses&&Object.assign(s.value,o.userResponses),o.touched&&(i.value=new Set(o.touched),o.touched.forEach(u=>{V(u)})),o.submitted!==void 0&&(m.value=o.submitted)}h.value=!1}},{immediate:!0}),t.watch([s,i,m],()=>{if(h.value||!c.selectedResult)return;const a={...c.selectedResult,viewState:{userResponses:{...s.value},touched:Array.from(i.value),submitted:m.value}};b("updateResult",a)},{deep:!0});function r(a){const n=a;if(n.defaultValue!==void 0)switch(a.type){case"radio":case"dropdown":{const e=a.choices.indexOf(n.defaultValue);return e!==-1?e:null}case"checkbox":return Array.isArray(n.defaultValue)?n.defaultValue.map(e=>a.choices.indexOf(e)).filter(e=>e!==-1):[];default:return n.defaultValue}switch(a.type){case"text":case"textarea":return"";case"number":return a.min!==void 0?a.min:0;case"date":case"time":return"";case"radio":case"dropdown":return null;case"checkbox":return[];default:return null}}function g(a){return a==null?!0:typeof a=="string"?a.trim()==="":Array.isArray(a)?a.length===0:!1}function S(a){return/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(a)}function _(a){try{return new URL(a),!0}catch{return!1}}function B(a){return/^[\d\s\-+()]+$/.test(a)&&a.replace(/\D/g,"").length>=10}function D(a,n){if(a.required&&g(n))return`${a.label} is required`;if(g(n))return null;switch(a.type){case"text":{const e=a;if(e.validation==="email"&&!S(n))return"Please enter a valid email address";if(e.validation==="url"&&!_(n))return"Please enter a valid URL";if(e.validation==="phone"&&!B(n))return"Please enter a valid phone number";if(typeof e.validation=="string"&&e.validation!=="email"&&e.validation!=="url"&&e.validation!=="phone")try{if(!new RegExp(e.validation).test(n))return`${a.label} format is invalid`}catch{console.warn(`Invalid regex pattern: ${e.validation}`)}break}case"textarea":{const e=a;if(e.minLength&&n.length<e.minLength)return`Must be at least ${e.minLength} characters (currently ${n.length})`;if(e.maxLength&&n.length>e.maxLength)return`Must be no more than ${e.maxLength} characters (currently ${n.length})`;break}case"number":{const e=a;if(e.min!==void 0&&n<e.min)return`Must be at least ${e.min}`;if(e.max!==void 0&&n>e.max)return`Must be no more than ${e.max}`;break}case"date":{const e=a;if(e.minDate&&n<e.minDate)return`Date must be on or after ${e.minDate}`;if(e.maxDate&&n>e.maxDate)return`Date must be on or before ${e.maxDate}`;break}case"checkbox":{const e=a,o=n?.length||0;if(e.minSelections&&o<e.minSelections)return`Please select at least ${e.minSelections} option${e.minSelections>1?"s":""}`;if(e.maxSelections&&o>e.maxSelections)return`Please select no more than ${e.maxSelections} option${e.maxSelections>1?"s":""}`;break}}return null}function V(a){const n=d.value?.fields.find(u=>u.id===a);if(!n)return!0;const e=s.value[a],o=D(n,e);return o?(p.value.set(a,{fieldId:a,message:o,type:"custom"}),!1):(p.value.delete(a),!0)}function y(a){i.value.add(a),V(a)}function f(a){i.value.has(a)&&V(a)}function l(a){return p.value.has(a)}function E(a){const n=document.getElementById(`input-${a}`);n&&(n.focus(),n.scrollIntoView({behavior:"smooth",block:"center"}))}function F(a){return(a.type==="text"||a.type==="textarea")&&a.maxLength!==void 0}function $(a){if(a.type!=="text"&&a.type!=="textarea")return!1;const n=a.maxLength;return n?(s.value[a.id]||"").length/n>.9:!1}const N=t.computed(()=>d.value?.fields.filter(a=>a.required).length||0),C=t.computed(()=>d.value?d.value.fields.filter(a=>a.required&&!g(s.value[a.id])).length:0);function L(){if(m.value)return;if(d.value?.fields.forEach(e=>{i.value.add(e.id),V(e.id)}),p.value.size>0){k.value=!0;const e=Array.from(p.value.keys())[0];E(e);return}const a={};d.value?.fields.forEach(e=>{const o=s.value[e.id];e.type==="radio"||e.type==="dropdown"?o!=null?a[e.id]=e.choices[o]:a[e.id]=null:e.type==="checkbox"?a[e.id]=(o||[]).map(u=>e.choices[u]):a[e.id]=o});const n=JSON.stringify({formSubmission:{formTitle:d.value?.title||"Form",responses:a}},null,2);m.value=!0,c.sendTextMessage(n)}return(a,n)=>(t.openBlock(),t.createElementBlock("div",M,[d.value?(t.openBlock(),t.createElementBlock("div",q,[d.value.title?(t.openBlock(),t.createElementBlock("h2",A,t.toDisplayString(d.value.title),1)):t.createCommentVNode("",!0),d.value.description?(t.openBlock(),t.createElementBlock("p",R,t.toDisplayString(d.value.description),1)):t.createCommentVNode("",!0),k.value&&p.value.size>0?(t.openBlock(),t.createElementBlock("div",T,[n[0]||(n[0]=t.createElementVNode("h3",{class:"text-red-800 font-semibold mb-2 flex items-center gap-2"},[t.createElementVNode("svg",{class:"w-5 h-5",fill:"currentColor",viewBox:"0 0 20 20","aria-hidden":"true"},[t.createElementVNode("path",{"fill-rule":"evenodd",d:"M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z","clip-rule":"evenodd"})]),t.createTextVNode(" Please fix the following errors: ")],-1)),t.createElementVNode("ul",U,[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(p.value,([e,o])=>(t.openBlock(),t.createElementBlock("li",{key:e},[t.createElementVNode("a",{href:`#${e}`,onClick:t.withModifiers(u=>E(e),["prevent"]),class:"hover:underline cursor-pointer"},t.toDisplayString(o.message),9,z)]))),128))])])):t.createCommentVNode("",!0),t.createElementVNode("form",{onSubmit:t.withModifiers(L,["prevent"]),class:"space-y-6"},[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(d.value.fields,e=>(t.openBlock(),t.createElementBlock("div",{key:e.id,id:e.id,class:t.normalizeClass(["form-field",{"has-error":l(e.id)&&i.value.has(e.id)}])},[t.createElementVNode("label",{for:`input-${e.id}`,class:t.normalizeClass(["block text-gray-800 font-semibold mb-2",{"text-red-600":l(e.id)&&i.value.has(e.id)}])},[t.createTextVNode(t.toDisplayString(e.label)+" ",1),e.required?(t.openBlock(),t.createElementBlock("span",I,"*")):t.createCommentVNode("",!0)],10,j),e.description?(t.openBlock(),t.createElementBlock("p",P,t.toDisplayString(e.description),1)):t.createCommentVNode("",!0),e.type==="text"?t.withDirectives((t.openBlock(),t.createElementBlock("input",{key:1,id:`input-${e.id}`,"onUpdate:modelValue":o=>s.value[e.id]=o,type:"text",placeholder:e.placeholder,"aria-invalid":l(e.id)&&i.value.has(e.id),"aria-describedby":l(e.id)&&i.value.has(e.id)?`${e.id}-error`:void 0,onBlur:o=>y(e.id),onInput:o=>f(e.id),class:t.normalizeClass(["w-full px-4 py-2 border-2 border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors",{"border-red-500 focus:ring-red-500":l(e.id)&&i.value.has(e.id),"border-gray-300":!l(e.id)||!i.value.has(e.id)}])},null,42,Y)),[[t.vModelText,s.value[e.id]]]):e.type==="textarea"?t.withDirectives((t.openBlock(),t.createElementBlock("textarea",{key:2,id:`input-${e.id}`,"onUpdate:modelValue":o=>s.value[e.id]=o,placeholder:e.placeholder,rows:e.rows||4,"aria-invalid":l(e.id)&&i.value.has(e.id),"aria-describedby":l(e.id)&&i.value.has(e.id)?`${e.id}-error`:void 0,onBlur:o=>y(e.id),onInput:o=>f(e.id),class:t.normalizeClass(["w-full px-4 py-2 border-2 border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors resize-y",{"border-red-500 focus:ring-red-500":l(e.id)&&i.value.has(e.id),"border-gray-300":!l(e.id)||!i.value.has(e.id)}])},null,42,H)),[[t.vModelText,s.value[e.id]]]):e.type==="number"?t.withDirectives((t.openBlock(),t.createElementBlock("input",{key:3,id:`input-${e.id}`,"onUpdate:modelValue":o=>s.value[e.id]=o,type:"number",min:e.min,max:e.max,step:e.step,"aria-invalid":l(e.id)&&i.value.has(e.id),"aria-describedby":l(e.id)&&i.value.has(e.id)?`${e.id}-error`:void 0,onBlur:o=>y(e.id),onInput:o=>f(e.id),class:t.normalizeClass(["w-full px-4 py-2 border-2 border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors",{"border-red-500 focus:ring-red-500":l(e.id)&&i.value.has(e.id),"border-gray-300":!l(e.id)||!i.value.has(e.id)}])},null,42,J)),[[t.vModelText,s.value[e.id],void 0,{number:!0}]]):e.type==="date"?t.withDirectives((t.openBlock(),t.createElementBlock("input",{key:4,id:`input-${e.id}`,"onUpdate:modelValue":o=>s.value[e.id]=o,type:"date",min:e.minDate,max:e.maxDate,"aria-invalid":l(e.id)&&i.value.has(e.id),"aria-describedby":l(e.id)&&i.value.has(e.id)?`${e.id}-error`:void 0,onBlur:o=>y(e.id),onChange:o=>f(e.id),class:t.normalizeClass(["w-full px-4 py-2 border-2 border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors",{"border-red-500 focus:ring-red-500":l(e.id)&&i.value.has(e.id),"border-gray-300":!l(e.id)||!i.value.has(e.id)}])},null,42,W)),[[t.vModelText,s.value[e.id]]]):e.type==="time"?t.withDirectives((t.openBlock(),t.createElementBlock("input",{key:5,id:`input-${e.id}`,"onUpdate:modelValue":o=>s.value[e.id]=o,type:"time","aria-invalid":l(e.id)&&i.value.has(e.id),"aria-describedby":l(e.id)&&i.value.has(e.id)?`${e.id}-error`:void 0,onBlur:o=>y(e.id),onChange:o=>f(e.id),class:t.normalizeClass(["w-full px-4 py-2 border-2 border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors",{"border-red-500 focus:ring-red-500":l(e.id)&&i.value.has(e.id),"border-gray-300":!l(e.id)||!i.value.has(e.id)}])},null,42,G)),[[t.vModelText,s.value[e.id]]]):e.type==="radio"?(t.openBlock(),t.createElementBlock("div",{key:6,class:"space-y-2",role:"radiogroup","aria-invalid":l(e.id)&&i.value.has(e.id),"aria-describedby":l(e.id)&&i.value.has(e.id)?`${e.id}-error`:void 0},[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(e.choices,(o,u)=>(t.openBlock(),t.createElementBlock("label",{key:u,class:t.normalizeClass(["flex items-center p-3 border-2 border-gray-300 rounded-lg cursor-pointer transition-all hover:bg-gray-50",{"border-blue-500 bg-blue-50":s.value[e.id]===u,"border-gray-300":s.value[e.id]!==u}])},[t.withDirectives(t.createElementVNode("input",{type:"radio",name:e.id,value:u,"onUpdate:modelValue":w=>s.value[e.id]=w,onChange:w=>f(e.id),onBlur:w=>y(e.id),class:"mr-3 h-4 w-4 flex-shrink-0"},null,40,Q),[[t.vModelRadio,s.value[e.id]]]),t.createElementVNode("span",X,t.toDisplayString(o),1)],2))),128))],8,K)):e.type==="dropdown"?t.withDirectives((t.openBlock(),t.createElementBlock("select",{key:7,id:`input-${e.id}`,"onUpdate:modelValue":o=>s.value[e.id]=o,"aria-invalid":l(e.id)&&i.value.has(e.id),"aria-describedby":l(e.id)&&i.value.has(e.id)?`${e.id}-error`:void 0,onBlur:o=>y(e.id),onChange:o=>f(e.id),class:t.normalizeClass(["w-full px-4 py-2 border-2 border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors bg-white",{"border-red-500 focus:ring-red-500":l(e.id)&&i.value.has(e.id),"border-gray-300":!l(e.id)||!i.value.has(e.id)}])},[n[1]||(n[1]=t.createElementVNode("option",{value:null,disabled:""},"Select an option...",-1)),(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(e.choices,(o,u)=>(t.openBlock(),t.createElementBlock("option",{key:u,value:u},t.toDisplayString(o),9,ee))),128))],42,Z)),[[t.vModelSelect,s.value[e.id]]]):e.type==="checkbox"?(t.openBlock(),t.createElementBlock("div",{key:8,class:"space-y-2",role:"group","aria-invalid":l(e.id)&&i.value.has(e.id),"aria-describedby":l(e.id)&&i.value.has(e.id)?`${e.id}-error`:void 0},[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(e.choices,(o,u)=>(t.openBlock(),t.createElementBlock("label",{key:u,class:t.normalizeClass(["flex items-center p-3 border-2 border-gray-300 rounded-lg cursor-pointer transition-all hover:bg-gray-50",{"border-blue-500 bg-blue-50":(s.value[e.id]||[]).includes(u),"border-gray-300":!(s.value[e.id]||[]).includes(u)}])},[t.withDirectives(t.createElementVNode("input",{type:"checkbox",value:u,"onUpdate:modelValue":w=>s.value[e.id]=w,onChange:w=>f(e.id),onBlur:w=>y(e.id),class:"mr-3 h-4 w-4 flex-shrink-0"},null,40,re),[[t.vModelCheckbox,s.value[e.id]]]),t.createElementVNode("span",ae,t.toDisplayString(o),1)],2))),128))],8,te)):t.createCommentVNode("",!0),l(e.id)&&i.value.has(e.id)?(t.openBlock(),t.createElementBlock("div",{key:9,id:`${e.id}-error`,class:"flex items-center gap-2 mt-2 text-red-600 text-sm",role:"alert"},[n[2]||(n[2]=t.createElementVNode("svg",{class:"w-4 h-4 flex-shrink-0",fill:"currentColor",viewBox:"0 0 20 20","aria-hidden":"true"},[t.createElementVNode("path",{"fill-rule":"evenodd",d:"M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z","clip-rule":"evenodd"})],-1)),t.createTextVNode(" "+t.toDisplayString(p.value.get(e.id)?.message),1)],8,oe)):t.createCommentVNode("",!0),F(e)?(t.openBlock(),t.createElementBlock("div",{key:10,class:t.normalizeClass(["text-sm mt-2",{"text-amber-600 font-semibold":$(e),"text-gray-500":!$(e)}])},[t.createTextVNode(t.toDisplayString((s.value[e.id]||"").length)+" ",1),e.maxLength?(t.openBlock(),t.createElementBlock("span",ne," / "+t.toDisplayString(e.maxLength),1)):t.createCommentVNode("",!0),n[3]||(n[3]=t.createTextVNode(" characters ",-1))],2)):t.createCommentVNode("",!0)],10,O))),128)),t.createElementVNode("div",ie,[t.createElementVNode("button",{type:"submit",disabled:m.value,class:t.normalizeClass([m.value?"bg-green-600 cursor-default":"bg-blue-600 hover:bg-blue-700","px-8 py-3 rounded-lg text-white font-semibold text-lg transition-colors"])},t.toDisplayString(m.value?"Submitted":"Submit Form"),11,se)]),t.createElementVNode("div",le,t.toDisplayString(C.value)+" / "+t.toDisplayString(N.value)+" required fields completed ",1)],32)])):t.createCommentVNode("",!0)]))}}),ce=(x,v)=>{const c=x.__vccOpts||x;for(const[b,d]of v)c[b]=d;return c},ue=ce(de,[["__scopeId","data-v-2615e49a"]]),me={class:"w-full h-full flex flex-col items-center justify-center p-4 bg-gradient-to-br from-blue-50 to-indigo-50 rounded-lg border-2 border-gray-200"},pe={class:"text-center"},he={class:"text-gray-900 font-bold text-lg mb-1 line-clamp-2"},ve={class:"text-gray-600 text-sm mb-2"},ge={key:0,class:"flex items-center justify-center gap-2"},be={class:"w-32 h-2 bg-gray-200 rounded-full overflow-hidden"},ye={class:"text-xs text-gray-500"},fe={key:1,class:"inline-flex items-center gap-1 px-3 py-1 bg-green-100 text-green-700 rounded-full text-xs font-semibold"},xe=t.defineComponent({__name:"FormPreview",props:{result:{}},setup(x){const v=x,c=t.computed(()=>v.result?.toolName==="presentForm"?v.result.jsonData:null),b=t.computed(()=>v.result?.viewState||null),d=t.computed(()=>c.value?.fields.length||0),s=t.computed(()=>b.value?.submitted||!1),i=t.computed(()=>{if(!c.value||s.value)return 100;const p=c.value.fields.filter(h=>h.required);if(p.length===0)return 0;const m=b.value?.userResponses||{},k=p.filter(h=>{const r=m[h.id];return r==null?!1:typeof r=="string"?r.trim()!=="":Array.isArray(r)?r.length>0:!0}).length;return Math.round(k/p.length*100)});return(p,m)=>(t.openBlock(),t.createElementBlock("div",me,[t.createElementVNode("div",pe,[m[1]||(m[1]=t.createElementVNode("svg",{class:"w-12 h-12 mx-auto mb-3 text-blue-600",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24"},[t.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"})],-1)),t.createElementVNode("h3",he,t.toDisplayString(c.value?.title||"Form"),1),t.createElementVNode("p",ve,t.toDisplayString(d.value)+" field"+t.toDisplayString(d.value!==1?"s":""),1),s.value?(t.openBlock(),t.createElementBlock("div",fe,[...m[0]||(m[0]=[t.createElementVNode("svg",{class:"w-3 h-3",fill:"currentColor",viewBox:"0 0 20 20"},[t.createElementVNode("path",{"fill-rule":"evenodd",d:"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z","clip-rule":"evenodd"})],-1),t.createTextVNode(" Submitted ",-1)])])):(t.openBlock(),t.createElementBlock("div",ge,[t.createElementVNode("div",be,[t.createElementVNode("div",{class:"h-full bg-blue-600 transition-all duration-300",style:t.normalizeStyle({width:`${i.value}%`})},null,4)]),t.createElementVNode("span",ye,t.toDisplayString(i.value)+"%",1)]))])]))}}),we="presentForm",ke=[{name:"Contact Form",args:{title:"Contact Us",description:"Please fill out the form below to get in touch.",fields:[{id:"name",type:"text",label:"Full Name",required:!0,placeholder:"John Doe"},{id:"email",type:"text",label:"Email Address",required:!0,placeholder:"john@example.com",validation:"email"},{id:"subject",type:"dropdown",label:"Subject",choices:["General Inquiry","Technical Support","Sales","Feedback"],required:!0},{id:"message",type:"textarea",label:"Message",required:!0,minLength:10,maxLength:500,rows:5}]}},{name:"Survey Form",args:{title:"Customer Satisfaction Survey",fields:[{id:"satisfaction",type:"radio",label:"How satisfied are you with our service?",choices:["Very Satisfied","Satisfied","Neutral","Dissatisfied","Very Dissatisfied"],required:!0},{id:"features",type:"checkbox",label:"Which features do you use most?",choices:["Dashboard","Reports","Analytics","API","Integrations"],minSelections:1,maxSelections:3},{id:"recommendation",type:"number",label:"How likely are you to recommend us? (0-10)",min:0,max:10,step:1}]}},{name:"Event Registration",args:{title:"Event Registration",description:"Register for our upcoming conference.",fields:[{id:"attendeeName",type:"text",label:"Attendee Name",required:!0},{id:"eventDate",type:"date",label:"Preferred Date",required:!0,minDate:"2025-01-01",maxDate:"2025-12-31"},{id:"sessionTime",type:"time",label:"Session Time",format:"12hr"},{id:"dietaryRestrictions",type:"checkbox",label:"Dietary Restrictions",choices:["Vegetarian","Vegan","Gluten-Free","Halal","Kosher"]}]}}],Ve={type:"function",name:we,description:"Create a structured form to collect information from the user. Supports various field types including text input, textarea, multiple choice (radio), dropdown menus, checkboxes, date/time pickers, and number inputs. Each field can have validation rules and help text.",parameters:{type:"object",properties:{title:{type:"string",description:"Optional title for the form (e.g., 'User Registration')"},description:{type:"string",description:"Optional description explaining the purpose of the form"},fields:{type:"array",description:"Array of form fields with various types and configurations",items:{type:"object",properties:{id:{type:"string",description:"Unique identifier for the field (e.g., 'email', 'birthdate'). This will be the key in the JSON response. Use descriptive camelCase or snake_case names."},type:{type:"string",enum:["text","textarea","radio","dropdown","checkbox","date","time","number"],description:"Field type: 'text' for short text, 'textarea' for long text, 'radio' for 2-6 choices, 'dropdown' for many choices, 'checkbox' for multiple selections, 'date' for date picker, 'time' for time picker, 'number' for numeric input"},label:{type:"string",description:"Field label shown to the user"},description:{type:"string",description:"Optional help text explaining the field"},required:{type:"boolean",description:"Whether the field is required (default: false)"},placeholder:{type:"string",description:"Placeholder text for text/textarea fields"},validation:{type:"string",description:"For text fields: 'email', 'url', 'phone', or a regex pattern"},minLength:{type:"number",description:"Minimum character length for textarea fields"},maxLength:{type:"number",description:"Maximum character length for textarea fields"},rows:{type:"number",description:"Number of visible rows for textarea (default: 4)"},choices:{type:"array",items:{type:"string"},description:"Array of choices for radio/dropdown/checkbox fields. Radio should have 2-6 choices, dropdown for 7+ choices."},searchable:{type:"boolean",description:"Make dropdown searchable (for large lists)"},minSelections:{type:"number",description:"Minimum number of selections for checkbox fields"},maxSelections:{type:"number",description:"Maximum number of selections for checkbox fields"},minDate:{type:"string",description:"Minimum date (ISO format: YYYY-MM-DD)"},maxDate:{type:"string",description:"Maximum date (ISO format: YYYY-MM-DD)"},format:{type:"string",description:"Format for time fields: '12hr' or '24hr'"},min:{type:"number",description:"Minimum value for number fields"},max:{type:"number",description:"Maximum value for number fields"},step:{type:"number",description:"Step increment for number fields"},defaultValue:{description:"Optional default/pre-filled value for the field. Type varies by field: string for text/textarea/radio/dropdown/date/time, number for number fields, array of strings for checkbox fields. For radio/dropdown, must be one of the choices. For checkbox, must be a subset of choices."}},required:["id","type","label"]},minItems:1}},required:["fields"]}},Ee=async(x,v)=>{try{const{title:c,description:b,fields:d}=v;if(!d||!Array.isArray(d)||d.length===0)throw new Error("At least one field is required");const s=new Set;for(let h=0;h<d.length;h++){const r=d[h];if(!r.id||typeof r.id!="string")throw new Error(`Field ${h+1} must have a valid 'id' property`);if(!r.type||typeof r.type!="string")throw new Error(`Field ${h+1} must have a valid 'type' property`);if(!r.label||typeof r.label!="string")throw new Error(`Field ${h+1} must have a valid 'label' property`);if(s.has(r.id))throw new Error(`Duplicate field ID: '${r.id}'`);switch(s.add(r.id),r.type){case"text":case"textarea":if(r.minLength!==void 0&&r.maxLength!==void 0&&r.minLength>r.maxLength)throw new Error(`Field '${r.id}': minLength cannot be greater than maxLength`);break;case"radio":if(!Array.isArray(r.choices)||r.choices.length<2)throw new Error(`Field '${r.id}': radio fields must have at least 2 choices`);r.choices.length>6&&console.warn(`Field '${r.id}': radio fields with more than 6 choices should use 'dropdown' type instead`);break;case"dropdown":case"checkbox":if(!Array.isArray(r.choices)||r.choices.length<1)throw new Error(`Field '${r.id}': ${r.type} fields must have at least 1 choice`);break;case"number":if(r.min!==void 0&&r.max!==void 0&&r.min>r.max)throw new Error(`Field '${r.id}': min cannot be greater than max`);break;case"date":if(r.minDate&&r.maxDate&&r.minDate>r.maxDate)throw new Error(`Field '${r.id}': minDate cannot be after maxDate`);break;case"time":break;default:{const g=r;throw new Error(`Field '${g.id}': unknown field type '${g.type}'`)}}if(r.type==="checkbox"){if(r.minSelections!==void 0&&r.maxSelections!==void 0&&r.minSelections>r.maxSelections)throw new Error(`Field '${r.id}': minSelections cannot be greater than maxSelections`);if(r.maxSelections!==void 0&&r.maxSelections>r.choices.length)throw new Error(`Field '${r.id}': maxSelections cannot exceed number of choices`)}if(r.defaultValue!==void 0)switch(r.type){case"text":case"textarea":if(typeof r.defaultValue!="string")throw new Error(`Field '${r.id}': defaultValue must be a string`);if(r.minLength!==void 0&&r.defaultValue.length<r.minLength)throw new Error(`Field '${r.id}': defaultValue length is less than minLength`);if(r.maxLength!==void 0&&r.defaultValue.length>r.maxLength)throw new Error(`Field '${r.id}': defaultValue length exceeds maxLength`);break;case"radio":case"dropdown":if(typeof r.defaultValue!="string")throw new Error(`Field '${r.id}': defaultValue must be a string`);if(!r.choices.includes(r.defaultValue))throw new Error(`Field '${r.id}': defaultValue '${r.defaultValue}' is not in choices`);break;case"checkbox":if(!Array.isArray(r.defaultValue))throw new Error(`Field '${r.id}': defaultValue must be an array`);for(const g of r.defaultValue)if(!r.choices.includes(g))throw new Error(`Field '${r.id}': defaultValue contains '${g}' which is not in choices`);if(r.minSelections!==void 0&&r.defaultValue.length<r.minSelections)throw new Error(`Field '${r.id}': defaultValue has fewer selections than minSelections`);if(r.maxSelections!==void 0&&r.defaultValue.length>r.maxSelections)throw new Error(`Field '${r.id}': defaultValue has more selections than maxSelections`);break;case"number":if(typeof r.defaultValue!="number")throw new Error(`Field '${r.id}': defaultValue must be a number`);if(r.min!==void 0&&r.defaultValue<r.min)throw new Error(`Field '${r.id}': defaultValue is less than min`);if(r.max!==void 0&&r.defaultValue>r.max)throw new Error(`Field '${r.id}': defaultValue is greater than max`);break;case"date":if(typeof r.defaultValue!="string")throw new Error(`Field '${r.id}': defaultValue must be a string (ISO date format)`);if(r.minDate!==void 0&&r.defaultValue<r.minDate)throw new Error(`Field '${r.id}': defaultValue is before minDate`);if(r.maxDate!==void 0&&r.defaultValue>r.maxDate)throw new Error(`Field '${r.id}': defaultValue is after maxDate`);break;case"time":if(typeof r.defaultValue!="string")throw new Error(`Field '${r.id}': defaultValue must be a string`);break}}const i={title:c,description:b,fields:d},p=`${d.length} field${d.length>1?"s":""}`,m=c?`: ${c}`:"";return{message:`Form created with ${p}${m}`,jsonData:i,instructions:"The form has been presented to the user. Wait for the user to fill out and submit the form. They will send their responses as a JSON message."}}catch(c){return console.error(`ERR: exception
|
|
2
|
+
Form creation error`,c),{message:`Form error: ${c instanceof Error?c.message:"Unknown error"}`,instructions:"Acknowledge that there was an error creating the form and suggest trying again with corrected field definitions."}}},$e={toolDefinition:Ve,execute:Ee,generatingMessage:"Preparing form...",isEnabled:()=>!0,viewComponent:ue,previewComponent:xe,samples:ke},Se={plugin:$e};exports.default=Se;
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* MulmoChat Form Plugin
|
|
3
|
+
*
|
|
4
|
+
* @example
|
|
5
|
+
* ```typescript
|
|
6
|
+
* import FormPlugin from "@mulmochat-plugin/form";
|
|
7
|
+
* import "@mulmochat-plugin/form/style.css";
|
|
8
|
+
* ```
|
|
9
|
+
*/
|
|
10
|
+
import "./style.css";
|
|
11
|
+
import type { ToolPlugin } from "./common";
|
|
12
|
+
declare const _default: {
|
|
13
|
+
plugin: ToolPlugin;
|
|
14
|
+
};
|
|
15
|
+
export default _default;
|