Conversation timeline
canonMoments, phases, who speaks when and the sentiment curve of one meeting on a shared minute axis.
Owner-approved 29 Sep 2026 (docs/ZADANI-koucink.md, acrm !4201; FA215). Candidate until component + stories + usage/a11y are on main. Sentiment colours via semantic tokens --sentiment-pos / --sentiment-neg (AD 30 Sep). On main 30 Sep 2026 (acrm !4229, !4234, !4238; tokens !4225); docs from dev-be FA220.
Used in 1 file · 1 area · 1× — components/meetings
Default
Jana51 %
Tereza44 %
Tomáš5 %
| Čas | Fáze | Řečník | Moment |
|---|---|---|---|
| 00:00–04:00 | Úvod | ||
| 04:00–16:00 | Potřeby | ||
| 06:40 | Potřeby | Tereza | Bolest: ruční přepisování stojí dva dny měsíčně — „Ruční přepisování nás stojí dva dny každý měsíc.“ |
| 16:00–31:00 | Ukázka | ||
| 24:10 | Ukázka | Tereza | Zájem: napojení na účetnictví — „Napojení na účetnictví by nám ušetřilo nejvíc.“ |
| 31:00–39:00 | Námitky | ||
| 33:05 | Námitky | Tereza | Námitka: cena proti dnešnímu nástroji — „Za tu cenu máme dnešní nástroj skoro zadarmo.“ |
| 39:00–44:00 | Cena | ||
| 44:00–48:12 | Další krok | ||
| 45:30 | Další krok | Jana | Další krok: technická schůzka 8. 10., odpovídá Tomáš — „Technickou schůzku dáme 8. 10., připraví ji Tomáš.“ |
export const Default = () => (
<Frame>
<ConversationTimeline {...CT_FULL} labels={CT_LABELS} />
</Frame>
);States
empty — no transcript with speakers yet
Průběh zatím není k dispozici
1 speaker — a one-sided recording (dictation)
Jana100 %
| Čas | Fáze | Řečník | Moment |
|---|---|---|---|
| 00:00–02:00 | Úvod | ||
| 02:00–10:00 | Diktát |
metrics only — no content analysis yet: no phases, moments or sentiment
Jana51 %
Tereza44 %
Tomáš5 %
| Čas | Fáze | Řečník | Moment |
|---|
reduced motion — animate={false}, the settled render prefers-reduced-motion gives
Jana51 %
Tereza44 %
Tomáš5 %
| Čas | Fáze | Řečník | Moment |
|---|---|---|---|
| 00:00–04:00 | Úvod | ||
| 04:00–16:00 | Potřeby | ||
| 06:40 | Potřeby | Tereza | Bolest: ruční přepisování stojí dva dny měsíčně — „Ruční přepisování nás stojí dva dny každý měsíc.“ |
| 16:00–31:00 | Ukázka | ||
| 24:10 | Ukázka | Tereza | Zájem: napojení na účetnictví — „Napojení na účetnictví by nám ušetřilo nejvíc.“ |
| 31:00–39:00 | Námitky | ||
| 33:05 | Námitky | Tereza | Námitka: cena proti dnešnímu nástroji — „Za tu cenu máme dnešní nástroj skoro zadarmo.“ |
| 39:00–44:00 | Cena | ||
| 44:00–48:12 | Další krok | ||
| 45:30 | Další krok | Jana | Další krok: technická schůzka 8. 10., odpovídá Tomáš — „Technickou schůzku dáme 8. 10., připraví ji Tomáš.“ |
export const States = () => (
<div style={{ display: 'grid', gap: 'var(--sp-7)' }}>
<Frame text="empty — no transcript with speakers yet">
<ConversationTimeline durationSec={0} speakers={[]} lanes={[]} labels={CT_LABELS} />
</Frame>
<Frame text="1 speaker — a one-sided recording (dictation)">
<ConversationTimeline {...CT_ONE_SPEAKER} labels={CT_LABELS} />
</Frame>
<Frame text="metrics only — no content analysis yet: no phases, moments or sentiment">
<ConversationTimeline {...CT_METRICS_ONLY} labels={CT_LABELS} />
</Frame>
<Frame text="reduced motion — animate={false}, the settled render prefers-reduced-motion gives">
<ConversationTimeline {...CT_FULL} labels={CT_LABELS} animate={false} />
</Frame>
</div>
);Composition
PrůběhRežim ukázky
Jana51 %
Tereza44 %
Tomáš5 %
| Čas | Fáze | Řečník | Moment |
|---|---|---|---|
| 00:00–04:00 | Úvod | ||
| 04:00–16:00 | Potřeby | ||
| 06:40 | Potřeby | Tereza | Bolest: ruční přepisování stojí dva dny měsíčně — „Ruční přepisování nás stojí dva dny každý měsíc.“ |
| 16:00–31:00 | Ukázka | ||
| 24:10 | Ukázka | Tereza | Zájem: napojení na účetnictví — „Napojení na účetnictví by nám ušetřilo nejvíc.“ |
| 31:00–39:00 | Námitky | ||
| 33:05 | Námitky | Tereza | Námitka: cena proti dnešnímu nástroji — „Za tu cenu máme dnešní nástroj skoro zadarmo.“ |
| 39:00–44:00 | Cena | ||
| 44:00–48:12 | Další krok | ||
| 45:30 | Další krok | Jana | Další krok: technická schůzka 8. 10., odpovídá Tomáš — „Technickou schůzku dáme 8. 10., připraví ji Tomáš.“ |
export const Composition = () => (
<div className="sb-block" style={{ width: 800 }}>
<div className="sb-h">
<span className="t">Průběh</span>
<span className="sb-acts">
<Switch size="sm" on={false} onChange={() => {}} label="Režim ukázky" />
</span>
</div>
<ConversationTimeline {...CT_FULL} labels={CT_LABELS} />
</div>
);