Genie Discord forum

Hello, im trying to create a "terminal" inside the webpage where users can type messages and then have a scrolling output similar to how the REPL works. I was hoping the chatmessage feature worked (or the dialog component in Quasar).

what's the issue here?

chatmessage component in stipple works. I have tested it sometime back

Sorry, I instead got the scrollarea to work instead and just out a text input under it. Though would you know how to update the scroll area whenever new information is added to it?

scroll area doesn't have a reactive property that you can update via julia's reactive field

the text is basically added between the tags like inner html

here

Is there some other component I could use that mimics that ability or would chatmessage be my best bet?

Appreciate all the help

what are you using for input?

terminal input?

I think for repl it makes more sense to use chatmessage

> says this
> says that

you can check this for implementation:https://github.com/GenieFramework/StippleUI.jl/issues/88

The terminal is basically controlling a laser by serial connection. So it's just a serial terminal. I will try this out though!

So 2 things,

1. Its not reactive to new messages in the vector unless I refresh the page.

2. It is just adding to the window and not actually creating an area that can be scrolled/contained.

Maybe the following example can be of help: https://github.com/GenieFramework/StippleUI.jl/pull/87#issuecomment-1415519757

You have to look for the last example on that page

I get the following error...

UndefVarError: chatmessage not defined

I can run the quasar version in the previous example but not chatmessage(), Is this something to do with it being developmental?

Indeed, I didn't realise that it's currently on master. please ]add StippleUI#master and probably ]add Stipple#master for the time being

Thank you very much!

Is there a way for me to contain this in a separate scroll area? or should i just have a circularbuffer that it pushes too?

why not add chatmessage as a child element of scrollarea?

ofc this is html but you get an idea? Not exactly same but similar: https://github.com/quasarframework/quasar/issues/6167

You'll need to convert it to julia stipple code

<q-scroll-area ref="chatArea" @scroll="scrollinfo" >
      <div v-for="item of message" :key="item.id">
         <q-chat-message :name="item.nickname" :text="[item.content]" :stamp="item.createTime" />
       </div>
    <q-scroll-observer /> <!-- 监控滑动区域，主要监控滑动条的长度。绑定scroll方法 -->
</q-scroll-area>

I'll definitely try it out! I didn't know if I could use scrollarea since it's not reactive, but that's likely my misunderstanding of how it works.

Hopefully last question regarding this, How would i implement "setScrollPercentage" for the scroll area, I see that the example uses @click but im not sure how to implement that.

Just added a "ScrollArea Demo.jl" to StippleDemos.jl

https://github.com/GenieFramework/StippleDemos/blob/master/ReactiveTools%20API/ScrollArea%20Demo.jl

The important thing is the ref attribute which is then used in the javascript call:

# ScrollArea Demo

using Stipple, Stipple.ReactiveTools
using StippleUI

@appname ScrollDemo

@app begin
    @in position = 300
    @in scroll = false

    @onbutton scroll begin
        run(__model__, "this.\$refs.scrollArea.setScrollPosition($position, 500)")
        position = rand(0:1000)
    end
end

ui() = [
    heading("Scroll Area Demo" * h4("with server-side and client-side update"))
    
    row(cell(class = "st-module", [
    
        row(class = "row q-gutter-md q-mb-md", [
            btn(R"`Scroll to ${position}px`", color = "primary", @click(raw"() => this.$refs.scrollArea.setScrollPosition(position)"))
            btn(R"`Animate to ${position}px`", color = "primary", @click(:scroll))
        ])

        scrollarea(ref = "scrollArea", style = "height: 150px; max-width: 300px;",
            ol(
                li(@recur("n in 1000"), key! = "n", "Lorem ipsum dolor sit amet, consectetur adipisicing elit.")
            )
        )
    ]))
]

route("/") do 
    model = @init
    page(model, ui()) |> html
end
    
up(open_browser = true)

Thank you so much!

Really appreciate the help from you and the team!