{"id":31209595,"url":"https://github.com/keides2/chatview","last_synced_at":"2026-04-28T21:35:08.667Z","repository":{"id":314810296,"uuid":"1056421096","full_name":"keides2/chatview","owner":"keides2","description":"ChatView is a VSCode extension that displays a chat-like view of your Markdown files.","archived":false,"fork":false,"pushed_at":"2025-10-25T04:42:36.000Z","size":25444,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-10-25T06:09:23.708Z","etag":null,"topics":["chat-ui","css","markdown","markdown-preview","typescript","vscode-extension","vscode-webview"],"latest_commit_sha":null,"homepage":"","language":"Python","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/keides2.png","metadata":{"files":{"readme":"README-enterprise-en.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-09-14T03:54:10.000Z","updated_at":"2025-10-25T04:42:39.000Z","dependencies_parsed_at":"2025-09-15T00:17:34.894Z","dependency_job_id":"ef636e31-fa59-4401-935b-ad165ff707d6","html_url":"https://github.com/keides2/chatview","commit_stats":null,"previous_names":["keides2/chatview"],"tags_count":12,"template":false,"template_full_name":null,"purl":"pkg:github/keides2/chatview","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/keides2%2Fchatview","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/keides2%2Fchatview/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/keides2%2Fchatview/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/keides2%2Fchatview/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/keides2","download_url":"https://codeload.github.com/keides2/chatview/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/keides2%2Fchatview/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32400868,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-28T19:38:08.556Z","status":"ssl_error","status_checked_at":"2026-04-28T19:37:55.688Z","response_time":56,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chat-ui","css","markdown","markdown-preview","typescript","vscode-extension","vscode-webview"],"created_at":"2025-09-21T02:24:08.770Z","updated_at":"2026-04-28T21:35:06.253Z","avatar_url":"https://github.com/keides2.png","language":"Python","funding_links":[],"categories":[],"sub_categories":[],"readme":"# \u003cp align=\"center\"\u003e\n  \u003cimg src=\"./media/ChatView-logo4.png\" alt=\"ChatView Logo\" width=\"512\" height=\"512\"/\u003e\n\u003c/p\u003e\n\n**English** | [日本語](README_ja.md)\n\n# 🗨️ ChatView — Preview Markdown conversations in a LINE-style chat UI\n\n**ChatView** is a Visual Studio Code extension that renders conversation content written in Markdown as a LINE-style chat UI. It's useful for creating screenshots and for reviewing conversational content.\n\n---\n## 📷 Example\n\n![ChatView sample](./sample_2.jpg)\n\n---\n\n## 👤 User Guide\n\n### ✅ Key features\n\n- Render conversation text written in Markdown as a chat UI\n- Stylish chat bubbles (customizable colors, rounded corners, shadows)\n- Suitable as a screenshot asset generator\n- Appearance can be easily customized via CSS\n\n### 🚀 How to use\n\n1. Open a Markdown file in VS Code (for example, `sample.md`)\n2. Open the Command Palette with `Ctrl+Shift+P`\n3. Run `ChatView: Preview display`\n4. A chat-style preview will open in a webview\n\n### 💬 Conversation markup (using @ai / @me)\n\nIn ChatView, you indicate the speaker by prefixing a line with `@ai` or `@me`. Lines starting with `@ai` are rendered as AI messages; lines starting with `@me` are rendered as user messages.\n\nExample (Markdown):\n\n```markdown\n@ai Hi — what would you like to do today?\n@me I was thinking about watching a movie.\n@ai How about \"Interstellar\"? It is very moving.\n```\n\nImportant (current behavior and updates):\n\n- Each message starts with a line that begins with `@ai` or `@me`. Subsequent lines that do not start with a prefix are treated as continuation lines for the previous bubble. In other words, you can split a long message across multiple lines and only prefix the first line.\n- Prefixes must appear at the start of the line and be lowercase `@ai` / `@me`. Lines with leading spaces or uppercase `@AI`/`@Me` are not detected.\n- A limited subset of Markdown is rendered inside bubbles (headings `#`, bold `**`, italic `*`, inline code `` ` ``, unordered lists `-`, ordered lists, blockquotes `\u003e`, links `[text](url)`, etc.).\n- For SVG export the Markdown formatting is stripped and plain text is used. HTML/PNG export and the preview support simple Markdown rendering.\n\n### 🎨 Customizing appearance (important)\n\n- The UI styling is defined mainly in `media/style.css`. Edit that file locally to try different appearances.\n- Note:\n  - In a development environment (clone the repo and run the extension host via F5 in VS Code), editing `media/style.css` and reopening the preview will reflect the changes.\n  - If you installed the published extension from the Marketplace, editing `media/style.css` in your local copy will not update the installed extension. To change the published behavior you need to modify the source, rebuild, and republish / reinstall the extension.\n\n---\n\n## 🧑‍💻 Developer Guide\n\n### 📦 Project layout\n\n```text\nchatview/\n├── src/extension.ts       // Extension entry: generates the webview HTML\n├── media/style.css        // Chat UI styling (colors, layout, fonts)\n├── media/script.js        // Webview script that parses Markdown and generates messages (supports continuation lines and limited Markdown inside bubbles)\n├── sample.md              // Example Markdown for testing\n├── .vscode/launch.json    // Debug configuration\n├── .vscode/tasks.json     // Build/dev tasks (e.g. `npm: watch` for TS watch)\n├── tsconfig.json          // TypeScript compiler settings\n└── package.json           // Extension metadata\n```\n\n### 🛠 Local development\n\nPrerequisites:\n\n```powershell\ngit clone https://github.com/keides2/chatview.git\ncd chatview\nnpm install\n```\n\nRunning and testing (including CSS changes):\n\n1. Open the project in VS Code\n2. Press `F5` to start the Extension Development Host (a debug window)\n3. In the debug window open `sample.md`, then run `Ctrl+Shift+P` → `ChatView: Preview display`\n4. If you edit `media/style.css`, close and reopen the preview or reload the extension host window (Developer: Reload Window / `Ctrl+R`) to see the updates\n\nNotes:\n\n- Editing CSS only does not require rebuilding TypeScript. However, if the extension is already running you must reload or reopen the preview to apply CSS changes.\n- If you change the DOM structure (message classes/elements), edit `media/script.js` as needed.\n\n### 🔧 Example HTML/CSS\n\n```html\n\u003cdiv class=\"message ai\"\u003eHi — what would you like to do today?\u003c/div\u003e\n\u003cdiv class=\"message me\"\u003eI was thinking about watching a movie.\u003c/div\u003e\n```\n\n```css\n.message {\n  padding: 10px 14px;\n  border-radius: 14px;\n  max-width: 75%;\n}\n.ai { background: #e0f7fa; }\n.me { background: #a5d6a7; text-align: right; }\n```\n\n---\n\n## 📥 Installation\n\n### Requirements\n\n- **Visual Studio Code**: version 1.103.0 or later\n\n### From the Marketplace\n\n1. Search for \"ChatView\" in the Extensions view in VS Code\n2. Install and start using it\n\n### From source (for developers)\n\n1. Clone the repo\n2. Run `npm install` to install dependencies\n3. Press `F5` to run the extension host\n\n---\n\n## 🧾 Important note about Puppeteer rendering\n\nHigh-quality image export (rendering the extension's HTML and taking screenshots) relies on Headless Chrome / Chromium via Puppeteer. This repository uses `puppeteer-core` to keep the package lightweight and expects Chrome/Chromium to be available on the user's machine.\n\n### Why `puppeteer-core`?\n- `puppeteer-core` does not include a browser binary, which keeps the extension package small.\n- Including full `puppeteer` triggers an automatic Chromium download which can drastically increase package size.\n\n### Requirements\n- A Chrome or Chromium binary must be installed on the machine.\n- Set the extension configuration `chatPreview.puppeteerExecutablePath` to the browser executable path, or ensure the browser is discoverable on PATH.\n\nExample (settings.json):\n\n```json\n\"chatPreview.puppeteerExecutablePath\": \"C:\\\\Program Files\\\\Google\\\\Chrome\\\\Application\\\\chrome.exe\"\n```\n\n### Local testing (quick example)\n\n1. Install dependencies (developer):\n\n```powershell\nnpm install\n```\n\n2. If you're using `puppeteer-core`, make sure Chrome is available and `chatPreview.puppeteerExecutablePath` is set.\n\n3. Run the included test script:\n\n```powershell\nnode scripts\\\\puppeteer-test.js\n```\n\nThis will create `out/puppeteer-test.png` with a screenshot.\n\n---\n\n## 📄 License\n\nMIT License\nSee the `LICENSE` file for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkeides2%2Fchatview","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkeides2%2Fchatview","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkeides2%2Fchatview/lists"}