|
| 1 | +/*--------------------------------------------------------------------------------------------- |
| 2 | + * Copyright (c) Microsoft Corporation. All rights reserved. |
| 3 | + * Licensed under the MIT License. See License.txt in the project root for license information. |
| 4 | + *--------------------------------------------------------------------------------------------*/ |
| 5 | + |
| 6 | +import * as dom from '../../../../../base/browser/dom.js'; |
| 7 | +import { ButtonWithIcon } from '../../../../../base/browser/ui/button/button.js'; |
| 8 | +import { Disposable, DisposableStore, IDisposable, toDisposable } from '../../../../../base/common/lifecycle.js'; |
| 9 | +import { URI } from '../../../../../base/common/uri.js'; |
| 10 | +import { localize } from '../../../../../nls.js'; |
| 11 | +import { IInstantiationService } from '../../../../../platform/instantiation/common/instantiation.js'; |
| 12 | +import { IChatContentPart } from './chatContentParts.js'; |
| 13 | +import { IChatMultiDiffData } from '../../common/chatService.js'; |
| 14 | +import { ChatTreeItem } from '../chat.js'; |
| 15 | +import { IResourceLabel, ResourceLabels } from '../../../../browser/labels.js'; |
| 16 | +import { WorkbenchList } from '../../../../../platform/list/browser/listService.js'; |
| 17 | +import { IListRenderer, IListVirtualDelegate } from '../../../../../base/browser/ui/list/list.js'; |
| 18 | +import { FileKind } from '../../../../../platform/files/common/files.js'; |
| 19 | +import { createFileIconThemableTreeContainerScope } from '../../../files/browser/views/explorerView.js'; |
| 20 | +import { IThemeService } from '../../../../../platform/theme/common/themeService.js'; |
| 21 | +import { IEditSessionEntryDiff } from '../../common/chatEditingService.js'; |
| 22 | +import { IEditorService } from '../../../../services/editor/common/editorService.js'; |
| 23 | +import { IEditorGroupsService } from '../../../../services/editor/common/editorGroupsService.js'; |
| 24 | +import { MultiDiffEditorInput } from '../../../multiDiffEditor/browser/multiDiffEditorInput.js'; |
| 25 | +import { MultiDiffEditorItem } from '../../../multiDiffEditor/browser/multiDiffSourceResolverService.js'; |
| 26 | +import { Codicon } from '../../../../../base/common/codicons.js'; |
| 27 | +import { ThemeIcon } from '../../../../../base/common/themables.js'; |
| 28 | +import { IChatRendererContent } from '../../common/chatViewModel.js'; |
| 29 | +import { Emitter, Event } from '../../../../../base/common/event.js'; |
| 30 | + |
| 31 | +const $ = dom.$; |
| 32 | + |
| 33 | +interface IChatMultiDiffItem { |
| 34 | + uri: URI; |
| 35 | + diff?: IEditSessionEntryDiff; |
| 36 | +} |
| 37 | + |
| 38 | +const ELEMENT_HEIGHT = 22; |
| 39 | +const MAX_ITEMS_SHOWN = 6; |
| 40 | + |
| 41 | +export class ChatMultiDiffContentPart extends Disposable implements IChatContentPart { |
| 42 | + public readonly domNode: HTMLElement; |
| 43 | + |
| 44 | + |
| 45 | + private readonly _onDidChangeHeight = this._register(new Emitter<void>()); |
| 46 | + public readonly onDidChangeHeight = this._onDidChangeHeight.event; |
| 47 | + |
| 48 | + private list!: WorkbenchList<IChatMultiDiffItem>; |
| 49 | + private isCollapsed: boolean = true; |
| 50 | + |
| 51 | + constructor( |
| 52 | + private readonly content: IChatMultiDiffData, |
| 53 | + element: ChatTreeItem, |
| 54 | + @IInstantiationService private readonly instantiationService: IInstantiationService, |
| 55 | + @IEditorService private readonly editorService: IEditorService, |
| 56 | + @IEditorGroupsService private readonly editorGroupsService: IEditorGroupsService, |
| 57 | + @IThemeService private readonly themeService: IThemeService |
| 58 | + ) { |
| 59 | + super(); |
| 60 | + |
| 61 | + const headerDomNode = $('.checkpoint-file-changes-summary-header'); |
| 62 | + this.domNode = $('.checkpoint-file-changes-summary', undefined, headerDomNode); |
| 63 | + this.domNode.tabIndex = 0; |
| 64 | + |
| 65 | + this._register(this.renderHeader(headerDomNode)); |
| 66 | + this._register(this.renderFilesList(this.domNode)); |
| 67 | + } |
| 68 | + |
| 69 | + private renderHeader(container: HTMLElement): IDisposable { |
| 70 | + const fileCount = this.content.multiDiffData.resources.length; |
| 71 | + |
| 72 | + const viewListButtonContainer = container.appendChild($('.chat-file-changes-label')); |
| 73 | + const viewListButton = new ButtonWithIcon(viewListButtonContainer, {}); |
| 74 | + viewListButton.label = fileCount === 1 |
| 75 | + ? localize('chatMultiDiff.oneFile', 'Changed 1 file') |
| 76 | + : localize('chatMultiDiff.manyFiles', 'Changed {0} files', fileCount); |
| 77 | + |
| 78 | + const setExpansionState = () => { |
| 79 | + viewListButton.icon = this.isCollapsed ? Codicon.chevronRight : Codicon.chevronDown; |
| 80 | + this.domNode.classList.toggle('chat-file-changes-collapsed', this.isCollapsed); |
| 81 | + this._onDidChangeHeight.fire(); |
| 82 | + }; |
| 83 | + setExpansionState(); |
| 84 | + |
| 85 | + const disposables = new DisposableStore(); |
| 86 | + disposables.add(viewListButton); |
| 87 | + disposables.add(viewListButton.onDidClick(() => { |
| 88 | + this.isCollapsed = !this.isCollapsed; |
| 89 | + setExpansionState(); |
| 90 | + })); |
| 91 | + disposables.add(this.renderViewAllFileChangesButton(viewListButton.element)); |
| 92 | + return toDisposable(() => disposables.dispose()); |
| 93 | + } |
| 94 | + |
| 95 | + private renderViewAllFileChangesButton(container: HTMLElement): IDisposable { |
| 96 | + const button = container.appendChild($('.chat-view-changes-icon')); |
| 97 | + button.classList.add(...ThemeIcon.asClassNameArray(Codicon.diffMultiple)); |
| 98 | + |
| 99 | + return dom.addDisposableListener(button, 'click', (e) => { |
| 100 | + const source = URI.parse(`multi-diff-editor:${new Date().getMilliseconds().toString() + Math.random().toString()}`); |
| 101 | + const input = this.instantiationService.createInstance( |
| 102 | + MultiDiffEditorInput, |
| 103 | + source, |
| 104 | + this.content.multiDiffData.title || 'Multi-Diff', |
| 105 | + this.content.multiDiffData.resources.map(resource => new MultiDiffEditorItem( |
| 106 | + resource.originalUri, |
| 107 | + resource.modifiedUri, |
| 108 | + resource.goToFileUri |
| 109 | + )), |
| 110 | + false |
| 111 | + ); |
| 112 | + this.editorGroupsService.activeGroup.openEditor(input); |
| 113 | + dom.EventHelper.stop(e, true); |
| 114 | + }); |
| 115 | + } |
| 116 | + |
| 117 | + private renderFilesList(container: HTMLElement): IDisposable { |
| 118 | + const store = new DisposableStore(); |
| 119 | + |
| 120 | + const listContainer = container.appendChild($('.chat-summary-list')); |
| 121 | + store.add(createFileIconThemableTreeContainerScope(listContainer, this.themeService)); |
| 122 | + const resourceLabels = store.add(this.instantiationService.createInstance(ResourceLabels, { onDidChangeVisibility: Event.None })); |
| 123 | + |
| 124 | + this.list = store.add(this.instantiationService.createInstance( |
| 125 | + WorkbenchList<IChatMultiDiffItem>, |
| 126 | + 'ChatMultiDiffList', |
| 127 | + listContainer, |
| 128 | + new ChatMultiDiffListDelegate(), |
| 129 | + [this.instantiationService.createInstance(ChatMultiDiffListRenderer, resourceLabels)], |
| 130 | + { |
| 131 | + identityProvider: { |
| 132 | + getId: (element: IChatMultiDiffItem) => element.uri.toString() |
| 133 | + }, |
| 134 | + setRowLineHeight: true, |
| 135 | + horizontalScrolling: false, |
| 136 | + supportDynamicHeights: false, |
| 137 | + mouseSupport: true, |
| 138 | + accessibilityProvider: { |
| 139 | + getAriaLabel: (element: IChatMultiDiffItem) => element.uri.path, |
| 140 | + getWidgetAriaLabel: () => localize('chatMultiDiffList', "File Changes") |
| 141 | + } |
| 142 | + } |
| 143 | + )); |
| 144 | + |
| 145 | + const items: IChatMultiDiffItem[] = []; |
| 146 | + for (const resource of this.content.multiDiffData.resources) { |
| 147 | + const uri = resource.modifiedUri || resource.originalUri || resource.goToFileUri; |
| 148 | + if (!uri) { |
| 149 | + continue; |
| 150 | + } |
| 151 | + |
| 152 | + const item: IChatMultiDiffItem = { uri }; |
| 153 | + |
| 154 | + if (resource.originalUri && resource.modifiedUri) { |
| 155 | + item.diff = { |
| 156 | + originalURI: resource.originalUri, |
| 157 | + modifiedURI: resource.modifiedUri, |
| 158 | + quitEarly: false, |
| 159 | + identical: false, |
| 160 | + added: 0, |
| 161 | + removed: 0 |
| 162 | + }; |
| 163 | + } |
| 164 | + |
| 165 | + items.push(item); |
| 166 | + } |
| 167 | + |
| 168 | + this.list.splice(0, this.list.length, items); |
| 169 | + |
| 170 | + const height = Math.min(items.length, MAX_ITEMS_SHOWN) * ELEMENT_HEIGHT; |
| 171 | + this.list.layout(height); |
| 172 | + listContainer.style.height = `${height}px`; |
| 173 | + |
| 174 | + store.add(this.list.onDidOpen((e) => { |
| 175 | + if (!e.element) { |
| 176 | + return; |
| 177 | + } |
| 178 | + |
| 179 | + if (e.element.diff) { |
| 180 | + this.editorService.openEditor({ |
| 181 | + original: { resource: e.element.diff.originalURI }, |
| 182 | + modified: { resource: e.element.diff.modifiedURI }, |
| 183 | + options: { preserveFocus: true } |
| 184 | + }); |
| 185 | + } else { |
| 186 | + this.editorService.openEditor({ |
| 187 | + resource: e.element.uri, |
| 188 | + options: { preserveFocus: true } |
| 189 | + }); |
| 190 | + } |
| 191 | + })); |
| 192 | + |
| 193 | + return store; |
| 194 | + } |
| 195 | + |
| 196 | + hasSameContent(other: IChatRendererContent): boolean { |
| 197 | + return other.kind === 'multiDiffData' && |
| 198 | + (other as any).multiDiffData?.resources?.length === this.content.multiDiffData.resources.length; |
| 199 | + } |
| 200 | + |
| 201 | + addDisposable(disposable: IDisposable): void { |
| 202 | + this._register(disposable); |
| 203 | + } |
| 204 | +} |
| 205 | + |
| 206 | +class ChatMultiDiffListDelegate implements IListVirtualDelegate<IChatMultiDiffItem> { |
| 207 | + getHeight(): number { |
| 208 | + return 22; |
| 209 | + } |
| 210 | + |
| 211 | + getTemplateId(): string { |
| 212 | + return 'chatMultiDiffItem'; |
| 213 | + } |
| 214 | +} |
| 215 | + |
| 216 | +interface IChatMultiDiffItemTemplate extends IDisposable { |
| 217 | + readonly label: IResourceLabel; |
| 218 | +} |
| 219 | + |
| 220 | +class ChatMultiDiffListRenderer implements IListRenderer<IChatMultiDiffItem, IChatMultiDiffItemTemplate> { |
| 221 | + static readonly TEMPLATE_ID = 'chatMultiDiffItem'; |
| 222 | + static readonly CHANGES_SUMMARY_CLASS_NAME = 'insertions-and-deletions'; |
| 223 | + |
| 224 | + readonly templateId: string = ChatMultiDiffListRenderer.TEMPLATE_ID; |
| 225 | + |
| 226 | + constructor(private labels: ResourceLabels) { } |
| 227 | + |
| 228 | + renderTemplate(container: HTMLElement): IChatMultiDiffItemTemplate { |
| 229 | + const label = this.labels.create(container, { supportHighlights: true, supportIcons: true }); |
| 230 | + return { label, dispose: () => label.dispose() }; |
| 231 | + } |
| 232 | + |
| 233 | + renderElement(element: IChatMultiDiffItem, _index: number, templateData: IChatMultiDiffItemTemplate): void { |
| 234 | + templateData.label.setFile(element.uri, { |
| 235 | + fileKind: FileKind.FILE, |
| 236 | + title: element.uri.path |
| 237 | + }); |
| 238 | + } |
| 239 | + |
| 240 | + disposeTemplate(templateData: IChatMultiDiffItemTemplate): void { |
| 241 | + templateData.dispose(); |
| 242 | + } |
| 243 | +} |
0 commit comments