renderchat shortcode - Open WebUI chats in Hugo sites
Introduction Since I’m using AI to help me more quickly brain dump my non-linear thoughts into a more readable format, I thought it would sometimes be handy to display Open WebUI chats in Hugo sites. This is where the renderchat shortcode comes in. Installation To use the renderchat shortcode, you can do this by creating a file in your site, layouts/shortcodes/renderchat.html, and adding the following code: {{/* renderchat.html */}} {{ $file := .Get "file" }} {{ if eq $file "" }} <p>No chat log file specified.</p> {{ return }} {{ end }} {{ $jsonResource := .Page.Resources.GetMatch $file }} {{ if not $jsonResource }} <p>Could not find the chat log file: {{ $file }}</p> {{ return }} {{ end }} {{ $json := $jsonResource | transform.Unmarshal }} {{ if not $json }} <p>Failed to parse the chat log JSON file.</p> {{ return }} {{ end }} {{ range $json }} <div class="chat-log"> <h2 class="chat-title">{{ .title }}</h2> <div class="chat-messages"> {{ $messages := slice }} {{ range .chat.history.messages }} {{ $messages = $messages | append . }} {{ end }} <!-- Create a map of messages by ID --> {{ $messageMap := dict }} {{ range $messages }} {{ $messageMap = merge $messageMap (dict (printf "%s" .id) .) }} {{ end }} <!-- Render root messages --> {{ range (where $messages "parentId" "==" nil) }} {{ template "renderMessageWithChildren" dict "message" . "map" $messageMap }} {{ end }} </div> </div> {{ end }} {{/* Recursive template to render messages */}} {{ define "renderMessageWithChildren" }} {{ $message := .message }} {{ $map := .map }} <!-- Render current message --> <div class="chat-message {{ $message.role }}"> <strong>{{ if eq $message.role "user" }}User{{ else }}{{ $message.model }}{{ end }}:</strong> <div style="white-space: pre-wrap;">{{ $message.content }}</div> </div> <!-- Render children recursively --> {{ range $message.childrenIds }} {{ $child := index $map . }} {{ template "renderMessageWithChildren" dict "message" $child "map" $map }} {{ end }} {{ end }} Now we’ll need CSS code. My theme will load any CSS that I put in assets/css/extended/ so I added a file in there called renderchat.css. Here’s the CSS code for the chat log: ...