audit echo vs log across all scripts — outcomes always visible, verbose for per-item loops
This commit is contained in:
Gmer4Lfe
+13
@@ -0,0 +1,13 @@
|
||||
{
|
||||
"name": "fakechat",
|
||||
"description": "Localhost iMessage-style web chat for Claude Code \u2014 test surface with file upload and edits. No tokens, no access control.",
|
||||
"version": "0.0.1",
|
||||
"keywords": [
|
||||
"fakechat",
|
||||
"web",
|
||||
"localhost",
|
||||
"testing",
|
||||
"channel",
|
||||
"mcp"
|
||||
]
|
||||
}
|
||||
+8
@@ -0,0 +1,8 @@
|
||||
{
|
||||
"mcpServers": {
|
||||
"fakechat": {
|
||||
"command": "bun",
|
||||
"args": ["run", "--cwd", "${CLAUDE_PLUGIN_ROOT}", "--shell=bun", "--silent", "start"]
|
||||
}
|
||||
}
|
||||
}
|
||||
+1
@@ -0,0 +1 @@
|
||||
registry=https://registry.npmjs.org/
|
||||
+202
@@ -0,0 +1,202 @@
|
||||
|
||||
Apache License
|
||||
Version 2.0, January 2004
|
||||
http://www.apache.org/licenses/
|
||||
|
||||
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
|
||||
|
||||
1. Definitions.
|
||||
|
||||
"License" shall mean the terms and conditions for use, reproduction,
|
||||
and distribution as defined by Sections 1 through 9 of this document.
|
||||
|
||||
"Licensor" shall mean the copyright owner or entity authorized by
|
||||
the copyright owner that is granting the License.
|
||||
|
||||
"Legal Entity" shall mean the union of the acting entity and all
|
||||
other entities that control, are controlled by, or are under common
|
||||
control with that entity. For the purposes of this definition,
|
||||
"control" means (i) the power, direct or indirect, to cause the
|
||||
direction or management of such entity, whether by contract or
|
||||
otherwise, or (ii) ownership of fifty percent (50%) or more of the
|
||||
outstanding shares, or (iii) beneficial ownership of such entity.
|
||||
|
||||
"You" (or "Your") shall mean an individual or Legal Entity
|
||||
exercising permissions granted by this License.
|
||||
|
||||
"Source" form shall mean the preferred form for making modifications,
|
||||
including but not limited to software source code, documentation
|
||||
source, and configuration files.
|
||||
|
||||
"Object" form shall mean any form resulting from mechanical
|
||||
transformation or translation of a Source form, including but
|
||||
not limited to compiled object code, generated documentation,
|
||||
and conversions to other media types.
|
||||
|
||||
"Work" shall mean the work of authorship, whether in Source or
|
||||
Object form, made available under the License, as indicated by a
|
||||
copyright notice that is included in or attached to the work
|
||||
(an example is provided in the Appendix below).
|
||||
|
||||
"Derivative Works" shall mean any work, whether in Source or Object
|
||||
form, that is based on (or derived from) the Work and for which the
|
||||
editorial revisions, annotations, elaborations, or other modifications
|
||||
represent, as a whole, an original work of authorship. For the purposes
|
||||
of this License, Derivative Works shall not include works that remain
|
||||
separable from, or merely link (or bind by name) to the interfaces of,
|
||||
the Work and Derivative Works thereof.
|
||||
|
||||
"Contribution" shall mean any work of authorship, including
|
||||
the original version of the Work and any modifications or additions
|
||||
to that Work or Derivative Works thereof, that is intentionally
|
||||
submitted to Licensor for inclusion in the Work by the copyright owner
|
||||
or by an individual or Legal Entity authorized to submit on behalf of
|
||||
the copyright owner. For the purposes of this definition, "submitted"
|
||||
means any form of electronic, verbal, or written communication sent
|
||||
to the Licensor or its representatives, including but not limited to
|
||||
communication on electronic mailing lists, source code control systems,
|
||||
and issue tracking systems that are managed by, or on behalf of, the
|
||||
Licensor for the purpose of discussing and improving the Work, but
|
||||
excluding communication that is conspicuously marked or otherwise
|
||||
designated in writing by the copyright owner as "Not a Contribution."
|
||||
|
||||
"Contributor" shall mean Licensor and any individual or Legal Entity
|
||||
on behalf of whom a Contribution has been received by Licensor and
|
||||
subsequently incorporated within the Work.
|
||||
|
||||
2. Grant of Copyright License. Subject to the terms and conditions of
|
||||
this License, each Contributor hereby grants to You a perpetual,
|
||||
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
||||
copyright license to reproduce, prepare Derivative Works of,
|
||||
publicly display, publicly perform, sublicense, and distribute the
|
||||
Work and such Derivative Works in Source or Object form.
|
||||
|
||||
3. Grant of Patent License. Subject to the terms and conditions of
|
||||
this License, each Contributor hereby grants to You a perpetual,
|
||||
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
||||
(except as stated in this section) patent license to make, have made,
|
||||
use, offer to sell, sell, import, and otherwise transfer the Work,
|
||||
where such license applies only to those patent claims licensable
|
||||
by such Contributor that are necessarily infringed by their
|
||||
Contribution(s) alone or by combination of their Contribution(s)
|
||||
with the Work to which such Contribution(s) was submitted. If You
|
||||
institute patent litigation against any entity (including a
|
||||
cross-claim or counterclaim in a lawsuit) alleging that the Work
|
||||
or a Contribution incorporated within the Work constitutes direct
|
||||
or contributory patent infringement, then any patent licenses
|
||||
granted to You under this License for that Work shall terminate
|
||||
as of the date such litigation is filed.
|
||||
|
||||
4. Redistribution. You may reproduce and distribute copies of the
|
||||
Work or Derivative Works thereof in any medium, with or without
|
||||
modifications, and in Source or Object form, provided that You
|
||||
meet the following conditions:
|
||||
|
||||
(a) You must give any other recipients of the Work or
|
||||
Derivative Works a copy of this License; and
|
||||
|
||||
(b) You must cause any modified files to carry prominent notices
|
||||
stating that You changed the files; and
|
||||
|
||||
(c) You must retain, in the Source form of any Derivative Works
|
||||
that You distribute, all copyright, patent, trademark, and
|
||||
attribution notices from the Source form of the Work,
|
||||
excluding those notices that do not pertain to any part of
|
||||
the Derivative Works; and
|
||||
|
||||
(d) If the Work includes a "NOTICE" text file as part of its
|
||||
distribution, then any Derivative Works that You distribute must
|
||||
include a readable copy of the attribution notices contained
|
||||
within such NOTICE file, excluding those notices that do not
|
||||
pertain to any part of the Derivative Works, in at least one
|
||||
of the following places: within a NOTICE text file distributed
|
||||
as part of the Derivative Works; within the Source form or
|
||||
documentation, if provided along with the Derivative Works; or,
|
||||
within a display generated by the Derivative Works, if and
|
||||
wherever such third-party notices normally appear. The contents
|
||||
of the NOTICE file are for informational purposes only and
|
||||
do not modify the License. You may add Your own attribution
|
||||
notices within Derivative Works that You distribute, alongside
|
||||
or as an addendum to the NOTICE text from the Work, provided
|
||||
that such additional attribution notices cannot be construed
|
||||
as modifying the License.
|
||||
|
||||
You may add Your own copyright statement to Your modifications and
|
||||
may provide additional or different license terms and conditions
|
||||
for use, reproduction, or distribution of Your modifications, or
|
||||
for any such Derivative Works as a whole, provided Your use,
|
||||
reproduction, and distribution of the Work otherwise complies with
|
||||
the conditions stated in this License.
|
||||
|
||||
5. Submission of Contributions. Unless You explicitly state otherwise,
|
||||
any Contribution intentionally submitted for inclusion in the Work
|
||||
by You to the Licensor shall be under the terms and conditions of
|
||||
this License, without any additional terms or conditions.
|
||||
Notwithstanding the above, nothing herein shall supersede or modify
|
||||
the terms of any separate license agreement you may have executed
|
||||
with Licensor regarding such Contributions.
|
||||
|
||||
6. Trademarks. This License does not grant permission to use the trade
|
||||
names, trademarks, service marks, or product names of the Licensor,
|
||||
except as required for reasonable and customary use in describing the
|
||||
origin of the Work and reproducing the content of the NOTICE file.
|
||||
|
||||
7. Disclaimer of Warranty. Unless required by applicable law or
|
||||
agreed to in writing, Licensor provides the Work (and each
|
||||
Contributor provides its Contributions) on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
|
||||
implied, including, without limitation, any warranties or conditions
|
||||
of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
|
||||
PARTICULAR PURPOSE. You are solely responsible for determining the
|
||||
appropriateness of using or redistributing the Work and assume any
|
||||
risks associated with Your exercise of permissions under this License.
|
||||
|
||||
8. Limitation of Liability. In no event and under no legal theory,
|
||||
whether in tort (including negligence), contract, or otherwise,
|
||||
unless required by applicable law (such as deliberate and grossly
|
||||
negligent acts) or agreed to in writing, shall any Contributor be
|
||||
liable to You for damages, including any direct, indirect, special,
|
||||
incidental, or consequential damages of any character arising as a
|
||||
result of this License or out of the use or inability to use the
|
||||
Work (including but not limited to damages for loss of goodwill,
|
||||
work stoppage, computer failure or malfunction, or any and all
|
||||
other commercial damages or losses), even if such Contributor
|
||||
has been advised of the possibility of such damages.
|
||||
|
||||
9. Accepting Warranty or Additional Liability. While redistributing
|
||||
the Work or Derivative Works thereof, You may choose to offer,
|
||||
and charge a fee for, acceptance of support, warranty, indemnity,
|
||||
or other liability obligations and/or rights consistent with this
|
||||
License. However, in accepting such obligations, You may act only
|
||||
on Your own behalf and on Your sole responsibility, not on behalf
|
||||
of any other Contributor, and only if You agree to indemnify,
|
||||
defend, and hold each Contributor harmless for any liability
|
||||
incurred by, or claims asserted against, such Contributor by reason
|
||||
of your accepting any such warranty or additional liability.
|
||||
|
||||
END OF TERMS AND CONDITIONS
|
||||
|
||||
APPENDIX: How to apply the Apache License to your work.
|
||||
|
||||
To apply the Apache License to your work, attach the following
|
||||
boilerplate notice, with the fields enclosed by brackets "[]"
|
||||
replaced with your own identifying information. (Don't include
|
||||
the brackets!) The text should be enclosed in the appropriate
|
||||
comment syntax for the file format. We also recommend that a
|
||||
file or class name and description of purpose be included on the
|
||||
same "printed page" as the copyright notice for easier
|
||||
identification within third-party archives.
|
||||
|
||||
Copyright 2026 Anthropic, PBC
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
+47
@@ -0,0 +1,47 @@
|
||||
# fakechat
|
||||
|
||||
Simple UI for testing the channel contract without an
|
||||
external service. Open a browser, type, messages go to your Claude Code
|
||||
session, replies come back.
|
||||
|
||||
|
||||
## Setup
|
||||
|
||||
These are Claude Code commands — run `claude` to start a session first.
|
||||
|
||||
Install the plugin:
|
||||
```
|
||||
/plugin install fakechat@claude-plugins-official
|
||||
```
|
||||
|
||||
**Relaunch with the channel flag** — the server won't connect without this. Exit your session and start a new one:
|
||||
|
||||
```sh
|
||||
claude --channels plugin:fakechat@claude-plugins-official
|
||||
```
|
||||
|
||||
The server prints the URL to stderr on startup:
|
||||
|
||||
```
|
||||
fakechat: http://localhost:8787
|
||||
```
|
||||
|
||||
Open it. Type. The assistant replies in-thread.
|
||||
|
||||
Set `FAKECHAT_PORT` to change the port.
|
||||
|
||||
## Tools
|
||||
|
||||
| Tool | Purpose |
|
||||
| --- | --- |
|
||||
| `reply` | Send to the UI. Takes `text`, optionally `reply_to` (message ID) and `files` (absolute path, 50MB). Attachment shows as `[filename]` under the text. |
|
||||
| `edit_message` | Edit a previously-sent message in place. |
|
||||
|
||||
Inbound images/files save to `~/.claude/channels/fakechat/inbox/` and the path
|
||||
is included in the notification. Outbound files are copied to `outbox/` and
|
||||
served over HTTP.
|
||||
|
||||
## Not a real channel
|
||||
|
||||
There's no history, no search, no access.json, no skill. Single browser tab,
|
||||
fresh on every reload. This is a dev tool, not a messaging bridge.
|
||||
+16
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"name": "claude-channel-fakechat",
|
||||
"version": "0.0.1",
|
||||
"license": "Apache-2.0",
|
||||
"type": "module",
|
||||
"bin": "./server.ts",
|
||||
"scripts": {
|
||||
"start": "bun install --no-summary && bun server.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@modelcontextprotocol/sdk": "^1.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/bun": "^1.3.10"
|
||||
}
|
||||
}
|
||||
+295
@@ -0,0 +1,295 @@
|
||||
#!/usr/bin/env bun
|
||||
/**
|
||||
* Fake chat for Claude Code.
|
||||
*
|
||||
* Localhost web UI for testing the channel contract. No external service,
|
||||
* no tokens, no access control.
|
||||
*/
|
||||
|
||||
import { Server } from '@modelcontextprotocol/sdk/server/index.js'
|
||||
import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js'
|
||||
import {
|
||||
ListToolsRequestSchema,
|
||||
CallToolRequestSchema,
|
||||
} from '@modelcontextprotocol/sdk/types.js'
|
||||
import { readFileSync, writeFileSync, mkdirSync, statSync, copyFileSync } from 'fs'
|
||||
import { homedir } from 'os'
|
||||
import { join, extname, basename } from 'path'
|
||||
import type { ServerWebSocket } from 'bun'
|
||||
|
||||
const PORT = Number(process.env.FAKECHAT_PORT ?? 8787)
|
||||
const STATE_DIR = join(homedir(), '.claude', 'channels', 'fakechat')
|
||||
const INBOX_DIR = join(STATE_DIR, 'inbox')
|
||||
const OUTBOX_DIR = join(STATE_DIR, 'outbox')
|
||||
|
||||
type Msg = {
|
||||
id: string
|
||||
from: 'user' | 'assistant'
|
||||
text: string
|
||||
ts: number
|
||||
replyTo?: string
|
||||
file?: { url: string; name: string }
|
||||
}
|
||||
|
||||
type Wire =
|
||||
| ({ type: 'msg' } & Msg)
|
||||
| { type: 'edit'; id: string; text: string }
|
||||
|
||||
const clients = new Set<ServerWebSocket<unknown>>()
|
||||
let seq = 0
|
||||
|
||||
function nextId() {
|
||||
return `m${Date.now()}-${++seq}`
|
||||
}
|
||||
|
||||
function broadcast(m: Wire) {
|
||||
const data = JSON.stringify(m)
|
||||
for (const ws of clients) if (ws.readyState === 1) ws.send(data)
|
||||
}
|
||||
|
||||
function mime(ext: string) {
|
||||
const m: Record<string, string> = {
|
||||
'.jpg': 'image/jpeg', '.jpeg': 'image/jpeg', '.png': 'image/png',
|
||||
'.gif': 'image/gif', '.webp': 'image/webp', '.svg': 'image/svg+xml',
|
||||
'.pdf': 'application/pdf', '.txt': 'text/plain',
|
||||
}
|
||||
return m[ext] ?? 'application/octet-stream'
|
||||
}
|
||||
|
||||
const mcp = new Server(
|
||||
{ name: 'fakechat', version: '0.1.0' },
|
||||
{
|
||||
capabilities: { tools: {}, experimental: { 'claude/channel': {} } },
|
||||
instructions: `The sender reads the fakechat UI, not this session. Anything you want them to see must go through the reply tool — your transcript output never reaches the UI.\n\nMessages from the fakechat web UI arrive as <channel source="fakechat" chat_id="web" message_id="...">. If the tag has a file_path attribute, Read that file — it is an upload from the UI. Reply with the reply tool. UI is at http://localhost:${PORT}.`,
|
||||
},
|
||||
)
|
||||
|
||||
mcp.setRequestHandler(ListToolsRequestSchema, async () => ({
|
||||
tools: [
|
||||
{
|
||||
name: 'reply',
|
||||
description: 'Send a message to the fakechat UI. Pass reply_to for quote-reply, files for attachments.',
|
||||
inputSchema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
text: { type: 'string' },
|
||||
reply_to: { type: 'string' },
|
||||
files: { type: 'array', items: { type: 'string' } },
|
||||
},
|
||||
required: ['text'],
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'edit_message',
|
||||
description: 'Edit a previously sent message.',
|
||||
inputSchema: {
|
||||
type: 'object',
|
||||
properties: { message_id: { type: 'string' }, text: { type: 'string' } },
|
||||
required: ['message_id', 'text'],
|
||||
},
|
||||
},
|
||||
],
|
||||
}))
|
||||
|
||||
mcp.setRequestHandler(CallToolRequestSchema, async req => {
|
||||
const args = (req.params.arguments ?? {}) as Record<string, unknown>
|
||||
try {
|
||||
switch (req.params.name) {
|
||||
case 'reply': {
|
||||
const text = args.text as string
|
||||
const replyTo = args.reply_to as string | undefined
|
||||
const files = (args.files as string[] | undefined) ?? []
|
||||
const ids: string[] = []
|
||||
|
||||
// Text + files collapse into a single message, matching the client's [filename]-under-text rendering.
|
||||
mkdirSync(OUTBOX_DIR, { recursive: true })
|
||||
let file: { url: string; name: string } | undefined
|
||||
if (files[0]) {
|
||||
const f = files[0]
|
||||
const st = statSync(f)
|
||||
if (st.size > 50 * 1024 * 1024) throw new Error(`file too large: ${f}`)
|
||||
const ext = extname(f).toLowerCase()
|
||||
const out = `${Date.now()}-${Math.random().toString(36).slice(2, 8)}${ext}`
|
||||
copyFileSync(f, join(OUTBOX_DIR, out))
|
||||
file = { url: `/files/${out}`, name: basename(f) }
|
||||
}
|
||||
const id = nextId()
|
||||
broadcast({ type: 'msg', id, from: 'assistant', text, ts: Date.now(), replyTo, file })
|
||||
ids.push(id)
|
||||
return { content: [{ type: 'text', text: `sent (${ids.join(', ')})` }] }
|
||||
}
|
||||
case 'edit_message': {
|
||||
broadcast({ type: 'edit', id: args.message_id as string, text: args.text as string })
|
||||
return { content: [{ type: 'text', text: 'ok' }] }
|
||||
}
|
||||
default:
|
||||
return { content: [{ type: 'text', text: `unknown: ${req.params.name}` }], isError: true }
|
||||
}
|
||||
} catch (err) {
|
||||
return { content: [{ type: 'text', text: `${req.params.name}: ${err instanceof Error ? err.message : err}` }], isError: true }
|
||||
}
|
||||
})
|
||||
|
||||
await mcp.connect(new StdioServerTransport())
|
||||
|
||||
function deliver(id: string, text: string, file?: { path: string; name: string }): void {
|
||||
// file_path goes in meta only — an in-content "[attached — Read: PATH]"
|
||||
// annotation is forgeable by typing that string into the UI.
|
||||
void mcp.notification({
|
||||
method: 'notifications/claude/channel',
|
||||
params: {
|
||||
content: text || `(${file?.name ?? 'attachment'})`,
|
||||
meta: {
|
||||
chat_id: 'web', message_id: id, user: 'web', ts: new Date().toISOString(),
|
||||
...(file ? { file_path: file.path } : {}),
|
||||
},
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
Bun.serve({
|
||||
port: PORT,
|
||||
hostname: '127.0.0.1',
|
||||
fetch(req, server) {
|
||||
const url = new URL(req.url)
|
||||
|
||||
if (url.pathname === '/ws') {
|
||||
if (server.upgrade(req)) return
|
||||
return new Response('upgrade failed', { status: 400 })
|
||||
}
|
||||
|
||||
if (url.pathname.startsWith('/files/')) {
|
||||
const f = url.pathname.slice(7)
|
||||
if (f.includes('..') || f.includes('/')) return new Response('bad', { status: 400 })
|
||||
try {
|
||||
return new Response(readFileSync(join(OUTBOX_DIR, f)), {
|
||||
headers: { 'content-type': mime(extname(f).toLowerCase()) },
|
||||
})
|
||||
} catch {
|
||||
return new Response('404', { status: 404 })
|
||||
}
|
||||
}
|
||||
|
||||
if (url.pathname === '/upload' && req.method === 'POST') {
|
||||
return (async () => {
|
||||
const form = await req.formData()
|
||||
const id = String(form.get('id') ?? '')
|
||||
const text = String(form.get('text') ?? '')
|
||||
const f = form.get('file')
|
||||
if (!id) return new Response('missing id', { status: 400 })
|
||||
let file: { path: string; name: string } | undefined
|
||||
if (f instanceof File && f.size > 0) {
|
||||
mkdirSync(INBOX_DIR, { recursive: true })
|
||||
const ext = extname(f.name).toLowerCase() || '.bin'
|
||||
const path = join(INBOX_DIR, `${Date.now()}${ext}`)
|
||||
writeFileSync(path, Buffer.from(await f.arrayBuffer()))
|
||||
file = { path, name: f.name }
|
||||
}
|
||||
deliver(id, text, file)
|
||||
return new Response(null, { status: 204 })
|
||||
})()
|
||||
}
|
||||
|
||||
if (url.pathname === '/') {
|
||||
return new Response(HTML, { headers: { 'content-type': 'text/html; charset=utf-8' } })
|
||||
}
|
||||
return new Response('404', { status: 404 })
|
||||
},
|
||||
websocket: {
|
||||
open: ws => { clients.add(ws) },
|
||||
close: ws => { clients.delete(ws) },
|
||||
message: (_, raw) => {
|
||||
try {
|
||||
const { id, text } = JSON.parse(String(raw)) as { id: string; text: string }
|
||||
if (id && text?.trim()) deliver(id, text.trim())
|
||||
} catch {}
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
process.stderr.write(`fakechat: http://localhost:${PORT}\n`)
|
||||
|
||||
const HTML = `<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>fakechat</title>
|
||||
<style>
|
||||
body { font-family: monospace; margin: 0; padding: 1em 1em 7em; }
|
||||
#log { white-space: pre-wrap; word-break: break-word; }
|
||||
form { position: fixed; bottom: 0; left: 0; right: 0; padding: 1em; background: #fff; }
|
||||
#text { width: 100%; box-sizing: border-box; font: inherit; margin-bottom: 0.5em; }
|
||||
#file { display: none; }
|
||||
#row { display: flex; gap: 1ch; }
|
||||
#row button[type=submit] { margin-left: auto; }
|
||||
</style>
|
||||
<h3>fakechat</h3>
|
||||
<pre id=log></pre>
|
||||
<form id=form>
|
||||
<textarea id=text rows=2 autocomplete=off autofocus></textarea>
|
||||
<div id=row>
|
||||
<button type=button onclick="file.click()">attach</button><input type=file id=file>
|
||||
<span id=chip></span>
|
||||
<button type=submit>send</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<script>
|
||||
const log = document.getElementById('log')
|
||||
document.getElementById('file').onchange = e => { const f = e.target.files[0]; chip.textContent = f ? '[' + f.name + ']' : '' }
|
||||
const form = document.getElementById('form')
|
||||
const input = document.getElementById('text')
|
||||
const fileIn = document.getElementById('file')
|
||||
const chip = document.getElementById('chip')
|
||||
const msgs = {}
|
||||
|
||||
const ws = new WebSocket('ws://' + location.host + '/ws')
|
||||
ws.onmessage = e => {
|
||||
const m = JSON.parse(e.data)
|
||||
if (m.type === 'msg') add(m)
|
||||
if (m.type === 'edit') { const x = msgs[m.id]; if (x) { x.body.textContent = m.text + ' (edited)' } }
|
||||
}
|
||||
|
||||
let uid = 0
|
||||
form.onsubmit = e => {
|
||||
e.preventDefault()
|
||||
const text = input.value.trim()
|
||||
const file = fileIn.files[0]
|
||||
if (!text && !file) return
|
||||
input.value = ''; fileIn.value = ''; chip.textContent = ''
|
||||
const id = 'u' + Date.now() + '-' + (++uid)
|
||||
add({ id, from: 'user', text, file: file ? { url: URL.createObjectURL(file), name: file.name } : undefined })
|
||||
if (file) {
|
||||
const fd = new FormData(); fd.set('id', id); fd.set('text', text); fd.set('file', file)
|
||||
fetch('/upload', { method: 'POST', body: fd })
|
||||
} else {
|
||||
ws.send(JSON.stringify({ id, text }))
|
||||
}
|
||||
}
|
||||
|
||||
function add(m) {
|
||||
const who = m.from === 'user' ? 'you' : 'bot'
|
||||
const el = line(who, m.text, m.replyTo, m.file)
|
||||
log.appendChild(el); scroll()
|
||||
msgs[m.id] = { body: el.querySelector('.body') }
|
||||
}
|
||||
|
||||
function line(who, text, replyTo, file) {
|
||||
const div = document.createElement('div')
|
||||
const t = new Date().toTimeString().slice(0, 8)
|
||||
const reply = replyTo && msgs[replyTo] ? ' ↳ ' + (msgs[replyTo].body.textContent || '(file)').slice(0, 40) : ''
|
||||
div.innerHTML = '[' + t + '] <b>' + who + '</b>' + reply + ': <span class=body></span>'
|
||||
const body = div.querySelector('.body')
|
||||
body.textContent = text || ''
|
||||
if (file) {
|
||||
const indent = 11 + who.length + 2 // '[HH:MM:SS] ' + who + ': '
|
||||
if (text) body.appendChild(document.createTextNode('\\n' + ' '.repeat(indent)))
|
||||
const a = document.createElement('a')
|
||||
a.href = file.url; a.download = file.name; a.textContent = '[' + file.name + ']'
|
||||
body.appendChild(a)
|
||||
}
|
||||
return div
|
||||
}
|
||||
|
||||
function scroll() { window.scrollTo(0, document.body.scrollHeight) }
|
||||
input.addEventListener('keydown', e => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); form.requestSubmit() } })
|
||||
</script>
|
||||
`
|
||||
Reference in New Issue
Block a user