mirror of
https://github.com/bitcoinresearchkit/brk.git
synced 2026-07-26 02:08:10 -07:00
next: ai part 2
This commit is contained in:
nym21
@@ -0,0 +1,117 @@
|
||||
import { bindHold } from "../../utils/hold.js";
|
||||
|
||||
const SIDEBAR_ID = "ask-sidebar";
|
||||
|
||||
/** @typedef {import("../storage.js").ChatMeta} ChatMeta */
|
||||
|
||||
/**
|
||||
* @typedef {Object} AskSidebarOptions
|
||||
* @property {() => void} onNew
|
||||
* @property {() => void} onToggle
|
||||
* @property {(id: string) => void} onSelect
|
||||
* @property {(id: string) => void} onRemove
|
||||
*/
|
||||
|
||||
/**
|
||||
* @param {string} label
|
||||
* @param {string} glyph
|
||||
*/
|
||||
function createControl(label, glyph) {
|
||||
const button = document.createElement("button");
|
||||
const icon = document.createElement("span");
|
||||
|
||||
button.type = "button";
|
||||
button.ariaLabel = label;
|
||||
button.title = label;
|
||||
icon.ariaHidden = "true";
|
||||
icon.append(glyph);
|
||||
button.append(icon);
|
||||
return button;
|
||||
}
|
||||
|
||||
/** @param {AskSidebarOptions} options */
|
||||
export function createAskSidebar(options) {
|
||||
const backdrop = document.createElement("button");
|
||||
const aside = document.createElement("aside");
|
||||
const chats = document.createElement("ol");
|
||||
const controls = document.createElement("nav");
|
||||
const newChat = createControl("New chat", "+");
|
||||
const toggle = createControl("Show chats", "→");
|
||||
let busy = false;
|
||||
|
||||
backdrop.type = "button";
|
||||
backdrop.ariaLabel = "Close chats";
|
||||
aside.id = SIDEBAR_ID;
|
||||
chats.setAttribute("aria-label", "Chats");
|
||||
controls.setAttribute("aria-label", "Chat controls");
|
||||
toggle.setAttribute("aria-controls", SIDEBAR_ID);
|
||||
toggle.setAttribute("aria-expanded", "false");
|
||||
newChat.addEventListener("click", options.onNew);
|
||||
toggle.addEventListener("click", options.onToggle);
|
||||
controls.append(newChat, toggle);
|
||||
aside.append(chats);
|
||||
|
||||
function syncDisabled() {
|
||||
newChat.disabled = busy;
|
||||
toggle.disabled = busy;
|
||||
for (const button of chats.querySelectorAll("button")) {
|
||||
button.disabled = busy;
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
backdrop,
|
||||
controls,
|
||||
element: aside,
|
||||
newChat,
|
||||
toggle,
|
||||
/** @param {boolean} value */
|
||||
setBusy(value) {
|
||||
busy = value;
|
||||
syncDisabled();
|
||||
},
|
||||
/** @param {boolean} expanded */
|
||||
setExpanded(expanded) {
|
||||
const label = expanded ? "Hide chats" : "Show chats";
|
||||
|
||||
toggle.setAttribute("aria-expanded", String(expanded));
|
||||
toggle.ariaLabel = label;
|
||||
toggle.title = label;
|
||||
},
|
||||
/**
|
||||
* @param {ChatMeta[]} items
|
||||
* @param {string} activeId
|
||||
*/
|
||||
render(items, activeId) {
|
||||
const scrollTop = chats.scrollTop;
|
||||
const rows = items.filter((chat) => chat.messageCount > 0).map((chat) => {
|
||||
const item = document.createElement("li");
|
||||
const select = document.createElement("button");
|
||||
const remove = document.createElement("button");
|
||||
|
||||
select.type = "button";
|
||||
select.title = chat.title;
|
||||
select.textContent = chat.title;
|
||||
if (chat.id === activeId) select.setAttribute("aria-current", "page");
|
||||
select.addEventListener("click", () => options.onSelect(chat.id));
|
||||
|
||||
remove.type = "button";
|
||||
remove.ariaLabel = `Hold to delete ${chat.title}`;
|
||||
remove.title = "Hold to delete chat";
|
||||
const icon = document.createElement("span");
|
||||
|
||||
icon.ariaHidden = "true";
|
||||
icon.append("×");
|
||||
remove.append(icon);
|
||||
bindHold(remove, () => options.onRemove(chat.id), 1_000);
|
||||
|
||||
item.append(select, remove);
|
||||
return item;
|
||||
});
|
||||
|
||||
chats.replaceChildren(...rows);
|
||||
chats.scrollTop = scrollTop;
|
||||
syncDisabled();
|
||||
},
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,233 @@
|
||||
main[data-page="ask"] {
|
||||
> button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
> aside {
|
||||
position: absolute;
|
||||
inset: 0 auto 0 0;
|
||||
z-index: 9;
|
||||
width: var(--ask-sidebar-width);
|
||||
min-width: 0;
|
||||
padding: 4.5rem var(--ask-sidebar-gutter) 1rem;
|
||||
background: transparent;
|
||||
overflow: hidden;
|
||||
transition:
|
||||
opacity 140ms ease,
|
||||
transform 180ms ease;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
inset: 0 0 0 auto;
|
||||
width: 1px;
|
||||
background: var(--ask-border);
|
||||
pointer-events: none;
|
||||
content: "";
|
||||
}
|
||||
|
||||
> ol {
|
||||
display: grid;
|
||||
align-content: start;
|
||||
gap: 0.125rem;
|
||||
max-height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow-y: auto;
|
||||
list-style: none;
|
||||
|
||||
> li {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
min-width: 0;
|
||||
border-radius: 0.25rem;
|
||||
overflow: hidden;
|
||||
|
||||
> button:first-child {
|
||||
--line-gap: 0.5rem;
|
||||
--line-gutter: 1.25rem;
|
||||
--line-inset: 0.5rem;
|
||||
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
border-radius: 0;
|
||||
padding: 0.3125rem;
|
||||
padding-inline-start: calc(var(--line-gutter) + var(--line-gap));
|
||||
overflow: hidden;
|
||||
color: var(--gray);
|
||||
background: transparent;
|
||||
font-size: var(--font-size-sm);
|
||||
line-height: var(--line-height-sm);
|
||||
text-align: left;
|
||||
text-overflow: ellipsis;
|
||||
text-transform: none;
|
||||
white-space: nowrap;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: var(--line-inset);
|
||||
width: calc(var(--line-gutter) - var(--line-inset));
|
||||
border-block-start: 1px solid currentColor;
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
translate: 0 -50%;
|
||||
content: "";
|
||||
}
|
||||
|
||||
&:is(:hover, :active, [data-press], [aria-current="page"]) {
|
||||
color: var(--black);
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
> button:last-child {
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
overflow: hidden;
|
||||
color: color-mix(in oklch, var(--gray) 76%, transparent);
|
||||
background: transparent;
|
||||
--hold-progress: 0;
|
||||
--hold-progress-width: 0%;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
opacity: 0;
|
||||
content: "";
|
||||
}
|
||||
|
||||
&::before {
|
||||
z-index: -1;
|
||||
background: var(--red);
|
||||
transform: scaleX(var(--hold-progress));
|
||||
transform-origin: left;
|
||||
}
|
||||
|
||||
&::after {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
color: var(--black);
|
||||
pointer-events: none;
|
||||
clip-path: inset(0 calc(100% - var(--hold-progress-width)) 0 0);
|
||||
content: "×";
|
||||
}
|
||||
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
&:hover:not([data-holding]) {
|
||||
color: var(--red);
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
&:is(:focus-visible, :active, [data-press]):not([data-holding]),
|
||||
&[data-active] {
|
||||
color: var(--red);
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&[data-active]::before,
|
||||
&[data-active]::after {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&:has(> button:first-child:is(:hover, :active, [data-press], [aria-current="page"])) {
|
||||
background: var(--white);
|
||||
|
||||
> button:last-child:not(:hover, :active, [data-active]) {
|
||||
color: var(--black);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> section > header > nav {
|
||||
position: fixed;
|
||||
top: 1.5rem;
|
||||
left: var(--ask-sidebar-gutter);
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
width: calc(
|
||||
var(--ask-sidebar-width) - var(--ask-sidebar-gutter) -
|
||||
var(--ask-sidebar-gutter)
|
||||
);
|
||||
min-width: 0;
|
||||
pointer-events: auto;
|
||||
|
||||
> button:last-child {
|
||||
> span {
|
||||
transition: transform 160ms ease;
|
||||
}
|
||||
|
||||
&[aria-expanded="true"] > span {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 48.001rem) {
|
||||
main[data-page="ask"][data-sidebar-collapsed] > aside {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transform: translateX(-1rem);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 48rem) {
|
||||
main[data-page="ask"] {
|
||||
> button {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 19;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 0;
|
||||
padding: 0;
|
||||
background: color-mix(in oklch, var(--black) 65%, transparent);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 160ms ease;
|
||||
}
|
||||
|
||||
> aside {
|
||||
position: fixed;
|
||||
z-index: 20;
|
||||
width: min(86vw, 19rem);
|
||||
background: var(--black);
|
||||
box-shadow: 1.5rem 0 4rem color-mix(in oklch, var(--black) 60%, transparent);
|
||||
transform: translateX(-105%);
|
||||
transition: transform 180ms ease;
|
||||
}
|
||||
|
||||
> section > header > nav {
|
||||
width: calc(
|
||||
min(86vw, 19rem) - var(--ask-sidebar-gutter) -
|
||||
var(--ask-sidebar-gutter)
|
||||
);
|
||||
}
|
||||
|
||||
&[data-sidebar-open] {
|
||||
> button {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
> aside {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
> section > header {
|
||||
z-index: 21;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user