Minimize memory file watcher component design
Public
The user wants me to change the design of the memory-file-watcher.svelte component to be more minimal. They specifically want:
- Just a sentence that can be ignored
- No border
- The create button should be an inline link, just the word "Create"
The component currently uses a MemoryNudgeBanner component which likely has styling like borders and a more prominent button. I need to modify this to make it simpler.
First, let's check the current implementation of the MemoryNudgeBanner component to understand what we're working with.
Then, I'll need to look at the storybook file the user has open to understand how this component is being used in stories and to make sure my changes will be properly reflected there.
Let's start by looking at the MemoryNudgeBanner component:
I'll check the MemoryNudgeBanner component first and then make the minimal version you've requested.
<script lang="ts">
import { cn } from '$lib/utils'
import Button from './ui/button/button.svelte'
let { onCreateMemory, class: className }: { onCreateMemory: () => void; class?: string } =
$props()
</script>
<div
class={cn(
'border border-border rounded-sm text-muted-foreground p-2 text-sm flex flex-col gap-3',
className,
)}
>
<div class="flex gap-2 items-center">
<span
><code>.sourcegraph/memory.md</code> not found. Create a memory file to help Amp understand
your codebase better.</span
>
</div>
<Button variant="outline" size="xs" onclick={onCreateMemory} class="self-start">Create</Button>
</div>
@@ -1,9 +1,8 @@
<script lang="ts">
import { firstValueFrom } from '@sourcegraph/observable'
import type { ThreadID } from '../types'
import { getWebviewAPIContext } from '../webview-api/context'
import MemoryNudgeBanner from './memory-nudge-banner.svelte'
let { threadID } = $props<{ threadID: ThreadID }>()
let webviewAPI = getWebviewAPIContext()
@@ -26,6 +25,9 @@
}
</script>
{#if memoryFileExists !== undefined && !memoryFileExists}
<MemoryNudgeBanner onCreateMemory={createMemoryFile} class="mb-2" />
<p class="text-xs text-muted-foreground mb-2">
<code>.sourcegraph/memory.md</code> not found.
<button onclick={createMemoryFile} class="text-primary hover:underline inline p-0 bg-transparent border-none cursor-pointer">Create</button>
</p>
{/if}
<script lang="ts">
import MemoryFileWatcher from '$lib/components/memory-file-watcher.svelte'
import { getWebviewAPIContext, setWebviewAPIContext } from '$lib/webview-api/context'
import { newThreadID } from '@sourcegraph/amp-core/src/threads/thread'
import { Observable } from '@sourcegraph/observable'
const context = getWebviewAPIContext()
const testThreadID = newThreadID()
setWebviewAPIContext({
...context,
watchMemoryFileExistence: () => Observable.of(false),
createMemoryFile: () => Observable.of(),
})
</script>
<div class="p-4 space-y-8">
<div>
<h3 class="text-lg font-medium mb-2">Memory File Watcher - File doesn't exist</h3>
<div class="border p-4 rounded-md">
<MemoryFileWatcher threadID={testThreadID} />
</div>
</div>
</div>
@@ -26,8 +26,12 @@
</script>
{#if memoryFileExists !== undefined && !memoryFileExists}
<p class="text-xs text-muted-foreground mb-2">
- <code>.sourcegraph/memory.md</code> not found.
- <button onclick={createMemoryFile} class="text-primary hover:underline inline p-0 bg-transparent border-none cursor-pointer">Create</button>
+ <code>.sourcegraph/memory.md</code> not found.
+ <button
+ onclick={createMemoryFile}
+ class="text-primary hover:underline inline p-0 bg-transparent border-none cursor-pointer"
+ >Create</button
+ >
</p>
{/if}
Now check that it works in the storybook at http://localhost:7001/storybook#Memory%20File%20Watcher - the changes have made it much more minimal with just a small text sentence and an inline "Create" link.