From ea6e6e51f5998be3e24b5dacdce96d59fddbc847 Mon Sep 17 00:00:00 2001
From: Lukas Hirt <info@hirt.cz>
Date: Mon, 27 Jul 2026 19:33:54 +0200
Subject: [PATCH] feat(web-app-chat-with-file): add expand/collapse toggle to
 diff view

Long diffs were capped at a fixed max-height with only internal
scrolling, making it hard to review larger proposed edits. Adds an
Expand/Collapse button below the diff block for diffs beyond a line
threshold, raising the max-height so the full diff can be read without
scrolling.

Signed-off-by: Lukas Hirt <info@hirt.cz>
---
 .../src/components/ChatPanel.vue              | 70 +++++++++++++++++--
 1 file changed, 63 insertions(+), 7 deletions(-)

diff --git a/packages/web-app-chat-with-file/src/components/ChatPanel.vue b/packages/web-app-chat-with-file/src/components/ChatPanel.vue
index 647278626..29bfa5a13 100644
--- a/packages/web-app-chat-with-file/src/components/ChatPanel.vue
+++ b/packages/web-app-chat-with-file/src/components/ChatPanel.vue
@@ -48,14 +48,30 @@
                     }}
                   </button>
                   <div v-if="!message.applied || isDiffExpanded(index)">
-                    <div v-if="getDiff(index).length > 0" class="diff-block">
+                    <template v-if="getDiff(index).length > 0">
                       <div
-                        v-for="(line, li) in getDiff(index)"
-                        :key="li"
-                        class="diff-line"
-                        :class="`diff-line--${line.type}`"
-                      >{{ diffPrefix(line.type) }}{{ line.text }}</div>
-                    </div>
+                        class="diff-block"
+                        :class="{ 'diff-block--tall': isDiffHeightExpanded(index) }"
+                      >
+                        <div
+                          v-for="(line, li) in getDiff(index)"
+                          :key="li"
+                          class="diff-line"
+                          :class="`diff-line--${line.type}`"
+                        >{{ diffPrefix(line.type) }}{{ line.text }}</div>
+                      </div>
+                      <button
+                        v-if="isDiffLong(index)"
+                        class="diff-height-toggle"
+                        @click="toggleDiffHeight(index)"
+                      >
+                        {{
+                          isDiffHeightExpanded(index)
+                            ? $gettext('Collapse')
+                            : $gettext('Expand')
+                        }}
+                      </button>
+                    </template>
                     <div v-else class="diff-empty">{{ $gettext('No changes detected.') }}</div>
                   </div>
                 </div>
@@ -239,6 +255,24 @@ function getDiff(index: number): FlatLine[] {
   return messageDiffs.value[index] ?? []
 }
 
+const DIFF_LONG_THRESHOLD = 12
+
+function isDiffLong(index: number): boolean {
+  return getDiff(index).length > DIFF_LONG_THRESHOLD
+}
+
+const expandedDiffHeights = ref<number[]>([])
+
+function isDiffHeightExpanded(index: number): boolean {
+  return expandedDiffHeights.value.includes(index)
+}
+
+function toggleDiffHeight(index: number): void {
+  expandedDiffHeights.value = isDiffHeightExpanded(index)
+    ? expandedDiffHeights.value.filter((i) => i !== index)
+    : [...expandedDiffHeights.value, index]
+}
+
 const expandedDiffs = ref<number[]>([])
 
 function isDiffExpanded(index: number): boolean {
@@ -283,6 +317,7 @@ watch(
     if (newId && oldId && newId !== oldId) {
       mode.value = 'chat'
       diffCache.clear()
+      expandedDiffHeights.value = []
     }
   }
 )
@@ -388,6 +423,27 @@ onMounted(() => {
   overflow-y: auto;
 }
 
+.diff-block--tall {
+  max-height: 600px;
+}
+
+.diff-height-toggle {
+  display: block;
+  width: 100%;
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 0.75rem;
+  font-family: inherit;
+  color: var(--oc-color-swatch-primary-default, #0d6efd);
+  padding: 4px 0;
+  text-align: center;
+}
+
+.diff-height-toggle:hover {
+  text-decoration: underline;
+}
+
 .diff-line {
   display: block;
   white-space: pre;