From 7485d311754bfbfc71bc810b430c51cc38911805 Mon Sep 17 00:00:00 2001
From: dennisrijsdijk <git@dennis.gg>
Date: Tue, 8 Sep 2026 21:40:43 +0200
Subject: [PATCH 1/2] feat: initial horizontal chat implementation

---
 .../builtin-types/chat/chat.ts                | 40 +++++++++++++++++--
 1 file changed, 36 insertions(+), 4 deletions(-)

diff --git a/src/backend/overlay-widgets/builtin-types/chat/chat.ts b/src/backend/overlay-widgets/builtin-types/chat/chat.ts
index 785364931..7cac205d6 100644
--- a/src/backend/overlay-widgets/builtin-types/chat/chat.ts
+++ b/src/backend/overlay-widgets/builtin-types/chat/chat.ts
@@ -23,6 +23,8 @@ export type ChatWidgetSettings = {
     messageExitAnimation?: Animation;
     messageStyle: "compact" | "modern";
     chatOrder: "normal" | "reversed";
+    /** The type of the chat (vertical or horizontal, undefined = vertical) */
+    chatType: "vertical" | "horizontal" | undefined;
     actionDisplayFormat: "modern" | "classic";
     highlightStyle: "normal" | "highlighted";
     highlightColor?: string;
@@ -215,17 +217,32 @@ export const chat: OverlayWidgetType<ChatWidgetSettings, ChatWidgetState> = {
                 {
                     value: "normal",
                     label: "Normal",
-                    description: "New messages will appear at the bottom of the chat feed",
+                    description: "New messages will appear at the end of the chat feed (bottom for vertical, right for horizontal)",
                     iconClass: "fa-sort-amount-down-alt"
                 },
                 {
                     value: "reversed",
                     label: "Reversed",
-                    description: "New messages will appear at the top of the chat feed",
+                    description: "New messages will appear at the start of the chat feed (top for vertical, left for horizontal)",
                     iconClass: "fa-sort-amount-up"
                 }
             ]
         },
+        {
+            name: "chatType",
+            title: "Chat Type",
+            description: "The type of chat widget",
+            type: "radio-cards",
+            default: "vertical",
+            options: [{
+                value: "vertical", label: "Vertical", iconClass: "fa-arrows-alt-v"
+            }, {
+                value: "horizontal", label: "Horizontal", iconClass: "fa-arrows-alt-h"
+            }],
+            settings: {
+                gridColumns: 2
+            }
+        },
         {
             name: "actionDisplayFormat",
             title: "Action Display Format",
@@ -894,6 +911,9 @@ export const chat: OverlayWidgetType<ChatWidgetSettings, ChatWidgetState> = {
                     default:
                         switch (config.settings.verticalAlignment) {
                             case "bottom":
+                                if (config.settings.chatType === "horizontal") {
+                                    anchorToBottom = true;
+                                }
                                 height = "100%";
                                 maxHeight = "100%";
                                 justifyContent = "end";
@@ -907,9 +927,12 @@ export const chat: OverlayWidgetType<ChatWidgetSettings, ChatWidgetState> = {
                         break;
                 }
 
+                let flexDirection = config.settings.chatType === "horizontal" ? "row" : "column";
+                flexDirection = config.settings.chatOrder === "reversed" ? `${flexDirection}-reverse` : flexDirection;
+
                 const chatContainerStyles: Record<string, string> = {
                     "display": "flex",
-                    "flex-direction": config.settings.chatOrder === "reversed" ? "column-reverse" : "column",
+                    "flex-direction": flexDirection,
                     "align-items": config.settings.horizontalAlignment === "right" ? "end" : "start",
                     "justify-content": justifyContent,
                     "height": height,
@@ -917,6 +940,11 @@ export const chat: OverlayWidgetType<ChatWidgetSettings, ChatWidgetState> = {
                     "text-align": config.settings.horizontalAlignment
                 };
 
+                if (config.settings.chatType === "horizontal") {
+                    chatContainerStyles["text-wrap"] = "nowrap";
+                    chatContainerStyles["align-items"] = "end";
+                }
+
                 if (!!maxHeight?.length) {
                     chatContainerStyles["max-height"] = maxHeight;
                 }
@@ -1006,6 +1034,10 @@ export const chat: OverlayWidgetType<ChatWidgetSettings, ChatWidgetState> = {
                     "font-style": config.settings?.actionDisplayFormat === "classic" ? "normal" : "italic"
                 };
 
+                const chatMargin = config.settings.chatType === "horizontal" ?
+                    config.settings.chatOrder === "reversed" ? "right" : "left" :
+                    config.settings.chatOrder === "reversed" ? "bottom" : "top";
+
                 const styleMarkup = `
                     <style>
                         .chat-${config.id} {
@@ -1017,7 +1049,7 @@ export const chat: OverlayWidgetType<ChatWidgetSettings, ChatWidgetState> = {
                         }
 
                         .chat-${config.id} > div + div {
-                            ${config.settings.chatOrder === "reversed" ? "margin-bottom" : "margin-top"}: ${config.settings.spaceBetweenMessages ?? 5}px;
+                            margin-${chatMargin}: ${config.settings.spaceBetweenMessages ?? 5}px;
                         }
 
                         .chat-message-root-container-${config.id} {

From f57f1c17902e7bbdc3dd35baa34b00eab6f1fd4a Mon Sep 17 00:00:00 2001
From: dennisrijsdijk <git@dennis.gg>
Date: Wed, 9 Sep 2026 21:19:26 +0200
Subject: [PATCH 2/2] hide horizontal chat alignment in horizontal chat mode

---
 .../overlay-widgets/builtin-types/chat/chat.ts     | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/backend/overlay-widgets/builtin-types/chat/chat.ts b/src/backend/overlay-widgets/builtin-types/chat/chat.ts
index 7cac205d6..7930d38c3 100644
--- a/src/backend/overlay-widgets/builtin-types/chat/chat.ts
+++ b/src/backend/overlay-widgets/builtin-types/chat/chat.ts
@@ -348,6 +348,12 @@ export const chat: OverlayWidgetType<ChatWidgetSettings, ChatWidgetState> = {
             }],
             settings: {
                 gridColumns: 2
+            },
+            showIf: {
+                chatType: [
+                    "vertical",
+                    undefined
+                ]
             }
         },
         {
@@ -930,14 +936,16 @@ export const chat: OverlayWidgetType<ChatWidgetSettings, ChatWidgetState> = {
                 let flexDirection = config.settings.chatType === "horizontal" ? "row" : "column";
                 flexDirection = config.settings.chatOrder === "reversed" ? `${flexDirection}-reverse` : flexDirection;
 
+                const horizontalAlignment = config.settings.chatType === "horizontal" ? "left" : config.settings.horizontalAlignment;
+
                 const chatContainerStyles: Record<string, string> = {
                     "display": "flex",
                     "flex-direction": flexDirection,
-                    "align-items": config.settings.horizontalAlignment === "right" ? "end" : "start",
+                    "align-items": horizontalAlignment === "right" ? "end" : "start",
                     "justify-content": justifyContent,
                     "height": height,
                     "width": "100%",
-                    "text-align": config.settings.horizontalAlignment
+                    "text-align": horizontalAlignment
                 };
 
                 if (config.settings.chatType === "horizontal") {
@@ -957,7 +965,7 @@ export const chat: OverlayWidgetType<ChatWidgetSettings, ChatWidgetState> = {
                 const messageRootContainerStyles: Record<string, string> = {
                     "display": "flex",
                     "gap": "10px",
-                    "flex-direction": config.settings.horizontalAlignment === "right"
+                    "flex-direction": horizontalAlignment === "right"
                         ? "row-reverse"
                         : "row"
                 };