Chat UI in fastHTML

Python module for implementing chat UI in fastHTML

Chat App initialization

Start by creating the chat application with FastHTML.

For running while testing with Jupyter notebook, use the JupyUvi in fasthtml to run in separate thread.

from fasthtml.jupyter import *

server = JupyUvi(app=app)

server.stop()

Chat components

Basic chat UI components can include Chat Message and a Chat Input. For a Chat Message, the important attributes are the actual message (str) and the role of the message owner (user - boolean value whether the owner is the user, not the AI assistant).

source

ChatMessage

 ChatMessage (msg:str, user:bool)

	Type	Details
msg	str	Message to display
user	bool	Whether the message is from the user or assistant

For the chat input, set the name for submitting a new message via form.

source

ChatInput

 ChatInput ()

Action Buttons

Simple actions for creating a new message from the user side.

source

ActionButton

 ActionButton (session_id:str, content:str, message:str=None)

	Type	Default	Details
session_id	str		Session ID to use
content	str		Text to display on the button
message	str	None	Message to send when the button is clicked

source

ActionPanel

 ActionPanel (session_id:str)

	Type	Details
session_id	str	Session ID to use

Tools panel

Sidebar-panel for displaying current list of available (loaded) tools in a user-session.

source

ToolPanel

 ToolPanel (session_id:str)

	Type	Details
session_id	str	Session ID to use

Notifications

The idea of sending notifications from a background task / websocket with FastHTML is to send an HTMX update, then detect and extract information from the event via a document event listener.

source

NotiButton

 NotiButton (session_id:str)

	Type	Details
session_id	str	Session ID to use

source

NotiMessage

 NotiMessage (message:str='No message')

	Type	Default	Details
message	str	No message	Message to display

Router

Home page

The home page should contain our message list and the Chat Input. The main page can be extracted by accessing the index (root) endpoint.

def click_here(): return a('Click here', href='https://example.com', target='_blank')

source

index

 index (session)

Notification websockets

source

noti_disconnect

 noti_disconnect (ws)

Remove session ID from session notification sender on websocket disconnect

source

wsnoti

 wsnoti (ws, send, session_id:str)

Test usage:

#first_noti_sender = list(session_notis.values())[0][0]
#first_noti_sender("Test message.")

Chat websockets

When connecting to websockets for chat, this function should:

Extract the new and all previous chat history
Prompt & get answers from ChatGPT from all these messages
Return a new ChatMessage

source

chat_disconnect

 chat_disconnect (ws)

Remove session ID from session messages and tools on websocket disconnect

source

wschat

 wschat (ws, msg:str, send, session_id:str)

Static files

In case the user needs to display images, serves files from directory ../data.

source

get_file

 get_file (file_name:str)

Serve files dynamically from the ‘data’ directory.