feat(demo): P3.5 inbox sidebar + inbox smoke (P3 complete)
message-demo gains a per-person Inbox rail (useInbox, done/snooze); sending surfaces a NEEDS_REPLY item in the other pane; reading auto-resolves it. smoke-inbox.mjs proves the event-driven flow end-to-end (send -> relay -> projector -> inbox -> read -> DONE). Realtime smoke still passes. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -1,5 +1,6 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { MessageProvider, useThread, useMessages } from '@insignia/iios-message-web';
|
||||
import { InboxProvider, useInbox } from '@insignia/iios-inbox-web';
|
||||
|
||||
const SERVICE = 'http://localhost:3200';
|
||||
const APP_ID = 'portal-demo';
|
||||
@@ -83,12 +84,35 @@ function ChatInner({
|
||||
);
|
||||
}
|
||||
|
||||
function InboxSidebar() {
|
||||
const { items, done, snooze } = useInbox({ state: 'OPEN' });
|
||||
return (
|
||||
<div style={{ width: 170, borderRight: '1px solid #ddd', padding: 8, fontSize: 12, fontFamily: 'sans-serif' }}>
|
||||
<b>Inbox ({items.length})</b>
|
||||
{items.length === 0 && <div style={{ color: '#999', marginTop: 6 }}>nothing to reply to</div>}
|
||||
{items.map((i) => (
|
||||
<div key={i.id} style={{ padding: '6px 0', borderBottom: '1px solid #eee' }}>
|
||||
<div style={{ fontWeight: 600 }}>{i.title}</div>
|
||||
<div style={{ color: '#999' }}>{i.kind}</div>
|
||||
<button style={{ marginRight: 4 }} onClick={() => void done(i.id)}>done</button>
|
||||
<button onClick={() => void snooze(i.id)}>snooze</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Pane(props: { token: string | null; label: string; threadId: string | null; onCreated?: (id: string) => void }) {
|
||||
if (!props.token) return <div style={{ flex: 1, margin: 8 }}>loading {props.label}…</div>;
|
||||
return (
|
||||
<MessageProvider serviceUrl={SERVICE} token={props.token}>
|
||||
<ChatInner label={props.label} threadId={props.threadId} onCreated={props.onCreated} />
|
||||
</MessageProvider>
|
||||
<div style={{ flex: 1, display: 'flex', margin: 8, border: '1px solid #ccc', borderRadius: 8, overflow: 'hidden' }}>
|
||||
<InboxProvider serviceUrl={SERVICE} token={props.token}>
|
||||
<InboxSidebar />
|
||||
</InboxProvider>
|
||||
<MessageProvider serviceUrl={SERVICE} token={props.token}>
|
||||
<ChatInner label={props.label} threadId={props.threadId} onCreated={props.onCreated} />
|
||||
</MessageProvider>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user