Style the AI chat as message boxes (fixes #6309)

The chat page was raw text: bold "You:" lines and replies with no
spacing, hard to scan in a long session. Questions now sit in a
tinted box on the right, replies in a bordered card on the left,
tool calls as small italic lines, with proper Markdown typography
for headings, lists, tables, quotes and code.

A new AIChat settings section (FontName, FontSize, LineSpacing,
MessagePadding, Bubbles) lets users tune it; Bubbles = false keeps
the plain look. Saving settings rebuilds open chat pages, which also
makes the per-backend BgColor apply without reopening the panel.

prompt: implement #6309: improve ui design of ai chat sidebar

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

Author: kjk

cmd/gen-settings.ts

@@ -676,6 +676,24 @@ const antiGravity: Field[] = [
   field("BgColor", Color, "#ffffff", "background color of the Antigravity chat panel"),
 ];
 
+const aiChat: Field[] = [
+  field("FontName", Str, "", "font of the chat messages; empty uses Segoe UI"),
+  field("FontSize", Int, 0, "font size of the chat messages in pixels; 0 means the default (13)"),
+  field(
+    "LineSpacing",
+    Float,
+    0,
+    "line-height multiplier for chat text (e.g. 1.6); 0 means the default (1.5). values from 1 to 3 are accepted",
+  ),
+  field("MessagePadding", Int, -1, "space inside a message box in pixels; -1 means the default (8)"),
+  field(
+    "Bubbles",
+    Bool,
+    true,
+    "if true, your questions and the replies are shown in message boxes; if false, as plain text separated by lines",
+  ),
+];
+
 const readingBar: Field[] = [
   field(
     "Background",
@@ -1912,6 +1930,8 @@ const globalPrefs: Field[] = [
   emptyLine(),
   struct("AntiGravity", antiGravity, "settings for the Antigravity chat sidebar").ver("3.7"),
   emptyLine(),
+  struct("AIChat", aiChat, "appearance of the AI chat sidebar, shared by all backends").ver("3.7"),
+  emptyLine(),
   field(
     "AIChatSidebarDx",
     Int,
@@ -2115,6 +2135,7 @@ const globalPrefsLayout = [
   "GrokBuild",
   "CodexBuild",
   "AntiGravity",
+  "AIChat",
   "EBookUI",
   "ComicBookUI",
   "FixedPageUI",

cmd/ng-gen-settings.ts

@@ -676,6 +676,24 @@ const antiGravity: Field[] = [
   field("BgColor", Color, "#ffffff", "background color of the Antigravity chat panel"),
 ];
 
+const aiChat: Field[] = [
+  field("FontName", Str, "", "font of the chat messages; empty uses Segoe UI"),
+  field("FontSize", Int, 0, "font size of the chat messages in pixels; 0 means the default (13)"),
+  field(
+    "LineSpacing",
+    Float,
+    0,
+    "line-height multiplier for chat text (e.g. 1.6); 0 means the default (1.5). values from 1 to 3 are accepted",
+  ),
+  field("MessagePadding", Int, -1, "space inside a message box in pixels; -1 means the default (8)"),
+  field(
+    "Bubbles",
+    Bool,
+    true,
+    "if true, your questions and the replies are shown in message boxes; if false, as plain text separated by lines",
+  ),
+];
+
 const readingBar: Field[] = [
   field(
     "Background",
@@ -1881,6 +1899,8 @@ const globalPrefs: Field[] = [
   emptyLine(),
   struct("AntiGravity", antiGravity, "settings for the Antigravity chat sidebar").ver("3.7"),
   emptyLine(),
+  struct("AIChat", aiChat, "appearance of the AI chat sidebar, shared by all backends").ver("3.7"),
+  emptyLine(),
   field(
     "AIChatSidebarDx",
     Int,
@@ -2076,6 +2096,7 @@ const globalPrefsLayout = [
   "GrokBuild",
   "CodexBuild",
   "AntiGravity",
+  "AIChat",
   "EBookUI",
   "ComicBookUI",
   "FixedPageUI",

src/Settings.cpp

@@ -332,6 +332,24 @@ static const StructInfo gAntiGravityInfo = {
     "(agy cannot prompt for permissions with -p)\0background color of the Antigravity chat panel",
     false};
 
+static const FieldInfo gAIChatFields[] = {
+    {offsetof(AIChat, fontName), SettingType::String, (intptr_t)""},
+    {offsetof(AIChat, fontSize), SettingType::Int, 0},
+    {offsetof(AIChat, lineSpacing), SettingType::Float, (intptr_t)"0"},
+    {offsetof(AIChat, messagePadding), SettingType::Int, -1},
+    {offsetof(AIChat, bubbles), SettingType::Bool, true},
+};
+static const StructInfo gAIChatInfo = {
+    sizeof(AIChat),
+    5,
+    gAIChatFields,
+    "FontName\0FontSize\0LineSpacing\0MessagePadding\0Bubbles",
+    "font of the chat messages; empty uses Segoe UI\0font size of the chat messages in pixels; 0 means the default "
+    "(13)\0line-height multiplier for chat text (e.g. 1.6); 0 means the default (1.5). values from 1 to 3 are "
+    "accepted\0space inside a message box in pixels; -1 means the default (8)\0if true, your questions and the replies "
+    "are shown in message boxes; if false, as plain text separated by lines",
+    false};
+
 static const FieldInfo gAnnotationsFields[] = {
     {offsetof(Annotations, highlightColor), SettingType::Color, (intptr_t)"#ffff00"},
     {offsetof(Annotations, underlineColor), SettingType::Color, (intptr_t)"#8bf05d"},
@@ -997,6 +1015,8 @@ static const FieldInfo gSettingsFields[] = {
     {(size_t)-1, SettingType::Comment, 0},
     {offsetof(Settings, antiGravity), SettingType::Struct, (intptr_t)&gAntiGravityInfo},
     {(size_t)-1, SettingType::Comment, 0},
+    {offsetof(Settings, aiChat), SettingType::Struct, (intptr_t)&gAIChatInfo},
+    {(size_t)-1, SettingType::Comment, 0},
     {offsetof(Settings, aiChatSidebarDx), SettingType::Int, 0, true},
     {(size_t)-1, SettingType::Comment, 0},
     {offsetof(Settings, translateToLang), SettingType::String, (intptr_t)"", true},
@@ -1046,7 +1066,7 @@ static const FieldInfo gSettingsFields[] = {
 };
 const StructInfo gSettingsInfo = {
     sizeof(Settings),
-    165,
+    167,
     gSettingsFields,
     "\0\0DefaultDisplayMode\0DefaultZoom\0DisableJavaScript\0AllowExternalImages\0EnableTeXEnhancements\0EscToExit\0Ful"
     "lPathInTitle\0InverseSearchCmdLine\0LazyLoading\0MainWindowBackground\0NoHomeTab\0HomePageSortByFrequentlyRead\0Ho"
@@ -1064,11 +1084,11 @@ const StructInfo gSettingsInfo = {
     "ntSize\0UIFontSize\0DisableAntiAlias\0EngineeringDrawingEnhance\0DisableAutoLinks\0UseSysColors\0UseTabs\0Selectio"
     "nToolbar\0SelectionToolbarLayout\0TabsMru\0CtrlTabSimple\0ZoomLevels\0ZoomIncrement\0\0FixedPageUI\0\0EBookUI\0\0C"
     "omicBookUI\0\0ImageUI\0\0ChmUI\0\0MarkdownUI\0\0HtmlUI\0\0ClaudeCode\0\0GrokBuild\0\0CodexBuild\0\0AntiGravity\0\0"
-    "AIChatSidebarDx\0\0TranslateToLang\0TranslateFromLang\0TranslateEngine\0\0Annotations\0\0ExternalViewers\0\0Forwar"
-    "dSearch\0\0PrinterDefaults\0\0Fullscreen\0\0SelectionHandlers\0\0TextSnippets\0\0Shortcuts\0\0Themes\0\0TabGroups"
-    "\0\0CustomScreenDPI\0\0\0DefaultPasswords\0UiLanguage\0VersionToSkip\0WindowState\0WindowPos\0SearchUIWindowPos\0A"
-    "nnotationsWindowShowNote\0HelpWindowPos\0FileStates\0SessionData\0ReopenOnce\0TimeOfLastUpdateCheck\0OpenCountWeek"
-    "\0PropWinPos\0CheckForUpdates\0\0",
+    "AIChat\0\0AIChatSidebarDx\0\0TranslateToLang\0TranslateFromLang\0TranslateEngine\0\0Annotations\0\0ExternalViewers"
+    "\0\0ForwardSearch\0\0PrinterDefaults\0\0Fullscreen\0\0SelectionHandlers\0\0TextSnippets\0\0Shortcuts\0\0Themes\0\0"
+    "TabGroups\0\0CustomScreenDPI\0\0\0DefaultPasswords\0UiLanguage\0VersionToSkip\0WindowState\0WindowPos\0SearchUIWin"
+    "dowPos\0AnnotationsWindowShowNote\0HelpWindowPos\0FileStates\0SessionData\0ReopenOnce\0TimeOfLastUpdateCheck\0Open"
+    "CountWeek\0PropWinPos\0CheckForUpdates\0\0",
     "\0\0default layout of pages. valid values: automatic, single page, facing, book view, continuous, continuous "
     "facing, continuous book view, page aspect. page aspect (3.7+): first open of a PDF, XPS, DjVu or PostScript file "
     "uses page 1 — taller than wide is continuous + fit width, wider than tall is single page + fit page; a remembered "
@@ -1193,11 +1213,12 @@ const StructInfo gSettingsInfo = {
     "otherwise WebView2 browser view is used when available\0\0customization options for HTML UI. If UseFixedPageUI is "
     "true, MuPDF is used; otherwise WebView2 browser view is used when available\0\0settings for the Claude Code chat "
     "sidebar\0\0settings for the Grok Build chat sidebar\0\0settings for the OpenAI Codex chat sidebar\0\0settings for "
-    "the Antigravity chat sidebar\0\0width of the AI chat sidebar (0 = use default); shared by Claude Code, Grok "
-    "Build, and OpenAI Codex (internal)\0\0remembered destination language for selection translation; empty uses OS UI "
-    "language\0remembered source language for selection translation; empty means Auto\0remembered engine for Translate "
-    "Selection: Google, DeepL, Grok Build, Claude Code, OpenAI Codex or Antigravity\0\0default values for annotations "
-    "in PDF documents\0\0list of additional external viewers for various file types. See [docs for more "
+    "the Antigravity chat sidebar\0\0appearance of the AI chat sidebar, shared by all backends\0\0width of the AI chat "
+    "sidebar (0 = use default); shared by Claude Code, Grok Build, and OpenAI Codex (internal)\0\0remembered "
+    "destination language for selection translation; empty uses OS UI language\0remembered source language for "
+    "selection translation; empty means Auto\0remembered engine for Translate Selection: Google, DeepL, Grok Build, "
+    "Claude Code, OpenAI Codex or Antigravity\0\0default values for annotations in PDF documents\0\0list of additional "
+    "external viewers for various file types. See [docs for more "
     "information](https://www.sumatrapdfreader.org/docs/Customize-external-viewers)\0\0customization options for how "
     "forward search results are shown (used from LaTeX editors)\0\0these override the default settings in the Print "
     "dialog\0\0options for fullscreen mode\0\0list of handlers for selected text, shown in context menu when text "

src/Settings.h

@@ -544,6 +544,22 @@ struct AntiGravity {
     ParsedColor bgColor;
 };
 
+// appearance of the AI chat sidebar, shared by all backends
+struct AIChat {
+    // font of the chat messages; empty uses Segoe UI
+    Str fontName;
+    // font size of the chat messages in pixels; 0 means the default (13)
+    int fontSize;
+    // line-height multiplier for chat text (e.g. 1.6); 0 means the default
+    // (1.5). values from 1 to 3 are accepted
+    float lineSpacing;
+    // space inside a message box in pixels; -1 means the default (8)
+    int messagePadding;
+    // if true, your questions and the replies are shown in message boxes;
+    // if false, as plain text separated by lines
+    bool bubbles;
+};
+
 // customization options for the ebook UI (EPUB, MOBI, FB2, PDB and
 // plain text)
 struct EBookUI {
@@ -1000,6 +1016,8 @@ struct Settings {
     CodexBuild codexBuild;
     // settings for the Antigravity chat sidebar
     AntiGravity antiGravity;
+    // appearance of the AI chat sidebar, shared by all backends
+    AIChat aiChat;
     // customization options for the ebook UI (EPUB, MOBI, FB2, PDB and
     // plain text)
     EBookUI eBookUI;

src/SumatraPDF.cpp

@@ -9108,6 +9108,18 @@ void ApplyChangedSettingsAndRelayout(const SettingsApplyState& before) {
         ReloadEbookLayoutDocs();
     }
 
+    // the chat colors, font and layout are baked into the chat page: rebuild it
+    Str prevStyle = before.aiChatStyle;
+    Str nowStyle = AIChatStyleSnapshot();
+    bool aiChatStyleChanged = !str::Eq(prevStyle, nowStyle);
+    str::Free(prevStyle);
+    str::Free(nowStyle);
+    if (aiChatStyleChanged) {
+        for (MainWindow* w : gWindows) {
+            UpdateAIChatTheme(w);
+        }
+    }
+
     // UseTabs converts existing windows <-> tabs (closes and reopens windows);
     // post it so it runs after the settings dialog has been torn down
     if (before.useTabs != p->useTabs) {

src/SumatraPDF.h

@@ -306,6 +306,8 @@ struct SettingsApplyState {
     bool explorerQuickLook = false;
     // owned copy of the ebook layout inputs; ApplyChangedSettingsAndRelayout frees it
     Str ebookLayout;
+    // owned copy of the AI chat look (AIChat section, BgColor); freed the same way
+    Str aiChatStyle;
 };
 SettingsApplyState GetSettingsApplyState();
 void ApplyChangedSettingsAndRelayout(const SettingsApplyState& before);

src/ng/Settings.h

@@ -541,6 +541,22 @@ struct AntiGravity {
     ParsedColor bgColor;
 };
 
+// appearance of the AI chat sidebar, shared by all backends
+struct AIChat {
+    // font of the chat messages; empty uses Segoe UI
+    Str fontName;
+    // font size of the chat messages in pixels; 0 means the default (13)
+    int fontSize;
+    // line-height multiplier for chat text (e.g. 1.6); 0 means the default
+    // (1.5). values from 1 to 3 are accepted
+    float lineSpacing;
+    // space inside a message box in pixels; -1 means the default (8)
+    int messagePadding;
+    // if true, your questions and the replies are shown in message boxes;
+    // if false, as plain text separated by lines
+    bool bubbles;
+};
+
 // customization options for the ebook UI (EPUB, MOBI, FB2, PDB and
 // plain text)
 struct EBookUI {
@@ -1000,6 +1016,8 @@ struct Settings {
     CodexBuild codexBuild;
     // settings for the Antigravity chat sidebar
     AntiGravity antiGravity;
+    // appearance of the AI chat sidebar, shared by all backends
+    AIChat aiChat;
     // customization options for the ebook UI (EPUB, MOBI, FB2, PDB and
     // plain text)
     EBookUI eBookUI;
@@ -1610,6 +1628,24 @@ static const StructInfo gAntiGravityInfo = {
     "(agy cannot prompt for permissions with -p)\0background color of the Antigravity chat panel",
     false};
 
+static const FieldInfo gAIChatFields[] = {
+    {offsetof(AIChat, fontName), SettingType::String, (intptr_t)""},
+    {offsetof(AIChat, fontSize), SettingType::Int, 0},
+    {offsetof(AIChat, lineSpacing), SettingType::Float, (intptr_t)"0"},
+    {offsetof(AIChat, messagePadding), SettingType::Int, -1},
+    {offsetof(AIChat, bubbles), SettingType::Bool, true},
+};
+static const StructInfo gAIChatInfo = {
+    sizeof(AIChat),
+    5,
+    gAIChatFields,
+    "FontName\0FontSize\0LineSpacing\0MessagePadding\0Bubbles",
+    "font of the chat messages; empty uses Segoe UI\0font size of the chat messages in pixels; 0 means the default "
+    "(13)\0line-height multiplier for chat text (e.g. 1.6); 0 means the default (1.5). values from 1 to 3 are "
+    "accepted\0space inside a message box in pixels; -1 means the default (8)\0if true, your questions and the replies "
+    "are shown in message boxes; if false, as plain text separated by lines",
+    false};
+
 static const FieldInfo gAnnotationsFields[] = {
     {offsetof(Annotations, highlightColor), SettingType::Color, (intptr_t)"#ffff00"},
     {offsetof(Annotations, underlineColor), SettingType::Color, (intptr_t)"#8bf05d"},
@@ -2275,6 +2311,8 @@ static const FieldInfo gSettingsFields[] = {
     {(size_t)-1, SettingType::Comment, 0},
     {offsetof(Settings, antiGravity), SettingType::Struct, (intptr_t)&gAntiGravityInfo},
     {(size_t)-1, SettingType::Comment, 0},
+    {offsetof(Settings, aiChat), SettingType::Struct, (intptr_t)&gAIChatInfo},
+    {(size_t)-1, SettingType::Comment, 0},
     {offsetof(Settings, aiChatSidebarDx), SettingType::Int, 0, true},
     {(size_t)-1, SettingType::Comment, 0},
     {offsetof(Settings, translateToLang), SettingType::String, (intptr_t)"", true},
@@ -2324,7 +2362,7 @@ static const FieldInfo gSettingsFields[] = {
 };
 static const StructInfo gSettingsInfo = {
     sizeof(Settings),
-    165,
+    167,
     gSettingsFields,
     "\0\0DefaultDisplayMode\0DefaultZoom\0DisableJavaScript\0AllowExternalImages\0EnableTeXEnhancements\0EscToExit\0Ful"
     "lPathInTitle\0InverseSearchCmdLine\0LazyLoading\0MainWindowBackground\0NoHomeTab\0HomePageSortByFrequentlyRead\0Ho"
@@ -2342,11 +2380,11 @@ static const StructInfo gSettingsInfo = {
     "ntSize\0UIFontSize\0DisableAntiAlias\0EngineeringDrawingEnhance\0DisableAutoLinks\0UseSysColors\0UseTabs\0Selectio"
     "nToolbar\0SelectionToolbarLayout\0TabsMru\0CtrlTabSimple\0ZoomLevels\0ZoomIncrement\0\0FixedPageUI\0\0EBookUI\0\0C"
     "omicBookUI\0\0ImageUI\0\0ChmUI\0\0MarkdownUI\0\0HtmlUI\0\0ClaudeCode\0\0GrokBuild\0\0CodexBuild\0\0AntiGravity\0\0"
-    "AIChatSidebarDx\0\0TranslateToLang\0TranslateFromLang\0TranslateEngine\0\0Annotations\0\0ExternalViewers\0\0Forwar"
-    "dSearch\0\0PrinterDefaults\0\0Fullscreen\0\0SelectionHandlers\0\0TextSnippets\0\0Shortcuts\0\0Themes\0\0TabGroups"
-    "\0\0CustomScreenDPI\0\0\0DefaultPasswords\0UiLanguage\0VersionToSkip\0WindowState\0WindowPos\0SearchUIWindowPos\0A"
-    "nnotationsWindowShowNote\0HelpWindowPos\0FileStates\0SessionData\0ReopenOnce\0TimeOfLastUpdateCheck\0OpenCountWeek"
-    "\0PropWinPos\0CheckForUpdates\0\0",
+    "AIChat\0\0AIChatSidebarDx\0\0TranslateToLang\0TranslateFromLang\0TranslateEngine\0\0Annotations\0\0ExternalViewers"
+    "\0\0ForwardSearch\0\0PrinterDefaults\0\0Fullscreen\0\0SelectionHandlers\0\0TextSnippets\0\0Shortcuts\0\0Themes\0\0"
+    "TabGroups\0\0CustomScreenDPI\0\0\0DefaultPasswords\0UiLanguage\0VersionToSkip\0WindowState\0WindowPos\0SearchUIWin"
+    "dowPos\0AnnotationsWindowShowNote\0HelpWindowPos\0FileStates\0SessionData\0ReopenOnce\0TimeOfLastUpdateCheck\0Open"
+    "CountWeek\0PropWinPos\0CheckForUpdates\0\0",
     "\0\0default layout of pages. valid values: automatic, single page, facing, book view, continuous, continuous "
     "facing, continuous book view, page aspect. page aspect (3.7+): first open of a PDF, XPS, DjVu, PostScript or DVI "
     "file uses page 1 — taller than wide is continuous + fit width, wider than tall is single page + fit page; a "
@@ -2469,11 +2507,12 @@ static const StructInfo gSettingsInfo = {
     "otherwise WebView2 browser view is used when available\0\0customization options for HTML UI. If UseFixedPageUI is "
     "true, MuPDF is used; otherwise WebView2 browser view is used when available\0\0settings for the Claude Code chat "
     "sidebar\0\0settings for the Grok Build chat sidebar\0\0settings for the OpenAI Codex chat sidebar\0\0settings for "
-    "the Antigravity chat sidebar\0\0width of the AI chat sidebar (0 = use default); shared by Claude Code, Grok "
-    "Build, and OpenAI Codex (internal)\0\0remembered destination language for selection translation; empty uses OS UI "
-    "language\0remembered source language for selection translation; empty means Auto\0remembered engine for Translate "
-    "Selection: Google, DeepL, Grok Build, Claude Code, OpenAI Codex or Antigravity\0\0default values for annotations "
-    "in PDF documents\0\0list of additional external viewers for various file types. See [docs for more "
+    "the Antigravity chat sidebar\0\0appearance of the AI chat sidebar, shared by all backends\0\0width of the AI chat "
+    "sidebar (0 = use default); shared by Claude Code, Grok Build, and OpenAI Codex (internal)\0\0remembered "
+    "destination language for selection translation; empty uses OS UI language\0remembered source language for "
+    "selection translation; empty means Auto\0remembered engine for Translate Selection: Google, DeepL, Grok Build, "
+    "Claude Code, OpenAI Codex or Antigravity\0\0default values for annotations in PDF documents\0\0list of additional "
+    "external viewers for various file types. See [docs for more "
     "information](https://www.sumatrapdfreader.org/docs/Customize-external-viewers)\0\0customization options for how "
     "forward search results are shown (used from LaTeX editors)\0\0these override the default settings in the Print "
     "dialog\0\0options for fullscreen mode\0\0list of handlers for selected text, shown in context menu when text "

src/ng/SumatraPDF.cpp

@@ -389,6 +389,18 @@ void ApplyChangedSettingsAndRelayout(const SettingsApplyState& before) {
         ReloadEbookLayoutDocs();
     }
 
+    // the chat colors, font and layout are baked into the chat page: rebuild it
+    Str prevStyle = before.aiChatStyle;
+    Str nowStyle = AIChatStyleSnapshot();
+    bool aiChatStyleChanged = !str::Eq(prevStyle, nowStyle);
+    str::Free(prevStyle);
+    str::Free(nowStyle);
+    if (aiChatStyleChanged) {
+        for (MainWindow* w : gWindows) {
+            UpdateAIChatTheme(w);
+        }
+    }
+
     for (MainWindow* w : gWindows) {
         RebuildMenuBar(w);
         w->lastViewPortSize = Size{};

src/ng/SumatraPDF.h

@@ -198,6 +198,8 @@ struct SettingsApplyState {
     bool explorerQuickLook = false;
     // owned copy of the ebook layout inputs; ApplyChangedSettingsAndRelayout frees it
     Str ebookLayout;
+    // owned copy of the AI chat look (AIChat section, BgColor); freed the same way
+    Str aiChatStyle;
 };
 SettingsApplyState GetSettingsApplyState();
 void ApplyChangedSettingsAndRelayout(const SettingsApplyState& before);