{"id":13626408,"url":"https://github.com/adifyr/obsidian-chat-view","last_synced_at":"2026-01-07T07:05:29.217Z","repository":{"id":40662926,"uuid":"471781877","full_name":"adifyr/obsidian-chat-view","owner":"adifyr","description":"An elegant chat view for Obsidian pages.","archived":false,"fork":false,"pushed_at":"2023-02-02T15:54:10.000Z","size":11610,"stargazers_count":202,"open_issues_count":8,"forks_count":11,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-11-08T16:43:26.652Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/adifyr.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}},"created_at":"2022-03-19T18:35:32.000Z","updated_at":"2024-11-06T04:31:09.000Z","dependencies_parsed_at":"2023-02-17T21:45:59.904Z","dependency_job_id":null,"html_url":"https://github.com/adifyr/obsidian-chat-view","commit_stats":null,"previous_names":[],"tags_count":11,"template":false,"template_full_name":"obsidianmd/obsidian-sample-plugin","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adifyr%2Fobsidian-chat-view","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adifyr%2Fobsidian-chat-view/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adifyr%2Fobsidian-chat-view/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adifyr%2Fobsidian-chat-view/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/adifyr","download_url":"https://codeload.github.com/adifyr/obsidian-chat-view/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249250821,"owners_count":21237961,"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":[],"created_at":"2024-08-01T21:02:17.574Z","updated_at":"2026-01-07T07:05:29.205Z","avatar_url":"https://github.com/adifyr.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# Obsidian Chat View Plugin\r\nChat View let's you quickly and easily create elegant Chat UIs in your Markdown Files.\r\n\r\n![Obsidian Chat View Overview](https://github.com/adifyr/obsidian-chat-view/raw/master/images/obsidian_chatview_plugin.jpg)\r\n\r\n## Usage\r\n\r\nEvery chat message must be prefixed with a `'\u003c'`, `'\u003e'` or `'^'` for left, right \u0026 center aligning the messages respectively. Each chat message consists of 3 parts: The header, message and the subtext. The parts are separated by a `'|'` character. Take a look at the example below to see how it works:\r\n~~~\r\n```chat\r\n\u003c Fitzwilliam Darcy | I've fought against my judgement, my family's expectations... The inferiority of your birth, my rank and circumstance. | 23rd July, 1846 at 5:42 PM\r\n\u003e Elizabeth Bennett | Now hold on, Mr. Darcy, I'm afraid I don't understand where you're going with this. | 23rd July, 1846 at 5:42 PM\r\n```\r\n~~~\r\nThe above code will generate the following Chat View:\r\n\r\n![Chat View Preview 1](https://github.com/adifyr/obsidian-chat-view/raw/master/images/chatview_preview1.jpg)\r\n\r\n💡 **If you would like to show the pipe `|` character in your message, all you have to do is escape it with a backslash, like this: `\\|`.**\r\n\r\n## Add Delimiters \u0026 Comments\r\nYou can add delimiters to your chat view simply by entering `'...'` on a line. To add a comment, start a line with the `'#'` character. Take a look at the following example:\r\n\r\n~~~\r\n```chat\r\n\u003c Fitzwilliam Darcy | Just listen to me, all right? You simply cannot fathom the amount of courage I've had to muster to say this.\r\n# Lizzie gazed at Darcy with a baffled look on her face. Darcy was now sweating profusely. This only unsettled her even more. What was happening?\r\n\u003e Elizabeth Bennett | Mr. Darcy, are you all right? Why did you come here?\r\n...\r\n\u003c Fitzwilliam Darcy | I came here to tell you that I'm in love with you. I'm deeply, unabashedly, utterly in love with you.\r\n```\r\n~~~\r\n\r\nThe above code will generate the following Chat View:\r\n\r\n![Chat View Preview 2](https://github.com/adifyr/obsidian-chat-view/raw/master/images/chatview_preview2.jpg)\r\n\r\nAs you may have noticed, I've actually left out the subtext from these messages. The Chat View plugin is flexible that way. You can also leave out the header if you like just by starting the message off with the `'|'` character. For example, the following code:\r\n\r\n~~~\r\n```chat\r\n\u003c Fitzwilliam Darcy | And I care not for the consequences of what I'm about to do.\r\n\u003c | Elizabeth Bennett, will you marry me? | 23rd July 1846, 5:51 PM\r\n```\r\n~~~\r\n\r\nWill result in the Chat View seen below:\r\n\r\n![Chat View Preview 3](https://github.com/adifyr/obsidian-chat-view/raw/master/images/chatview_preview3.jpg)\r\n\r\n## Customization\r\nTo add that last bit of organization \u0026 pizazz, the plugin also includes the ability to customize the header size, header colors and maximum width of the chat bubbles. Here's how you can configure each of them for your Chat View:\r\n\r\n- ### Header Size\r\n    Chat View allows you to choose from 5 different sizes for your Chat Bubble's header: `[h2, h3, h4, h5, h6]`. This can be done by simply adding the following config line to your code block: `{header=\u003chX\u003e}`.\r\n\r\n- ### Header Color\r\n    You can also change the color of headers speaker-wise. You may choose from upto 13 colors: `[red, green, blue, yellow, orange, purple, grey, brown, indigo, teal, pink, slate, wood]`. This can be done by adding a color configuration like this to your code block: `[Person Name=color, Person Name=color]`.\r\n\r\n- ### Max Width\r\n    The maximum width of the Chat Bubble can be specified by adding the following to your config line: `{..., mw=width}`. The plugin accepts 9 widths (in percentages) from 50% to 90% at an interval of 5%. Namely: `[50, 55, 60, 65, 70, 75, 80, 85, 90]`.\r\n\r\nThe below example showcases how all three of these work in tandem.\r\n~~~\r\n```chat\r\n{header=h3, mw=75}\r\n[Elizabeth Bennett=blue, Fitzwilliam Darcy=yellow]\r\n\r\n\u003e Elizabeth Swann | I... But what about... You can't be serious, Mr. Darcy. This is preposterous. After all we've been through, I thought...\r\n\u003e | Yes. I will marry you. | 23rd July, 1846 at 6:02 PM.\r\n# Darcy had no words left. They'd reached a point beyond all mannerisms, all formalities. All that was left was raw love. Only it could speak next.\r\n\u003c Fitzwilliam Darcy | I love you Lizzie. With all my heart. And I will do so for as long as we shall be together. | 23rd July, 1846 at 6:04 PM.\r\n```\r\n~~~\r\n\r\nThe above code will generate the following Chat View:\r\n\r\n![Chat View Preview 4](https://github.com/adifyr/obsidian-chat-view/raw/master/images/chatview_preview4.jpg)\r\n\r\n## WebVTT Support!\r\n\r\nAs of Version 1.2.0, Obsidian Chat View now supports the WebVTT format! Instead of the regular `chat` header, give your code block the name `chat-webvtt`. Then paste your WebVTT code in there! There are a few things to keep in mind:\r\n\r\n1. Please ensure that you are correctly following the WebVTT format. Make sure your code starts with `WEBVTT` on the first line.\r\n2. You can customize the Chat View by using metadata. **There should be no empty line between the `WEBVTT` and your metadata.**\r\n3. You may set the `Self` parameter in your metadata to a comma-separated list of names. All chat bubbles from the aforementioned names will appear on the right hand side as opposed to the default, which is left, to indicate that the specified persons' chats are in First-Person.\r\n4. The plugin only recognizes voice tags (`\u003cv\u003e\u003c/v\u003e`) in a cue's body. Anything else will be treated as regular text.\r\n\r\nFollowing is an example of a Chat View generated by WebVTT code.\r\n\r\n~~~\r\n```chat-webvtt\r\nWEBVTT\r\nSelf: John Smith, fjorn@gmail.com\r\nMaxWidth: 70\r\nHeader: h3\r\n\r\n00:00:00.000 --\u003e 00:01:04.270\r\n\u003cv John Smith\u003eNo one touch it, it just works. It is the definition of an absolutely perfect Chat View. Do not defile it! Or else...\u003c/v\u003e\r\n\r\n00:00:05.790 --\u003e 00:00:06.930\r\n\u003cv John Smith\u003eGoing forward, obviously.\u003c/v\u003e\r\n\r\n00:00:04.310 --\u003e 00:00:04.940\r\n\u003cv Bob Anderson\u003eUhm?\u003c/v\u003e\r\n\r\n00:00:04.310 --\u003e 00:00:04.940\r\n\u003cv fjorn@gmail.com\u003eUhm - would be correct! I have no idea what John is talking about!\u003c/v\u003e\r\n```\r\n~~~\r\n\r\nThe above code will generate the following Chat View:\r\n\r\n![Chat View WebVTT Preview](https://github.com/adifyr/obsidian-chat-view/raw/master/images/chatview_preview_webvtt.jpg)\r\n\r\n## Minimal Mode\r\n\r\nAs of the release of Version 1.2.0, the Chat View plugin now supports minimal mode. You can enable minimal mode by adding the following to the config line of your code block: `{..., mode=minimal}`. This will generate a Chat View with no bubbles and condensed spacing making it look more like a forum thread. The following example shows minimal mode in action:\r\n\r\n~~~\r\n```chat\r\n{mw=90,mode=minimal}\r\n[Albus Dumbledore=teal, Minerva McGonagall=pink]\r\n\r\n\u003c Albus Dumbledore | I should've known you would have been around Professor McGonagall. Couldn't resist seeing the boy after all, could you? | 25th April 1982 at 2:06 AM\r\n\u003c Minerva McGonagall | Good evening Professor Dumbledore. Tell me, are the rumors really true? | 25th April 1982 at 2:07 AM\r\n\u003c Albus Dumbledore | I'm afraid they are professor. Both, the good and the bad. Hagrid is bringing the boy as we speak. | 25th April 1982 at 2:08 AM\r\n```\r\n~~~\r\n\r\nThe code block above will generate the following Chat View:\r\n\r\n![Chat View Minimal Mode](https://github.com/adifyr/obsidian-chat-view/raw/master/images/chatview_preview_minimal.jpg)\r\n\r\n## Markdown \u0026 HTML Support In Chat View Message\r\n\r\nFollowing the release of Version 1.3.0 of the Chat View Plugin, the message section of the Chat View now supports HTML and Markdown rendering! Which means you can now include HTML and Markdown elements in your Chat View Message! **Take a look:**\r\n\r\n![Chat View Markdown \u0026 HTML Support](https://github.com/adifyr/obsidian-chat-view/blob/master/images/chatview_preview_md_html.gif)\r\n\r\nThe above Chat View was generated from the following Code Block:\r\n\r\n~~~\r\n```chat\r\n[Brian Williams=pink, Stacy Adams=orange]\r\n{mw=80}\r\n\u003c Brian Williams | \u003ch6\u003ePier Trip Suggestions\u003c/h6\u003e Hi Stacy, I'm planning to go on a trip to a pier in the state! So, I wanted to ask if you had any suggestions. I have a couple of pre-conditions though: \u003cul\u003e\u003cli\u003eIt needs to be a beautiful spot. [So that I can take loads of pics!](https://theculturetrip.com/north-america/usa/california/articles/the-coolest-piers-in-california-from-santa-monica-to-santa-barbara/)\u003c/li\u003e\u003cli\u003eIt needs to be affordable. [This one's kinda expensive.](https://www.tripadvisor.in/Attraction_Review-g60713-d102779-Reviews-Pier_39-San_Francisco_California.html)\u003c/li\u003e\u003c/ul\u003e **So, can you please help me out?** I'll be sure to send over a souvenir. Thanks! | Yesterday at 5:45 PM\r\n\u003e Stacy Adams | ![Santa Monica Pier](https://images.hdqwalls.com/wallpapers/santa-monica-ferris-wheel-colorful-golden-hour-hz.jpg) \u003ch6\u003eHow About Santa Monica?\u003c/h6\u003e Jutting out into the Pacific Ocean at the intersection of Ocean and Colorado, it symbolizes the *Heart of Santa Monica* and is one of the most photographed locations in the world. It also has affordable rentals and accomodation! | Today at 10:30 AM\r\n```\r\n~~~\r\n\r\n### ⚠️ Important\r\nMarkdown Syntax that covers a full line, such as headers (#), Lists (-), Line Breaks (---) etc. will end up rendering the entire Chat View Message in that format. For such cases, it is recommended to use HTML Tags instead, as has been used in the example above. \r\n\r\n---\r\n\r\n## Chat Transcripts (Zendesk, Customer Support, CRMs) Support!\r\n\r\nAs of Version 1.4.0, Obsidian Chat View now includes a new mode that enables the rendering of Chat Transcripts from Customer Support Platforms such as Zendesk and other CRMs. To use Transcript Mode simply give your code-block the name of `chat-transcript`. Below is an example of the Chat Transcripts format:\r\n\r\n```\r\n(1:38:05 PM) *** Firstname Lastname has joined the chat ***\r\n(1:38:39 PM) Firstname Lastname: This is the chat-text followed after the time and name.\r\n(1:40:26 PM) Other-Firstname Other-Lastname: Sure thanks!\r\n(2:21:29 PM) *** Firstname Lastname has left ***\r\n```\r\n\r\nHowever, in the plugin, Transcript Mode includes all the same styling \u0026 formatting features as other chat modes. It even has delimiters There are a few additions however:\r\n\r\n1. The `\u003e` character is now used in the beginning of the code-block to specify which participants should have their Chat View blocks aligned on the left side.\r\n2. Chat Transcripts supports both `()` and `[]` for its timestamps.\r\n3. Two kinds of comment formats are allowed in the plugin:\r\n    a. `(2:21:29 PM) *** Firstname Lastname has left ***` - One with the timestamp and the three stars: `***`\r\n    b. Any line in the code block that doesn't follow a valid Transcript format (`[Timestamp] Name: Message`), it will also be treated as a comment.\r\n\r\nAll of this culminates into the kind of Chat View you can see below:\r\n\r\n~~~\r\n```chat-transcript\r\n\u003e Other-Firstname Other-Lastname\r\n[Firstname Lastname=blue, Other-Firstname Other-Lastname=pink]\r\n{header=h4, mw=80}\r\n\r\n(1:38:05 PM) *** Firstname Lastname has joined the chat. ***\r\n(1:38:39 PM) Firstname Lastname: This is the chat-text followed after the time and name.\r\n...\r\n[1:40:26 PM] Other-Firstname Other-Lastname: Sure thanks! It's nice to have been able to meet someone who could help me with this.\r\nFirstname Lastname has left this chat.\r\n```\r\n~~~\r\n\r\nThe above code-block will render the following Chat View:\r\n\r\n![Chat View With Transcripts Support](https://user-images.githubusercontent.com/86793553/206829253-6c4da4ff-3537-458d-ab45-c501d1f43262.png)\r\n\r\n## Thank you for reading!\r\n\r\nThis project is published under the [MIT License](LICENSE).\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadifyr%2Fobsidian-chat-view","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fadifyr%2Fobsidian-chat-view","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadifyr%2Fobsidian-chat-view/lists"}