This is an alternative site for discovering Elm packages. You may be looking for the official Elm package site instead.
We were not able to find the expected elm-package.json file at this tag.
Tag 3.0.2
Committed At 2018-08-29 13:21:52 UTC



    The billstclair/elm-chat package implements a simple chat component, designed to be easy to add to your user interface.

    I use a WebSocket interface to feed it input, which you can see in my Archmage game.

    The example/ElmChatExample.elm is a simple self-contained UI, with separate text input areas for two chatters. It's live at

    You need to reserve space for the chat Settings record in your model:

    type alias Model =
        { ...
        , chatSettings : ElmChat.Settings
        , ...

    You need three messages, one to send chat input, one to update the settings, and one to receive chat input from the other side.

    type Msg
       = ...
       | ChatUpdate Settings (Cmd Msg)
       | ChatSend String Settings
       | ChatReceive String
       | ...

    When you initialize your model, create a Settings record:

    init : ( Model, Msg )
    init =
        ( { ...
          , chatSettings = ElmChat.makeSettings "chatid" 14 True ChatUpdate
          , ...

    Inside your view function, create a chat display area: model.chatSettings

    And an input box:

    ElmChat.inputBox 40 "Send" ChatSend model.chatSettings

    Handle the messages in your update function.

    update : Msg -> Model -> ( Model, Cmd Msg )
    update msg model =
        case msg of
            ChatUpdate settings cmd ->
                ( { model | chatSettings = settings }
                , cmd
            ChatSend line settings ->
                update (ChatUpdate settings (sendLine line model)) model
            ChatReceive line ->
                let (settings, cmd) = ElmChat.addChat settings line
                    update (ChatUpdate settings cmd) model

    Where sendLine is a function you write that returns a Cmd to send the line over the wire.

    You can style the UI components with the Settings.attributes property. See the code for details.

    Bill St. Clair
    24 September, 2017