@onetype/framework 2.0.40 → 2.0.42

package/lib/items/elements/ai/chat/chat.js

@@ -0,0 +1,429 @@
+onetype.AddonReady('elements', (elements) =>
+{
+	elements.ItemAdd({
+		id: 'ai-chat',
+		icon: 'smart_toy',
+		name: 'AI Chat',
+		description: 'Chat interface powered by the orchestrator.',
+		category: 'AI',
+		author: 'OneType',
+		config: {
+			task: {
+				type: 'string',
+				value: ''
+			},
+			orchestrator: {
+				type: 'string',
+				value: 'chat'
+			},
+			placeholder: {
+				type: 'string',
+				value: 'Message Orah...'
+			},
+			variant: {
+				type: 'array',
+				value: ['bg-2'],
+				options: ['bg-1', 'bg-2', 'bg-3', 'bg-4', 'compact', 'floated']
+			},
+			_message: {
+				type: 'function'
+			},
+			_done: {
+				type: 'function'
+			},
+			_error: {
+				type: 'function'
+			},
+			debug: {
+				type: 'boolean',
+				value: false
+			}
+		},
+		render: function()
+		{
+			this.messages = [];
+			this.input = '';
+			this.running = false;
+			this.steps = [];
+			this.error = null;
+			this.open = !this.task;
+
+			this.toggle = () =>
+			{
+				this.open = !this.open;
+				this.Update();
+
+				if (this.open)
+				{
+					this.scroll();
+				}
+			};
+
+			this.send = async () =>
+			{
+				const text = this.task || this.input.trim();
+				this.input = '';
+
+				if (!text || this.running)
+				{
+					return;
+				}
+
+				this.input = '';
+				this.error = null;
+				this.running = true;
+				this.steps = [];
+
+				this.messages.push({ role: 'user', content: text });
+				this.Update();
+				this.scroll();
+
+				const field = this.$el?.querySelector('.compose .field');
+
+				if (field)
+				{
+					field.value = '';
+				}
+
+				const orchestrator = onetype.Addon('orchestrator');
+				const item = orchestrator.ItemGet(this.orchestrator);
+
+				if(!item)
+				{
+					this.error = 'Orchestrator "' + this.orchestrator + '" not found';
+					this.running = false;
+					this.messages.push({ role: 'error', content: this.error });
+					this.Update();
+					this.scroll();
+					return;
+				}
+
+				item.Set('task', text);
+
+				item.Set('onDone', () =>
+				{
+					this.Update();
+				});
+
+				item.Set('onAgent', ({ state }) =>
+				{
+					this.steps.push({ agent: state.agent, goal: null, conclusion: null, status: 'running' });
+					this.Update();
+					this.scroll();
+				});
+
+				item.Set('onGoal', ({ state }) =>
+				{
+					const current = this.steps[this.steps.length - 1];
+
+					if(current)
+					{
+						current.goal = state.goal;
+						this.Update();
+					}
+				});
+
+				item.Set('onConclusion', ({ state }) =>
+				{
+					const current = this.steps[this.steps.length - 1];
+
+					if(current)
+					{
+						current.conclusion = state.conclusion;
+						this.Update();
+					}
+				});
+
+				item.Set('onStep', () =>
+				{
+					const current = this.steps[this.steps.length - 1];
+
+					if(current)
+					{
+						current.status = 'done';
+						this.Update();
+						this.scroll();
+					}
+				});
+
+				item.Set('onStop', () =>
+				{
+					this.running = false;
+					this.steps = [];
+					this.messages.push({ role: 'assistant', content: 'Stopped.', steps: [] });
+					this.Update();
+					this.scroll();
+				});
+
+				item.Set('onSuccess', ({ state }) =>
+				{
+					const last = state.history[state.history.length - 1];
+					const content = state.summary || this.format(last?.output, last?.conclusion) || 'Done.';
+
+					this.messages.push({ role: 'assistant', content, steps: [...this.steps], tokens: { ...state.tokens } });
+					this.running = false;
+					this.steps = [];
+					this.Update();
+					this.scroll();
+
+					if(this._message)
+					{
+						this._message({ role: 'assistant', content, state });
+					}
+
+					if(this._done)
+					{
+						this._done(state);
+					}
+				});
+
+				item.Set('onFail', ({ error }) =>
+				{
+					this.error = error.message || 'Something went wrong';
+					this.running = false;
+					this.steps = [];
+					this.messages.push({ role: 'error', content: this.error });
+					this.Update();
+					this.scroll();
+
+					if(this._error)
+					{
+						this._error(error);
+					}
+				});
+
+				await item.Fn('run');
+			};
+
+			this.format = (output, conclusion) =>
+			{
+				if (!output)
+				{
+					return conclusion || 'Done.';
+				}
+
+				if (typeof output === 'string')
+				{
+					return output;
+				}
+
+				if (output.message)
+				{
+					return output.message;
+				}
+
+				if (output.response)
+				{
+					return output.response;
+				}
+
+				if (output.summary)
+				{
+					return output.summary;
+				}
+
+				if (conclusion)
+				{
+					return conclusion;
+				}
+
+				const keys = Object.keys(output).filter(k => k !== '_meta');
+
+				if (keys.length === 1)
+				{
+					const val = output[keys[0]];
+
+					return typeof val === 'string' ? val : JSON.stringify(val, null, 2);
+				}
+
+				return JSON.stringify(output, null, 2);
+			};
+
+			this.key = (e) =>
+			{
+				if (e.key === 'Enter' && !e.shiftKey)
+				{
+					e.preventDefault();
+					this.send();
+
+					e.target.value = '';
+				}
+			};
+
+			this.type = (e, ctx) =>
+			{
+				this.input = ctx.value;
+			};
+
+			this.scroll = () =>
+			{
+				setTimeout(() =>
+				{
+					const el = this.$el?.querySelector('.messages');
+
+					if (el)
+					{
+						el.scrollTop = el.scrollHeight;
+					}
+				}, 50);
+			};
+
+			this.expanded = (message) =>
+			{
+				return message._expanded || false;
+			};
+
+			this.toggleSteps = (message) =>
+			{
+				message._expanded = !message._expanded;
+				this.Update();
+			};
+
+			this.isFloated = () =>
+			{
+				return this.variant.includes('floated');
+			};
+
+			if (this.task)
+			{
+				setTimeout(() => this.send(), 0);
+			}
+
+			const fab = `
+				<button class="fab" ot-click="toggle">
+					<img class="logo" src="https://cdn.onetype.ai/brand/logo/icon-orange.svg" alt="Orah" />
+				</button>
+			`;
+
+			const header = `
+				<div class="header">
+					<div class="brand">
+						<img class="logo" src="https://cdn.onetype.ai/brand/logo/icon-orange.svg" alt="Orah" />
+						<div class="info">
+							<span class="name">Orah</span>
+							<span class="status">{{ running ? 'Thinking...' : 'Online' }}</span>
+						</div>
+					</div>
+					<button ot-if="isFloated()" class="close" ot-click="toggle">
+						<i class="icon">close</i>
+					</button>
+				</div>
+			`;
+
+			const welcome = `
+				<div ot-if="!messages.length && !running" class="welcome">
+					<img class="logo" src="https://cdn.onetype.ai/brand/logo/icon-orange.svg" alt="Orah" />
+					<span class="title">Hey, I'm Orah</span>
+					<span class="subtitle">How can I help you today?</span>
+				</div>
+			`;
+
+			const messageList = `
+				<div ot-for="message, index in messages" :class="'message ' + message.role">
+					<div ot-if="message.role === 'user'" class="bubble user">
+						<span class="content">{{ message.content }}</span>
+					</div>
+					<div ot-if="message.role === 'assistant'" class="bubble assistant">
+						<div class="avatar">
+							<img src="https://cdn.onetype.ai/brand/logo/icon-orange.svg" alt="Orah" />
+						</div>
+						<div class="body">
+							<span class="content">{{ message.content }}</span>
+							<div ot-if="message.steps && message.steps.length" class="meta">
+								<span class="toggle" ot-click="toggleSteps(message)">
+									<i class="icon">{{ expanded(message) ? 'expand_less' : 'expand_more' }}</i>
+									<span class="label">{{ message.steps.length }} step{{ message.steps.length > 1 ? 's' : '' }}</span>
+									<span ot-if="message.tokens" class="tokens">{{ message.tokens.input + message.tokens.output }} tok</span>
+								</span>
+								<div ot-if="expanded(message)" class="timeline">
+									<div ot-for="step in message.steps" class="step">
+										<i class="dot">check_circle</i>
+										<div class="detail">
+											<span class="agent">{{ step.agent }}</span>
+											<span ot-if="step.conclusion" class="conclusion">{{ step.conclusion }}</span>
+										</div>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+					<div ot-if="message.role === 'error'" class="bubble error">
+						<i class="icon">error</i>
+						<span class="content">{{ message.content }}</span>
+					</div>
+				</div>
+			`;
+
+			const loading = `
+				<div ot-if="running" class="message assistant">
+					<div class="bubble assistant loading">
+						<div class="avatar">
+							<img src="https://cdn.onetype.ai/brand/logo/icon-orange.svg" alt="Orah" />
+						</div>
+						<div class="body">
+							<div ot-if="steps.length" class="progress">
+								<div ot-for="step in steps" :class="'step ' + step.status">
+									<i class="dot">{{ step.status === 'done' ? 'check_circle' : 'pending' }}</i>
+									<div class="detail">
+										<span class="agent">{{ step.agent }}</span>
+										<span ot-if="step.goal" class="goal">{{ step.goal }}</span>
+									</div>
+								</div>
+							</div>
+							<div ot-if="!steps.length" class="thinking">
+								<span class="dots"><span></span><span></span><span></span></span>
+							</div>
+						</div>
+					</div>
+				</div>
+			`;
+
+			const compose = `
+				<div ot-if="!task" class="compose">
+					<input
+						class="field"
+						type="text"
+						:placeholder="placeholder"
+						:value="input"
+						:disabled="running"
+						ot-input="type"
+						ot-keydown="key"
+					/>
+					<button class="submit" :disabled="running || !input.trim()" ot-click="send">
+						<i class="icon">arrow_upward</i>
+					</button>
+				</div>
+			`;
+
+			if (this.isFloated())
+			{
+				return `
+					<div :class="'holder ' + variant.join(' ') + (open ? ' open' : '')">
+						<div ot-if="open" class="panel">
+							${header}
+							<div class="messages">
+								${welcome}
+								${messageList}
+								${loading}
+							</div>
+							${compose}
+						</div>
+						${fab}
+					</div>
+				`;
+			}
+
+			return `
+				<div :class="'holder ' + variant.join(' ')">
+					${header}
+					<div class="messages">
+						${welcome}
+						${messageList}
+						${loading}
+					</div>
+					${compose}
+				</div>
+			`;
+		}
+	});
+});

package/lib/items/elements/cards/pricing/pricing.css

@@ -0,0 +1,174 @@
+/* Root */
+
+.e-7e10f2fa
+{
+	display: flex;
+	width: 100%;
+}
+
+/* Holder */
+
+.e-7e10f2fa > .holder
+{
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+	padding: var(--ot-spacing-l) var(--ot-spacing-m);
+	gap: var(--ot-spacing-l);
+	border: 1px solid transparent;
+}
+
+/* Highlighted */
+
+.e-7e10f2fa > .holder.highlighted
+{
+	border-top: 2px solid var(--ot-brand);
+}
+
+/* Header */
+
+.e-7e10f2fa > .holder > .header
+{
+	display: flex;
+	flex-direction: column;
+	gap: var(--ot-spacing-s);
+}
+
+.e-7e10f2fa > .holder > .header > .badge
+{
+	display: inline-flex;
+	align-self: flex-start;
+	padding: var(--ot-spacing-x) var(--ot-spacing-s);
+	border-radius: 100px;
+	background: var(--ot-brand-opacity);
+	font-size: var(--ot-size-s);
+	font-weight: 600;
+	color: var(--ot-brand);
+	text-transform: uppercase;
+	letter-spacing: 0.5px;
+}
+
+.e-7e10f2fa > .holder > .header > .name
+{
+	font-size: var(--ot-size-l);
+	font-weight: 700;
+	color: var(--ot-text-1);
+	margin: 0;
+}
+
+.e-7e10f2fa > .holder > .header > .description
+{
+	font-size: var(--ot-size-s);
+	color: var(--ot-text-2);
+	line-height: 1.5;
+	margin: 0;
+}
+
+.e-7e10f2fa > .holder > .header > .price
+{
+	display: flex;
+	align-items: baseline;
+	gap: var(--ot-spacing-x);
+	margin-top: var(--ot-spacing-x);
+}
+
+.e-7e10f2fa > .holder > .header > .price > .currency
+{
+	font-size: var(--ot-size-l);
+	font-weight: 700;
+	color: var(--ot-text-1);
+}
+
+.e-7e10f2fa > .holder > .header > .price > .amount
+{
+	font-size: 40px;
+	font-weight: 800;
+	color: var(--ot-text-1);
+	line-height: 1;
+}
+
+.e-7e10f2fa > .holder > .header > .price > .period
+{
+	font-size: var(--ot-size-m);
+	color: var(--ot-text-2);
+}
+
+.e-7e10f2fa > .holder > .header > .yearly
+{
+	font-size: var(--ot-size-s);
+	color: var(--ot-text-2);
+}
+
+/* Features */
+
+.e-7e10f2fa > .holder > .features
+{
+	display: flex;
+	flex-direction: column;
+	gap: var(--ot-spacing-s);
+	flex: 1;
+	padding-top: var(--ot-spacing-l);
+	border-top: 1px solid var(--ot-bg-2-border);
+}
+
+.e-7e10f2fa > .holder > .features > .feature
+{
+	display: flex;
+	align-items: center;
+	gap: var(--ot-spacing-s);
+}
+
+.e-7e10f2fa > .holder > .features > .feature > .icon
+{
+	font-size: var(--ot-size-l);
+	flex-shrink: 0;
+	color: var(--ot-green);
+}
+
+.e-7e10f2fa > .holder > .features > .feature > .text
+{
+	font-size: var(--ot-size-m);
+	color: var(--ot-text-2);
+}
+
+/* Disabled feature */
+
+.e-7e10f2fa > .holder > .features > .feature.disabled > .icon
+{
+	color: var(--ot-text-2);
+	opacity: 0.4;
+}
+
+.e-7e10f2fa > .holder > .features > .feature.disabled > .text
+{
+	color: var(--ot-text-2);
+	opacity: 0.4;
+}
+
+/* Action */
+
+.e-7e10f2fa > .holder > .action
+{
+	display: flex;
+	margin-top: auto;
+}
+
+/* Background variants */
+
+.e-7e10f2fa > .holder.bg-1 { background: var(--ot-bg-1); }
+.e-7e10f2fa > .holder.bg-1 > .features { border-top-color: var(--ot-bg-1-border); }
+.e-7e10f2fa > .holder.bg-2 { background: var(--ot-bg-2); }
+.e-7e10f2fa > .holder.bg-2 > .features { border-top-color: var(--ot-bg-2-border); }
+.e-7e10f2fa > .holder.bg-3 { background: var(--ot-bg-3); }
+.e-7e10f2fa > .holder.bg-3 > .features { border-top-color: var(--ot-bg-3-border); }
+.e-7e10f2fa > .holder.bg-4 { background: var(--ot-bg-4); }
+.e-7e10f2fa > .holder.bg-4 > .features { border-top-color: var(--ot-bg-4-border); }
+
+/* Border variant */
+
+.e-7e10f2fa > .holder.border { border: 1px solid var(--ot-bg-2-border); }
+.e-7e10f2fa > .holder.bg-1.border { border-color: var(--ot-bg-1-border); }
+.e-7e10f2fa > .holder.bg-2.border { border-color: var(--ot-bg-2-border); }
+.e-7e10f2fa > .holder.bg-3.border { border-color: var(--ot-bg-3-border); }
+.e-7e10f2fa > .holder.bg-4.border { border-color: var(--ot-bg-4-border); }
+.e-7e10f2fa > .holder.highlighted.border { border-top: 2px solid var(--ot-brand); }

package/lib/items/elements/{sections → cards}/pricing/pricing.js

@@ -1,16 +1,16 @@
 onetype.AddonReady('elements', (elements) =>
 {
 	elements.ItemAdd({
-		id: 'sections-pricing',
+		id: 'cards-pricing',
 		icon: 'payments',
 		name: 'Pricing Card',
 		description: 'Pricing plan card with name, price, features list, and CTA button.',
-		category: 'Section',
+		category: 'Cards',
 		author: 'OneType',
 		config: {
 			name: {
 				type: 'string',
-				value: 'Plan'
+				value: ''
 			},
 			price: {
 				type: 'number',
@@ -34,21 +34,40 @@ onetype.AddonReady('elements', (elements) =>
 			},
 			features: {
 				type: 'array',
-				value: []
-			},
-			highlighted: {
-				type: 'boolean',
-				value: false
+				value: [],
+				each: {
+					type: 'object',
+					config: {
+						text: { type: 'string', value: '' },
+						included: { type: 'boolean', value: true }
+					}
+				}
 			},
 			href: {
 				type: 'string',
 				value: ''
+			},
+			variant: {
+				type: 'array',
+				value: ['bg-2'],
+				options: ['bg-1', 'bg-2', 'bg-3', 'bg-4', 'border', 'highlighted']
+			},
+			_click: {
+				type: 'function'
 			}
 		},
 		render: function()
 		{
+			this.handle = (e) =>
+			{
+				if (this._click)
+				{
+					this._click(e);
+				}
+			};
+
 			return `
-				<div :class="'holder' + (highlighted ? ' highlighted' : '')">
+				<div :class="'holder ' + variant.join(' ')">
 					<div class="header">
 						<span ot-if="badge" class="badge">{{ badge }}</span>
 						<h3 class="name">{{ name }}</h3>
@@ -56,7 +75,7 @@ onetype.AddonReady('elements', (elements) =>
 						<div class="price">
 							<span class="currency">$</span>
 							<span class="amount">{{ price }}</span>
-							<span class="period">{{ period }}</span>
+							<span ot-if="period" class="period">{{ period }}</span>
 						</div>
 						<span ot-if="yearly" class="yearly">{{ yearly }}</span>
 					</div>
@@ -67,7 +86,7 @@ onetype.AddonReady('elements', (elements) =>
 						</div>
 					</div>
 					<div ot-if="href" class="action">
-						<e-form-button text="Get Started" icon="arrow_forward" :href="href" :variant="highlighted ? ['brand', 'size-m', 'full'] : ['bg-2', 'border', 'size-m', 'full']"></e-form-button>
+						<e-form-button text="Get Started" icon="arrow_forward" :href="href" :variant="variant.includes('highlighted') ? ['brand', 'size-m', 'full'] : ['bg-2', 'border', 'size-m', 'full']" ot-click="handle"></e-form-button>
 					</div>
 				</div>
 			`;