{"id":15048760,"url":"https://github.com/xueelf/docsify-chat","last_synced_at":"2025-04-10T01:33:52.205Z","repository":{"id":57685891,"uuid":"489702280","full_name":"xueelf/docsify-chat","owner":"xueelf","description":"A docsify plugin for generate chat panel from markdown.","archived":false,"fork":false,"pushed_at":"2024-05-17T03:58:50.000Z","size":52,"stargazers_count":16,"open_issues_count":2,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-05-20T21:28:02.488Z","etag":null,"topics":["chat","docsify","markdown","plugin"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/xueelf.png","metadata":{"files":{"readme":"README.md","changelog":null,"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}},"created_at":"2022-05-07T14:52:33.000Z","updated_at":"2024-05-04T15:12:33.000Z","dependencies_parsed_at":"2024-09-24T21:16:05.333Z","dependency_job_id":null,"html_url":"https://github.com/xueelf/docsify-chat","commit_stats":null,"previous_names":["dcyuki/docsify-chat"],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xueelf%2Fdocsify-chat","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xueelf%2Fdocsify-chat/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xueelf%2Fdocsify-chat/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xueelf%2Fdocsify-chat/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xueelf","download_url":"https://codeload.github.com/xueelf/docsify-chat/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248140872,"owners_count":21054363,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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","docsify","markdown","plugin"],"created_at":"2024-09-24T21:16:03.959Z","updated_at":"2025-04-10T01:33:52.181Z","avatar_url":"https://github.com/xueelf.png","language":"TypeScript","readme":"# docsify-chat\n\nA docsify plugin for generate chat panel from markdown\n\nRead this in other languages: English | [简体中文](./README.zh.md)\n\n```markdown\n\u003c!-- chat:start --\u003e\n\n#### **Yuki**\n\nHello\n\n#### **Robot**\n\nCiallo ～(∠·ω\u003c )⌒★\n\n\u003c!-- chat:end --\u003e\n```\n\n![docsify_chat](https://cdn.sa.net/2024/12/09/cI9ewyEFLNG6roZ.png)\n\n## Installation\n\n1. Add the docsify-chat plugin to your `index.html` after docsify.\n\n   ```html\n   \u003c!-- Docsify --\u003e\n   \u003cscript src=\"//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js\"\u003e\u003c/script\u003e\n\n   \u003c!-- Docsify Chat --\u003e\n   \u003cscript src=\"//cdn.jsdelivr.net/npm/docsify-chat/lib/docsify-chat.min.js\"\u003e\u003c/script\u003e\n   ```\n\n2. Review the [Options](#options) section and configure as needed.\n\n   ```javascript\n   window.$docsify = {\n     // ...\n     chat: {\n       // chat panel title\n       title: \"Dialog\",\n       // set avatar url\n       users: [\n         { nickname: \"Yuki\", avatar: \"\" },\n         { nickname: \"Robot\", avatar: \"\" },\n       ],\n     },\n   };\n   ```\n\n## Usage\n\n1. Define a chat set using `chat:start` and `chat:end` HTML comments.\n\n   HTML comments are used to mark the start and end of a chat set.\n\n   ```markdown\n   \u003c!-- chat:start --\u003e\n\n   ...\n\n   \u003c!-- chat:end --\u003e\n   ```\n\n2. Define chat within a message set using heading + bold markdown.\n\n   Heading text will be used as the user nickname, and all proceeding content will be associated with that chat up to start of the next message or a `chat:end` comment.\n\n   ```markdown\n   \u003c!-- chat:start --\u003e\n\n   #### **Yuki**\n\n   hello\n\n   #### **Robot**\n\n   hello world\n\n   \u003c!-- chat:end --\u003e\n   ```\n\n3. Generate and display your chat panel.\n\n   If you do not specify a user avatar, the initials of the nickname will be displayed by default.\n\n   ![example](/example.svg)\n\n## Options\n\nOptions are set within the [`window.$docsify`](https://docsify.js.org/#/configuration) configuration under the `chat` key:\n\n```html\n\u003cscript\u003e\n  window.$docsify = {\n    // ...\n    chat: {\n      // chat panel title\n      title: \"Robot's chat history\",\n      // set avatars\n      users: [],\n      // message dialog on the right (myself)\n      self: \"Yuki\",\n      // animation interval (ms)\n      animation: 50,\n      // Panel navigation bar style, supporting \"mac\" and \"windows\"\n      os: \"mac\",\n    },\n  };\n\u003c/script\u003e\n```\n\n### title\n\n- Type: `string`\n- Default: `'Dialog'`\n\nSets the chat panel title.\n\nYou can also set the title for each chat panel individually in `\u003c!-- title:xxx --\u003e`.\n\n**Configuration**\n\n```javascript\nwindow.$docsify = {\n  // ...\n  chat: {\n    title: 'chat history',\n  },\n};\n```\n\n**Example**\n\n```markdown\n\u003c!-- chat:start --\u003e\n\n\u003c!-- title:Robot's chat history --\u003e\n\n\u003c!-- chat:end --\u003e\n```\n\n### users\n\n- Type: `array`\n- Default: `[]`\n\nSpecify a nickname to match the user's avatar, support network URL.\n\n**Configuration**\n\n```javascript\nwindow.$docsify = {\n  // ...\n  chat: {\n    users: [\n      { nickname: 'Yuki', avatar: 'images/yuki.png' },\n      { nickname: 'Robot', avatar: 'images/robot.png' },\n    ],\n  },\n};\n```\n\n### self\n\n\u003e Before v0.5.0, this attribute was named `\"myself\"`, but it has now been renamed 'self'.\n\n- Type: `string`\n- Default: `null`\n\nSet your own global nickname, the dialog will be displayed on the right side of the chat panel.\n\nYou can also set the user for each chat panel individually in `\u003c!-- self:xxx --\u003e`.\n\n**Configuration**\n\n```javascript\nwindow.$docsify = {\n  // ...\n  chat: {\n    self: 'Yuki',\n  },\n};\n```\n\n**Example**\n\n```markdown\n\u003c!-- chat:start --\u003e\n\n\u003c!-- self:Robot --\u003e\n\n\u003c!-- chat:end --\u003e\n```\n\n### animation\n\n- Type: `number`\n- Default: `50`\n\nAdjust the duration of the chat panel fade-in and fade-out animation.\n\n**Configuration**\n\n```javascript\nwindow.$docsify = {\n  // ...\n  chat: {\n    animation: 50,\n  },\n};\n```\n\n### os\n\n- Type: `string`\n- Default: `null`\n\nDefine the system style of the title bar, support `\"mac\"` and `\"windows\"`.\n\nIf it is not set, it will be based on the current browser `navigator Platform` Automatic rendering.\n\n**Configuration**\n\n```javascript\nwindow.$docsify = {\n  // ...\n  chat: {\n    os: 'mac',\n  },\n};\n```\n\n## Postscript\n\nBecause I wrote a chatbot framework, I needed a chat panel for illustrate. before I took screenshots directly in the software, but it felt too troublesome. I was thinking why can't it be generated directly with markdown? I've been looking for a long time, but I can't find any similar plugins, so I made one myself.\n\nIn order to save time, the syntax refers to [docsify-tabs](https://github.com/jhildenbiddle/docsify-tabs), which took only half a day to make. Although it basically meets daily use, there may be some unknown bugs.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxueelf%2Fdocsify-chat","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxueelf%2Fdocsify-chat","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxueelf%2Fdocsify-chat/lists"}