@creaditor/cdtr-launchpad

Embeddable <cdtr-launchpad> web component. A hero / first-prompt entry surface: it renders a headline, a prompt composer (with optional attach / voice / plan controls) and a row of category chips, captures an initial prompt, and emits it. No transport coupling — the host decides what happens on submit.

Designed to pair with @creaditor/cdtr-chat: wire cdtr-launchpad:submit → chat.submit(text) to hand the first prompt off into a conversation.

Built with Lit. Hebrew + English out of the box, with full RTL layout.

Install

npm install @creaditor/cdtr-launchpad

Use

As an ES module

<cdtr-launchpad lang="en" agent-link="Go to your agent"></cdtr-launchpad>

<script type="module">
  import '@creaditor/cdtr-launchpad';

  const lp = document.querySelector('cdtr-launchpad');

  lp.addEventListener('cdtr-launchpad:submit', (e) => {
    const { text, plan, tags, files } = e.detail;
    console.log('user wants to build:', text);
    // …hand off to your chat / backend here
  });
</script>

Handing off to <cdtr-chat>

lp.addEventListener('cdtr-launchpad:submit', (e) => {
  chat.lang = lp.lang;
  chat.submit(e.detail.text);   // starts the conversation with the first prompt
});

Via CDN (UMD)

<script src="https://unpkg.com/@creaditor/cdtr-launchpad"></script>
<cdtr-launchpad></cdtr-launchpad>

Attributes

| Attribute | Type | Default | Description | | -------------- | ------- | --------- | ------------------------------------------------------------------------------- | | lang | string | "en" | "he" or "en". Auto-sets dir="rtl" for Hebrew. | | headline | string | localized | Hero headline. Empty falls back to the built-in localized string. | | placeholder | string | localized | Composer placeholder text. Empty falls back to the localized string. | | agent-link | string | "" | Optional "Go to your agent" pill above the headline. Empty hides it. | | categories | JSON | [] | Chip list, e.g. '[{"id":"crm","label":"CRM & Sales"}]'. | | tags | JSON | [] | Scope tags echoed back in every submit / category detail. | | attachments | boolean | true | Show the attach-file button. | | accept | string | "" | Native <input accept> filter for the file picker. | | voice | boolean | true | Show the speech-to-text button (browser SpeechRecognition API). | | plan | boolean | false | Plan toggle state. Reflected to the host element. |

categories and tags can also be set as properties to pass real arrays (e.g. lp.categories = [...]).

Events

All events bubble and are composed. Names are prefixed with cdtr-launchpad:.

| Event | detail | When | | -------------------------------- | --------------------------------------- | ---------------------------------------------------------- | | cdtr-launchpad:submit | { text, plan, tags, files } | User submitted the prompt (⌘/Ctrl-Enter or send button). | | cdtr-launchpad:category | { id, label } | User clicked a category chip. | | cdtr-launchpad:agent | — | User clicked the agent-link pill. | | cdtr-launchpad:plan-toggle | { on } | User toggled the plan control. | | cdtr-launchpad:add | — | User clicked the attach button. | | cdtr-launchpad:files | { files: File[], attachments: File[] }| Files were chosen from the picker. | | cdtr-launchpad:attachment-remove | { file, attachments: File[] } | User removed a staged attachment. | | cdtr-launchpad:voice | { state: 'start' \| 'stop' \| 'error' \| 'unsupported', text?, error? } | Speech-recognition lifecycle. |

Methods

lp.focusInput();   // focus the composer textarea
lp.reset();        // clear the draft and any staged attachments

Types

type Lang = 'en' | 'he';

type LaunchpadCategory = { id: string; label: string };

Styling

The component exposes CSS custom properties for theming:

cdtr-launchpad {
  --cdtr-lp-bg: linear-gradient(180deg, #faf6f1 0%, #fde7d2 100%);
  --cdtr-lp-fg: #111827;
  --cdtr-lp-muted: #9ca3af;
  --cdtr-lp-accent: #ea7c4a;
  --cdtr-lp-border: #e5e7eb;
  --cdtr-lp-card-bg: #ffffff;
  --cdtr-lp-pill-bg: #f7eee3;
  --cdtr-lp-pill-fg: #1f2937;
  --cdtr-lp-toggle-off: #d1d5db;
  --cdtr-lp-radius: 18px;
  --cdtr-lp-font: -apple-system, system-ui, 'Segoe UI', Roboto, sans-serif;
}

License

MIT