cohost/html/dialogue.tsx

import { Html, debug_render } from "./html.ts";
import { Component } from "./jsx/jsx-runtime.ts";

type DOption = [Html, Dialogue];
type Dialogue = Html | [Html, ...DOption[]];

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

function reify_dialogue(d: Dialogue): Html {
    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>
        );
    }
}

const rd = reify_dialogue([
    "Hi!",
    ["Hello!", "How are you!"],
    [
        "Bye",
        [
            ":(",
            ["Sorry", <span class="blue">:D</span>],
            ["Not sorry", <span class="red">D:</span>],
        ],
    ],
]);

debug_render(rd);