Spaces:
Running
Running
File size: 5,607 Bytes
71e4446 1c48c34 71e4446 1c48c34 71e4446 1c48c34 71e4446 1c48c34 71e4446 1c48c34 71e4446 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 | /* ─────────────────────────────────────────────────────────────────────────
* Custom chat surface
*
* Layout
* ──────
* #hy-chat-host → the gr.HTML wrapper component. Owns the
* viewport-relative height; pure flex container.
* #hy-chat → our scrollable chat surface. Append-only DOM
* owned by static/chat.js; one .message-row per
* bubble.
*
* The rest of the file is component styling for the renderer's emitted
* DOM. The class names (``.message-row``, ``.message``, ``.bot``,
* ``.user``, ``.markdown``) are deliberately shared with the rules in
* _chatbot.css / _math.css / _thinking.css / _misc.css so those
* rulesets apply transparently to our bubbles.
* ───────────────────────────────────────────────────────────────────────── */
/* ── Outer wrapper: takes up the available vertical space. ─────────────
* We use absolute positioning on #hy-chat so it pins to all four edges
* of the host regardless of how many intermediate wrapper divs Gradio
* inserts (varies between versions). The host establishes the
* positioning context with ``position: relative``. */
#hy-chat-host {
position: relative !important;
height: calc(100vh - 200px) !important;
padding: 0 !important;
margin: 0 !important;
background: var(--hy-bg) !important;
border: none !important;
box-shadow: none !important;
min-height: 0 !important;
overflow: hidden !important;
}
/* Strip styling and positioning from any wrappers Gradio inserts
* between #hy-chat-host and #hy-chat — they would otherwise create new
* containing blocks and break the absolute-positioned scroll surface. */
#hy-chat-host > div,
#hy-chat-host > div > div {
position: static !important;
padding: 0 !important;
margin: 0 !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
height: auto !important;
}
/* ── Inner scrollable surface ──────────────────────────────────────────── */
#hy-chat {
position: absolute;
inset: 0;
overflow-y: auto;
overflow-x: hidden;
padding: 16px 24px 32px;
background: var(--hy-bg);
scroll-behavior: auto; /* programmatic scroll-to-bottom should be instant */
}
/* ── Message rows ──────────────────────────────────────────────────────── */
#hy-chat .message-row {
display: block;
width: 100%;
margin: 0 0 4px;
padding: 0;
}
#hy-chat .message-row.user-row {
/* Right-align user messages similar to Gradio's bubble layout. */
display: flex;
justify-content: flex-end;
margin: 12px 0 8px;
}
#hy-chat .message-row.bot-row {
margin: 0 0 18px;
}
/* ── Inner message containers ──────────────────────────────────────────── */
#hy-chat .message {
max-width: 95%;
background: transparent;
border: none;
padding: 0;
}
#hy-chat .message.user {
background: var(--hy-bg-muted, #f5f5f7);
border-radius: 18px;
padding: 10px 18px !important;
max-width: min(720px, 75%);
}
.dark #hy-chat .message.user {
background: #2a2a2a;
}
#hy-chat .message.bot {
background: transparent;
padding: 4px 0 !important;
}
/* ── User-text appearance (no markdown rendering — pre-wrap text). ────── */
#hy-chat .hy-user-text {
font-size: 15px;
line-height: 1.7;
color: var(--hy-text);
}
/* ── Frozen vs streaming segments inside the assistant bubble ──────────
* Both are direct children of .markdown so the existing #hy-chat .bot
* .markdown styling cascades into them transparently. The only thing
* we add here is to mark the streaming segment so future debugging or
* styling can target it (e.g. a subtle pulse to indicate "still
* generating" without flickering already-rendered formulas). */
#hy-chat .hy-frozen,
#hy-chat .hy-streaming {
display: block;
}
/* ── Tool-call display block (server-rendered Markdown HTML). ─────────── */
#hy-chat .hy-tool-calls {
margin-top: 10px;
}
#hy-chat .hy-tool-call + .hy-tool-call {
margin-top: 8px;
}
/* ── Hide the delta channel completely ─────────────────────────────────
* The bridge component for delta JSON. Must never occupy layout, must
* never trap pointer / focus / scroll events — but its content has to
* remain readable to the JS MutationObserver that drives the renderer
* (so we cannot use display:none). */
#hy-chat-delta,
#hy-chat-delta * {
position: absolute !important;
width: 0 !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
overflow: hidden !important;
clip: rect(0 0 0 0) !important;
clip-path: inset(50%) !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
user-select: none !important;
}
|