{"id":20303898,"url":"https://github.com/billstclair/elm-chat","last_synced_at":"2025-10-16T09:50:59.750Z","repository":{"id":62418376,"uuid":"104686003","full_name":"billstclair/elm-chat","owner":"billstclair","description":"A simple chat component that is easy to add to your Elm user interface.","archived":false,"fork":false,"pushed_at":"2018-08-29T13:22:29.000Z","size":46,"stargazers_count":6,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-06T23:48:26.858Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Elm","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/billstclair.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":"2017-09-25T00:23:58.000Z","updated_at":"2020-09-10T17:59:26.000Z","dependencies_parsed_at":"2022-11-01T16:46:17.530Z","dependency_job_id":null,"html_url":"https://github.com/billstclair/elm-chat","commit_stats":null,"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/billstclair%2Felm-chat","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/billstclair%2Felm-chat/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/billstclair%2Felm-chat/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/billstclair%2Felm-chat/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/billstclair","download_url":"https://codeload.github.com/billstclair/elm-chat/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248412089,"owners_count":21099048,"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-11-14T16:41:37.036Z","updated_at":"2025-10-16T09:50:54.716Z","avatar_url":"https://github.com/billstclair.png","language":"Elm","funding_links":[],"categories":[],"sub_categories":[],"readme":"The [billstclair/elm-chat](http://package.elm-lang.org/packages/billstclair/elm-chat/latest) package implements a simple chat component, designed to be easy to add to your user interface.\n\nI use a WebSocket interface to feed it input, which you can see in my [Archmage game](https://github.com/billstclair/archmage/).\n\nThe [example/ElmChatExample.elm](example/ElmChatExample.elm) is a simple self-contained UI, with separate text input areas for two chatters. It's live at [gibgoygames.com/elm-chat](https://gibgoygames.com/elm-chat/).\n\nYou need to reserve space for the chat `Settings` record in your model:\n\n    type alias Model =\n        { ...\n        , chatSettings : ElmChat.Settings\n        , ...\n        }\n        \nYou need three messages, one to send chat input, one to update the settings, and one to receive chat input from the other side.\n\n    type Msg\n       = ...\n       | ChatUpdate Settings (Cmd Msg)\n       | ChatSend String Settings\n       | ChatReceive String\n       | ...\n       \nWhen you initialize your model, create a `Settings` record:\n\n    init : ( Model, Msg )\n    init =\n        ( { ...\n          , chatSettings = ElmChat.makeSettings \"chatid\" 14 True ChatUpdate\n          , ...\n          }\n          \nInside your view function, create a chat display area:\n\n    ElmChat.chat model.chatSettings\n  \nAnd an input box:\n\n    ElmChat.inputBox 40 \"Send\" ChatSend model.chatSettings\n  \nHandle the messages in your `update` function.\n\n    update : Msg -\u003e Model -\u003e ( Model, Cmd Msg )\n    update msg model =\n        case msg of\n            ...\n            ChatUpdate settings cmd -\u003e\n                ( { model | chatSettings = settings }\n                , cmd\n                )\n            ChatSend line settings -\u003e\n                update (ChatUpdate settings (sendLine line model)) model\n            ChatReceive line -\u003e\n                let (settings, cmd) = ElmChat.addChat settings line\n                in\n                    update (ChatUpdate settings cmd) model\n            ...\n\nWhere `sendLine` is a function you write that returns a `Cmd` to send the line over the wire.\n\nYou can style the UI components with the `Settings.attributes` property. See the code for details.\n\nBill St. Clair\u003cbr/\u003e\n24 September, 2017\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbillstclair%2Felm-chat","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbillstclair%2Felm-chat","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbillstclair%2Felm-chat/lists"}