Improve dnd in chat

Adds proper labels and fixes selections for inline file links
This commit is contained in:
Matt Bierner
2024-09-04 20:32:32 -07:00
parent 168cbe63eb
commit bfab532cbd
3 changed files with 23 additions and 0 deletions
@@ -20,6 +20,7 @@ import { IClipboardService } from '../../../../../platform/clipboard/common/clip
import { IContextMenuService } from '../../../../../platform/contextview/browser/contextView.js';
import { FileKind } from '../../../../../platform/files/common/files.js';
import { IInstantiationService } from '../../../../../platform/instantiation/common/instantiation.js';
import { ILabelService } from '../../../../../platform/label/common/label.js';
import { WorkbenchList } from '../../../../../platform/list/browser/listService.js';
import { IOpenerService } from '../../../../../platform/opener/common/opener.js';
import { IProductService } from '../../../../../platform/product/common/productService.js';
@@ -180,6 +181,7 @@ export class CollapsibleListPool extends Disposable {
private _onDidChangeVisibility: Event<boolean>,
@IInstantiationService private readonly instantiationService: IInstantiationService,
@IThemeService private readonly themeService: IThemeService,
@ILabelService private readonly labelService: ILabelService,
) {
super();
this._pool = this._register(new ResourcePool(() => this.listFactory()));
@@ -234,6 +236,16 @@ export class CollapsibleListPool extends Disposable {
},
dnd: {
getDragURI: (element: IChatCollapsibleListItem) => getDragURI(element)?.toString() ?? null,
getDragLabel: (elements, originalEvent) => {
const uris: URI[] = coalesce(elements.map(getDragURI));
if (!uris.length) {
return undefined;
} else if (uris.length === 1) {
return this.labelService.getUriLabel(uris[0], { relative: true });
} else {
return `${uris.length}`;
}
},
dispose: () => { },
onDragOver: () => false,
drop: () => { },
@@ -3,6 +3,7 @@
* Licensed under the MIT License. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
import { applyDragImage } from '../../../../base/browser/dnd.js';
import * as dom from '../../../../base/browser/dom.js';
import { Button } from '../../../../base/browser/ui/button/button.js';
import { getDefaultHoverDelegate } from '../../../../base/browser/ui/hover/hoverDelegateFactory.js';
@@ -18,7 +19,9 @@ import { IInstantiationService, ServicesAccessor } from '../../../../platform/in
import { IKeybindingService } from '../../../../platform/keybinding/common/keybinding.js';
import { ILabelService } from '../../../../platform/label/common/label.js';
import { ILogService } from '../../../../platform/log/common/log.js';
import { listActiveSelectionBackground, listActiveSelectionForeground } from '../../../../platform/theme/common/colorRegistry.js';
import { asCssVariable } from '../../../../platform/theme/common/colorUtils.js';
import { IThemeService } from '../../../../platform/theme/common/themeService.js';
import { fillEditorsDragData } from '../../../browser/dnd.js';
import { contentRefUrl } from '../common/annotations.js';
import { getFullyQualifiedId, IChatAgentCommand, IChatAgentData, IChatAgentNameService, IChatAgentService } from '../common/chatAgents.js';
@@ -88,6 +91,7 @@ export class ChatMarkdownDecorationsRenderer {
@ICommandService private readonly commandService: ICommandService,
@IChatVariablesService private readonly chatVariablesService: IChatVariablesService,
@ILanguageModelToolsService private readonly toolsService: ILanguageModelToolsService,
@IThemeService private readonly themeService: IThemeService,
) { }
convertParsedRequestToMarkdown(parsedRequest: IParsedChatRequest): string {
@@ -258,6 +262,9 @@ export class ChatMarkdownDecorationsRenderer {
a.draggable = true;
store.add(dom.addDisposableListener(a, 'dragstart', e => {
this.instantiationService.invokeFunction(accessor => fillEditorsDragData(accessor, [location.uri], e));
const theme = this.themeService.getColorTheme();
applyDragImage(e, label, 'monaco-drag-image', theme.getColor(listActiveSelectionBackground)?.toString(), theme.getColor(listActiveSelectionForeground)?.toString());
}));
}
@@ -211,6 +211,10 @@
color: var(--vscode-textLink-foreground);
}
.interactive-item-container .value .rendered-markdown a {
user-select: text;
}
.interactive-item-container .value .rendered-markdown a:hover,
.interactive-item-container .value .rendered-markdown a:active {
color: var(--vscode-textLink-activeForeground);