Chatbox scrolling bar

Dash Python
1

Hi !

I have a simple chatbox here :

import dash
from dash import html, dcc
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output
import plotly.express as px
import pandas as pd
import openai

# Authentication for OpenAI GPT (Make sure to replace with your own API key)

app = dash.Dash(__name__, external_stylesheets=[dbc.themes.CYBORG])  # Cyborg theme gives a futuristic look

app.layout = dbc.Container([
    dbc.Row([
        dbc.Col([
            # Presentation side
            html.Div(id="presentation-content")
        ], width=8),
        
        dbc.Col([
            # Chatbox side
            html.Div(id="chat-history", style={"overflowY": "scroll", "height": "400px"}),
            dbc.InputGroup([
                dbc.Input(id="chat-input", placeholder="Type a message...", type="text"),
                dbc.Button("Send", id="send-button", color="primary"),
            ]),
        ], width=4)
    ]),
])



@app.callback(
    [Output("chat-history", "children"),
     Output("presentation-content", "children"),
     Output("chat-input", "value")],  # This is our added output
    [Input("send-button", "n_clicks")],
    [dash.dependencies.State("chat-input", "value"),
     dash.dependencies.State("chat-history", "children")]
)
def update_chatbox(n, message, chat_history):
    content = []  # This will hold our presentation content (tables, graphs, etc.)
    
    if not chat_history:
        chat_history = []
    
    if not message:
        raise dash.exceptions.PreventUpdate
    
    response = openai.Completion.create(
      model="text-davinci-002",
      prompt=message,
      max_tokens=100
    )
    
    chat_history.append(html.Div(f"User: {message}"))
    chat_history.append(html.Div(f"ChatGPT: {response.choices[0].text.strip()}"))
    
    if "@bar" in message:
        fig = px.bar(pd.DataFrame({"x": ["A", "B", "C"], "y": [1, 3, 2]}), x="x", y="y")
        content.append(dcc.Graph(figure=fig))
    
    if "@table" in message:
        table = dbc.Table.from_dataframe(pd.DataFrame({"A": [1, 2, 3], "B": [4, 5, 6]}))
        content.append(table)
    
    return chat_history, content, ""  # Returning an empty string to reset the chat-input


if __name__ == '__main__':
    app.run_server(debug=True, port = 8052)

It’s a bit annoying that the scrolling bar for the chatbox doesn"t match the conversation it means the lastest answer are displayed not the first then we don"t have to scroll over it.
Do you know how to do it ?

Thank you for your help