ScrollArea

message-list.ts

import { FlexLayout, QBoxLayout, QLabel, QScrollArea, QWidget, ScrollBarPolicy } from "@nodegui/nodegui"
import { Color, Space, TextSize } from "../style/variables"

class MessageList extends QScrollArea {
	constructor() {
		super()

		this.setVerticalScrollBarPolicy(ScrollBarPolicy.ScrollBarAlwaysOn)
		this.setWidgetResizable(true)
		this.setInlineStyle(`
			flex: 1;
		`)

		const container = new QWidget()
		container.setLayout(new FlexLayout())
		container.setInlineStyle(`
			background-color: ${Color.white};
			flex-direction: column;
			padding: ${Space.md};
        `)

		container.setStyleSheet(`
        	QLabel {
		  		font-size: ${TextSize.sm};
		  		margin-bottom: ${Space.xs};
		  		min-height: 18px;
        	}
        `)

		this.setWidget(container)
	}

	addMessage(message: string, color = Color.black) {
		const label = new QLabel()
		label.setText(message)
		label.setInlineStyle(`
        	color: ${color};
        `)
		this.contentWidget?.layout?.addWidget(label)
	}
}

export default MessageList