[prompt instructions]: initial implementation

[legomushroom]

For #5292

[8153764]

For #5292

[8153764]

main

[roblourens]

Seems like it doesn't re-layout the widget after I add prompt instructions

[roblourens]

Maybe the lightbulb icon on the widget should be yellow?

[roblourens]

When I remove the instructions attachment, I see

ERR Maximum call stack size exceeded: RangeError: Maximum call stack size exceeded
    at dispose (vscode-file://vscode-app/Users/roblou/code/vscode/out/vs/base/common/lifecycle.js:234:23)
    at DisposableStore.clear (vscode-file://vscode-app/Users/roblou/code/vscode/out/vs/base/common/lifecycle.js:325:13)
    at DisposableStore.dispose (vscode-file://vscode-app/Users/roblou/code/vscode/out/vs/base/common/lifecycle.js:309:14)
    at ChatInstructionsAttachmentModel.dispose (vscode-file://vscode-app/Users/roblou/code/vscode/out/vs/base/common/lifecycle.js:398:21)
    at ChatInstructionsAttachmentModel.dispose (vscode-file://vscode-app/Users/roblou/code/vscode/out/vs/workbench/contrib/chat/browser/chatAttachmentModel/chatInstructionsAttachment.js:196:15)
    at DisposableMap.deleteAndDispose (vscode-file://vscode-app/Users/roblou/code/vscode/out/vs/base/common/lifecycle.js:638:31)
    at UniqueContainer.value (vscode-file://vscode-app/Users/roblou/code/vscode/out/vs/workbench/contrib/chat/browser/chatAttachmentModel/chatInstructionAttachmentsModel.js:92:30)
    at Emitter._deliver (vscode-file://vscode-app/Users/roblou/code/vscode/out/vs/base/common/event.js:966:22)
    at Emitter._deliverQueue (vscode-file://vscode-app/Users/roblou/code/vscode/out/vs/base/common/event.js:977:18)
    at Emitter.fire (vscode-file://vscode-app/Users/roblou/code/vscode/out/vs/base/common/event.js:1000:18)

[roblourens]

I also saw this layout once

[roblourens]

Just wondering about the name, in the UI it says "Instructions", but then the file is a "prompt"

[legomushroom]

It is not a file name but a folder where prompt instruction files (any .md file) are searched for.

We decided to use this path since it is short and more generic hence allows for different prompt file types to be stored here (e.g., instructions, snippets, etc.). This is all transient though, so I bet it will change couple of times in the nearest future 🤷

[roblourens]

If this is meant to look like the implicit widget, would it make sense to share the styles?

[legomushroom]

Yeah shared styles is what I had in the beginning but then decided that having separate ones is safer, so CSS changes a bit more isolated between components. Ideally we would have a set of common base styles shared between all similar components, but I didn't dare to do that refactoring in this PR reduce the PR scope 🤗

[roblourens]

Why does this get a lower opacity when disabled when the implicit widget doesn't? I might have avoided doing that in the implicit widget for color contrast accessibility reasons.

[legomushroom]

Thought it is a good idea to have a dimmed reference if it is disabled since it is a common UI language users are used to and to reduce visual noise 🤔
The 0.75 value is larger than some of the elements in the "normal" mode (e.g., the .chat-implicit-hint above) so the element remains prominent enough to not cause significant issues 🔍 Will keep it for now but will hold my ear to the ground for more feedback 👂

[roblourens]

Just a few questions, however none of my comments are blocking. Feel free to check it in! Looks nice

[legomushroom]

@roblourens

Seems like it doesn't re-layout the widget after I add prompt instructions

Yeah noticed the issue couple of times, but not sure what's causing this, will keep my eyes peeled 🔍

Maybe the lightbulb icon on the widget should be yellow?

Yes, I great idea! Made it yellow ✅

When I remove the instructions attachment, I see ERR Maximum call stack size exceeded..

Fixed 💃