@matterfact/embed 0.3.0 → 0.5.0

package/examples/embed-demo/src/App.tsx

@@ -0,0 +1,189 @@
+import { useState } from 'react';
+import { MatterfactAgent, MatterfactArtifact } from '@matterfact/embed/react';
+import { config, missingConfig } from './config';
+
+export function App() {
+  const [panelOpen, setPanelOpen] = useState(true);
+  const missing = missingConfig();
+
+  if (missing.length) return <Setup missing={missing} />;
+
+  return (
+    <div className="app" data-panel={panelOpen ? 'open' : 'closed'}>
+      <header>
+        <div className="brand">
+          <span className="mark">M</span> Meridian Capital{' '}
+          <small>· embed demo</small>
+        </div>
+        <nav>
+          <a href="#">Positions</a>
+          <a href="#" className="active">
+            Growth Sleeve
+          </a>
+          <a href="#">Research</a>
+        </nav>
+        <span className="spacer" />
+        <span className="env-chip">
+          {config.env} · {config.widgetOrigin.replace(/^https?:\/\//, '')}
+        </span>
+        <button className="toggle" onClick={() => setPanelOpen((v) => !v)}>
+          <span className="dot" /> Assistant
+        </button>
+      </header>
+
+      <div className="layout">
+        <main>
+          <div className="eyebrow">Portfolio</div>
+          <h1>Growth Sleeve</h1>
+          <div className="sub">
+            12 holdings · rebalanced 3 days ago · benchmark S&amp;P 500
+          </div>
+
+          <div className="kpis">
+            <Kpi label="Market value" value="$48.2M" />
+            <Kpi label="Day change" value="+1.34%" tone="pos" />
+            <Kpi label="YTD" value="+18.7%" tone="pos" />
+            <Kpi label="vs benchmark" value="−2.1%" tone="neg" />
+          </div>
+
+          <div className="section-title">Embedded matterfact artifact</div>
+          <div className="artifact-frame">
+            <div className="artifact-badge">
+              <span className="mf">✦</span> matterfact artifact ·{' '}
+              <code>{config.artifact.slug}</code>
+            </div>
+            {/* The agent, mounted on the same page below, auto-detects this artifact
+                by origin and can answer questions about the data behind it. */}
+            <MatterfactArtifact
+              slug={config.artifact.slug}
+              owner={config.artifact.owner}
+              token={config.artifact.token}
+              widgetOrigin={config.widgetOrigin}
+              theme={config.theme}
+              style={{ width: '100%', height: '100%' }}
+            />
+          </div>
+          <p className="artifact-caption">
+            <strong>Artifact-aware:</strong> the assistant detects this embedded
+            artifact by its origin and can pull the real data behind it — try
+            asking it to summarise the artifact.
+          </p>
+
+          <div className="section-title">Holdings</div>
+          <table>
+            <thead>
+              <tr>
+                <th>Ticker</th>
+                <th>Weight</th>
+                <th>Day</th>
+                <th>YTD</th>
+                <th>Thesis</th>
+              </tr>
+            </thead>
+            <tbody>
+              <Row
+                t="NVDA"
+                w="9.4%"
+                d="+2.8%"
+                y="+41%"
+                th="AI datacenter demand"
+              />
+              <Row t="MSFT" w="8.1%" d="+0.9%" y="+22%" th="Copilot attach" />
+              <Row t="UNH" w="6.7%" d="−1.2%" y="−8%" th="MLR pressure" dn yn />
+              <Row
+                t="V"
+                w="5.9%"
+                d="+0.4%"
+                y="+11%"
+                th="Cross-border recovery"
+              />
+              <Row t="LLY" w="5.2%" d="+1.7%" y="+34%" th="GLP-1 ramp" />
+            </tbody>
+          </table>
+        </main>
+
+        {/* THE PANEL — the host's box. The agent renders inline inside it, sized by CSS.
+            Showing/hiding this panel is the open/close control; no floating launcher. */}
+        <aside>
+          <div className="panel-head">
+            <span className="mf">✦</span> matterfact assistant
+          </div>
+          <div className="agent-slot">
+            <MatterfactAgent
+              inline
+              publishableKey={config.publishableKey}
+              widgetOrigin={config.widgetOrigin}
+              surface={config.surface}
+              theme={config.theme}
+              style={{ width: '100%', height: '100%' }}
+            />
+          </div>
+        </aside>
+      </div>
+    </div>
+  );
+}
+
+function Kpi({
+  label,
+  value,
+  tone,
+}: {
+  label: string;
+  value: string;
+  tone?: 'pos' | 'neg';
+}) {
+  return (
+    <div className="kpi">
+      <div className="label">{label}</div>
+      <div className={`val ${tone ?? ''}`}>{value}</div>
+    </div>
+  );
+}
+
+function Row(props: {
+  t: string;
+  w: string;
+  d: string;
+  y: string;
+  th: string;
+  dn?: boolean;
+  yn?: boolean;
+}) {
+  return (
+    <tr>
+      <td className="tick">{props.t}</td>
+      <td>{props.w}</td>
+      <td className={props.dn ? 'neg' : 'pos'}>{props.d}</td>
+      <td className={props.yn ? 'neg' : 'pos'}>{props.y}</td>
+      <td>{props.th}</td>
+    </tr>
+  );
+}
+
+function Setup({ missing }: { missing: string[] }) {
+  return (
+    <div className="setup">
+      <div className="box">
+        <h2>Finish the config first</h2>
+        <p>
+          Copy <code>.env.example</code> to <code>.env</code>, set the values
+          below, then restart
+          <code>npm run dev</code>.
+        </p>
+        <ul>
+          {missing.map((m) => (
+            <li key={m} className="bad">
+              ✗ {m}
+            </li>
+          ))}
+        </ul>
+        <p>
+          The publishable key must have <code>http://localhost:8000</code>{' '}
+          registered as an allowed origin on the target deployment, or the agent
+          renders nothing.
+        </p>
+      </div>
+    </div>
+  );
+}

package/examples/embed-demo/src/config.ts

@@ -0,0 +1,43 @@
+// All demo config comes from Vite env vars (VITE_*), so the components stay clean
+// and nothing lives in the source. See .env.example.
+
+type Theme = 'light' | 'dark' | 'auto';
+
+// MF_WIDGET_ORIGIN always wins over this table.
+const ORIGINS: Record<string, string> = {
+  ecm: 'https://emc.matterfact.com',
+  prod: 'https://app.matterfact.com',
+  staging: '', // no fixed host — set VITE_MF_WIDGET_ORIGIN
+  local: 'http://localhost:3000', // wherever your dev server serves /embed/chat
+};
+
+const env = import.meta.env;
+const envName = (env.VITE_MF_ENV ?? 'ecm').toLowerCase();
+
+export const config = {
+  env: envName,
+  widgetOrigin: (env.VITE_MF_WIDGET_ORIGIN || ORIGINS[envName] || '').replace(
+    /\/+$/,
+    '',
+  ),
+  publishableKey: env.VITE_MF_PUBLISHABLE_KEY ?? '',
+  artifact: {
+    slug: env.VITE_MF_ARTIFACT_SLUG ?? '',
+    owner: env.VITE_MF_ARTIFACT_OWNER ?? '',
+    token: env.VITE_MF_ARTIFACT_TOKEN ?? '',
+  },
+  surface: env.VITE_MF_SURFACE ?? 'embed-demo',
+  theme: (env.VITE_MF_THEME ?? 'light') as Theme,
+};
+
+/** Which required values are still missing — drives the setup screen. */
+export function missingConfig(): string[] {
+  const miss: string[] = [];
+  if (!config.widgetOrigin)
+    miss.push('VITE_MF_ENV / VITE_MF_WIDGET_ORIGIN (widget origin)');
+  if (!config.publishableKey) miss.push('VITE_MF_PUBLISHABLE_KEY (agent key)');
+  if (!config.artifact.slug) miss.push('VITE_MF_ARTIFACT_SLUG');
+  if (!config.artifact.owner) miss.push('VITE_MF_ARTIFACT_OWNER');
+  if (!config.artifact.token) miss.push('VITE_MF_ARTIFACT_TOKEN');
+  return miss;
+}

package/examples/embed-demo/src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { App } from './App';
+import './styles.css';
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);

package/examples/embed-demo/src/styles.css

@@ -0,0 +1,354 @@
+:root {
+  --bg: #f4f6f9;
+  --surface: #fff;
+  --surface-2: #f0f3f7;
+  --line: #dfe4ec;
+  --ink: #131722;
+  --muted: #616b7c;
+  --accent: #2f5fe0;
+  --pos: #128a5b;
+  --neg: #c2453d;
+  --panel-w: 420px;
+  --sans:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial,
+    sans-serif;
+  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg: #0f1419;
+    --surface: #161c24;
+    --surface-2: #1d2530;
+    --line: #28303c;
+    --ink: #e7ecf2;
+    --muted: #8b97a6;
+    --accent: #6b93ff;
+    --pos: #4ea88a;
+    --neg: #d1706a;
+  }
+}
+* {
+  box-sizing: border-box;
+}
+html,
+body,
+#root {
+  height: 100%;
+  margin: 0;
+}
+body {
+  background: var(--bg);
+  color: var(--ink);
+  font-family: var(--sans);
+}
+
+.app {
+  display: grid;
+  grid-template-rows: auto 1fr;
+  height: 100vh;
+  overflow: hidden;
+}
+
+header {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 0 20px;
+  height: 56px;
+  border-bottom: 1px solid var(--line);
+  background: var(--surface);
+}
+.brand {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+}
+.brand .mark {
+  width: 26px;
+  height: 26px;
+  border-radius: 7px;
+  background: linear-gradient(135deg, var(--accent), #1b3fa8);
+  display: grid;
+  place-items: center;
+  color: #fff;
+  font-weight: 800;
+  font-size: 15px;
+}
+.brand small {
+  color: var(--muted);
+  font-weight: 500;
+  margin-left: 2px;
+}
+nav {
+  display: flex;
+  gap: 4px;
+  margin-left: 12px;
+}
+nav a {
+  color: var(--muted);
+  text-decoration: none;
+  font-size: 13.5px;
+  font-weight: 500;
+  padding: 6px 11px;
+  border-radius: 7px;
+}
+nav a.active {
+  color: var(--ink);
+  background: var(--surface-2);
+}
+.spacer {
+  flex: 1;
+}
+.env-chip {
+  font-family: var(--mono);
+  font-size: 11.5px;
+  color: var(--muted);
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  padding: 4px 10px;
+}
+.toggle {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  background: var(--surface-2);
+  color: var(--ink);
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  padding: 7px 12px;
+  font: inherit;
+  font-size: 13px;
+  font-weight: 600;
+}
+.toggle:hover {
+  border-color: var(--accent);
+}
+.toggle .dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--pos);
+}
+
+.layout {
+  display: grid;
+  grid-template-columns: 1fr var(--panel-w);
+  min-height: 0;
+}
+.app[data-panel='closed'] .layout {
+  grid-template-columns: 1fr 0;
+}
+
+main {
+  overflow-y: auto;
+  padding: 28px 32px 40px;
+  min-width: 0;
+}
+.eyebrow {
+  font-family: var(--mono);
+  font-size: 11.5px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--muted);
+}
+h1 {
+  font-size: 26px;
+  letter-spacing: -0.02em;
+  margin: 6px 0 2px;
+}
+.sub {
+  color: var(--muted);
+  font-size: 14px;
+  margin-bottom: 26px;
+}
+
+.kpis {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 12px;
+  margin-bottom: 26px;
+}
+.kpi {
+  background: var(--surface);
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  padding: 14px 16px;
+}
+.kpi .label {
+  font-size: 11.5px;
+  color: var(--muted);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+.kpi .val {
+  font-size: 22px;
+  font-weight: 700;
+  margin-top: 6px;
+  font-variant-numeric: tabular-nums;
+}
+.kpi .val.pos {
+  color: var(--pos);
+}
+.kpi .val.neg {
+  color: var(--neg);
+}
+
+.section-title {
+  font-size: 13px;
+  font-weight: 700;
+  color: var(--muted);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin: 4px 0 12px;
+}
+
+.artifact-frame {
+  position: relative;
+  width: 100%;
+  height: 360px;
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  background: var(--surface-2);
+  margin-bottom: 8px;
+  overflow: hidden;
+}
+.artifact-badge {
+  position: absolute;
+  top: 12px;
+  left: 12px;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  background: color-mix(in srgb, var(--surface) 82%, transparent);
+  backdrop-filter: blur(4px);
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  padding: 5px 11px;
+  font-size: 11.5px;
+  color: var(--muted);
+}
+.artifact-badge .mf {
+  color: var(--accent);
+}
+.artifact-badge code {
+  color: var(--ink);
+  font-family: var(--mono);
+  font-size: 11px;
+}
+.artifact-caption {
+  font-size: 12.5px;
+  color: var(--muted);
+  margin: 0 0 26px;
+}
+.artifact-caption strong {
+  color: var(--ink);
+  font-weight: 600;
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13.5px;
+}
+th {
+  text-align: left;
+  color: var(--muted);
+  font-weight: 600;
+  font-size: 11.5px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  padding: 8px 10px;
+  border-bottom: 1px solid var(--line);
+}
+td {
+  padding: 11px 10px;
+  border-bottom: 1px solid var(--line);
+  font-variant-numeric: tabular-nums;
+}
+td.tick {
+  font-weight: 700;
+}
+td.pos {
+  color: var(--pos);
+}
+td.neg {
+  color: var(--neg);
+}
+
+aside {
+  border-left: 1px solid var(--line);
+  background: var(--surface);
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  overflow: hidden;
+}
+.panel-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  height: 44px;
+  padding: 0 14px;
+  border-bottom: 1px solid var(--line);
+  font-size: 12.5px;
+  font-weight: 700;
+  color: var(--muted);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+.panel-head .mf {
+  color: var(--accent);
+}
+.agent-slot {
+  flex: 1;
+  min-height: 0;
+}
+
+.setup {
+  display: grid;
+  place-items: center;
+  height: 100vh;
+  padding: 24px;
+}
+.setup .box {
+  max-width: 580px;
+  background: var(--surface);
+  border: 1px solid var(--line);
+  border-radius: 14px;
+  padding: 28px 30px;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
+}
+.setup h2 {
+  margin: 0 0 6px;
+  font-size: 18px;
+}
+.setup p {
+  color: var(--muted);
+  font-size: 14px;
+  line-height: 1.55;
+  margin: 10px 0;
+}
+.setup code {
+  font-family: var(--mono);
+  font-size: 12.5px;
+  background: var(--surface-2);
+  padding: 2px 6px;
+  border-radius: 5px;
+  color: var(--ink);
+  margin: 0 2px;
+}
+.setup ul {
+  margin: 8px 0 0;
+  padding-left: 18px;
+}
+.setup li {
+  font-size: 13.5px;
+  line-height: 1.7;
+}
+.setup li.bad {
+  color: var(--neg);
+}

package/examples/embed-demo/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "types": ["vite/client"]
+  },
+  "include": ["src", "vite.config.ts"]
+}

package/examples/embed-demo/vite.config.ts

@@ -0,0 +1,11 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+// The dev server runs on localhost:8000 — that exact origin must be registered
+// as an allowed origin on your publishable key. strictPort so it never silently
+// drifts to a different (unregistered) port.
+export default defineConfig({
+  plugins: [react()],
+  server: { host: 'localhost', port: 8000, strictPort: true },
+  preview: { host: 'localhost', port: 8000, strictPort: true },
+});