Standalone chat UI built with vanilla Web Components (Custom Elements + Shadow DOM) that connects to the MLX inference server's SSE streaming endpoint. Zero framework dependencies, single JS bundle output. Components: - <lem-chat>: Container with SSE client, config via attributes - <lem-messages>: Scrollable message list with auto-scroll - <lem-message>: Single message bubble with streaming + <think> tag support - <lem-input>: Textarea with Enter to send, Shift+Enter for newline Build: esbuild src/lem-chat.ts → dist/lem-chat.js (15KB ESM) Replaces the monolithic chat.js in core/go-ml. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
34 lines
844 B
HTML
34 lines
844 B
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>LEM Chat</title>
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
html, body { height: 100%; background: #111; }
|
|
body {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-family: system-ui, -apple-system, sans-serif;
|
|
}
|
|
lem-chat {
|
|
width: 720px;
|
|
height: 85vh;
|
|
max-height: 800px;
|
|
}
|
|
@media (max-width: 768px) {
|
|
lem-chat { width: 100%; height: 100%; max-height: none; border-radius: 0; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<lem-chat
|
|
endpoint="http://localhost:8090"
|
|
model="local"
|
|
max-tokens="2048"
|
|
></lem-chat>
|
|
<script type="module" src="dist/lem-chat.js"></script>
|
|
</body>
|
|
</html>
|