{"id":18056074,"url":"https://github.com/argyleink/chat-ui","last_synced_at":"2025-04-11T02:06:52.361Z","repository":{"id":145671886,"uuid":"117056832","full_name":"argyleink/chat-ui","owner":"argyleink","description":"💬 rich message handling chat interface for bot projects","archived":false,"fork":false,"pushed_at":"2018-08-09T16:52:35.000Z","size":3405,"stargazers_count":21,"open_issues_count":5,"forks_count":4,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-24T20:12:19.814Z","etag":null,"topics":["custom-elements","wip"],"latest_commit_sha":null,"homepage":"https://argyleink.github.io/chat-ui/","language":"JavaScript","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/argyleink.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":"2018-01-11T05:57:51.000Z","updated_at":"2025-01-20T20:16:49.000Z","dependencies_parsed_at":null,"dependency_job_id":"f46253f9-7c80-465a-94e1-8a46dfd01a5e","html_url":"https://github.com/argyleink/chat-ui","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/argyleink%2Fchat-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/argyleink%2Fchat-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/argyleink%2Fchat-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/argyleink%2Fchat-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/argyleink","download_url":"https://codeload.github.com/argyleink/chat-ui/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245957556,"owners_count":20700288,"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":["custom-elements","wip"],"created_at":"2024-10-31T01:13:29.019Z","updated_at":"2025-03-28T02:30:49.116Z","avatar_url":"https://github.com/argyleink.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Chat Component (WIP)\n\n\n\n#### Get Started\n\n- `npm i`\n- `npm start` or `npm run build:dev`\n\n\n\n\n#### Features\n\n- Web Components\n- Themeability \n- Animations\n- API\n- Link wrapping\n- Loading states\n- Minimal footprint\n- HTML, Cards, Images, Galleries: ready for more custom message renderers\n\n\n\n\n#### Themeability\n\nJust change the custom property values on the `\u003cchat-ui\u003e` node. For a list of what you can change, [find it here](https://github.com/argyleink/chat-ui/blob/master/app/css/vars.css). Or, don't use custom properties, and update the NextCSS config to compile the variables, then you can do it a more SCSSy way, and support more browsers.  \n\nBelow is an example of how much work it takes to make a dark theme with custom properties: \n\n```css\n--chat-ui_theme: hsl(0,0%,15%);\n--chat-ui_bg: hsl(0,0%,10%);\n--chat-ui_message_bg: hsl(0,0%,20%);\n--chat-ui_message_text-color: hsl(0,0%,60%);\n--chat-ui_message_bg2: hsl(0,0%,13%);\n```\n\n\n\n#### Component API\n\n#### \u003cchat-ui\u003e \n\nThis is the primary component that you should be dealing with. It has the easy API, for quick access to the most common tasks in a chat widget. You shouldn't need the API's for the other components, but you can leverage them if you want to.\n\nWARNING: I'm moving fast and not updating these docs much..\n\n\n\n**Add Message**\n\n```javascript\ndocument.querySelector('chat-ui')\n  .newMessage({\n    mine:     false,  // is this new message the user or user's friend\n    type:     'HTML', // currently supports ['HTML', 'Text', 'Card', 'Image', 'Gallery']\n    contents: '\u003cb\u003eHello\u003c/b\u003e!\u003cbr\u003eLook HTML works 👍',\n    author:   { \n      name:   'Turbo',\n      avatar: 'https://cdn.dribbble.com/users/37530/screenshots/2937858/drib_blink_bot.gif' \n    },\n})\n```\n\n\n\n**Listen to what the user wrote**\n\n```javascript\ndocument.querySelector('chat-ui')\n  .addEventListener('outbound-message', payload =\u003e\n    console.info('custom event from component', payload))\n```\n\n\n\n**Friend is writing**\n\n```javascript\ndocument.querySelector('chat-ui')\n  .writing()\n```\n\n\n\n**Friend has stopped writing**\n\n```javascript\ndocument.querySelector('chat-ui')\n  .writing(false)\n```\n\n\n\n\n\n------\n\n#### \u003cchat-message\u003e\n\n**SET message**\n\nObject will pass through the messaging renderer and properly be displayed in the thread\n\n```javascript\ndocument.querySelector('chat-message')\n  .message = {...}\n```\n\n\n\n#### \u003cchat-cluster\u003e\n\n**add()**\n\nAppends a message to the cluster\n\n```javascript\ndocument.querySelector('chat-cluster')\n  .add({...})\n```\n\n\n\n#### \u003cchat-scrollview\u003e\n\n**scrollToLatest()**\n\nScrolls to the beginning of the chat\n\n```javascript\ndocument.querySelector('chat-scrollview')\n  .scrollToLatest()\n```\n\n\n\n#### \u003cchat-authoring\u003e \n\n**send()**\n\nWill send current edited contents\n\n```javascript\ndocument.querySelector('chat-authoring')\n  .send()\n```\n\n\n\n#### Development\n\n- Webpack\n- CSS4 (postcss + cssnext)\n- ES6","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fargyleink%2Fchat-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fargyleink%2Fchat-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fargyleink%2Fchat-ui/lists"}