cohost/html/dialogue.tsx

import { JSX } from "preact";

type DNode = JSX.Element | string;
type DOption = [DNode, Dialogue];
type Dialogue = DNode | [DNode, ...DOption[]];

function not_empty<T>(arr: T[]): arr is [T, ...T[]] {
    return arr.length > 0;
}

export function reify_dialogue(d: Dialogue): JSX.Element | string {
    if (!Array.isArray(d)) return d;

    const [r, ...rest] = d;
    if (rest.length == 0) {
        return r;
    } else {
        return (
            <div class="dialogue">
                {r}
                {...rest.map(([r, d]) => {
                    return (
                        <details>
                            <summary class="option">{r}</summary>
                            <div class="response">{reify_dialogue(d)}</div>
                        </details>
                    );
                })}
            </div>
        );
    }
}