mirror of
https://github.com/anomalyco/opencode.git
synced 2026-09-07 10:44:35 +00:00
feat(desktop): add dropzone to new sessions (#47303)
This commit is contained in:
usrnk1
GitHub
parent
0b3c45c948
commit
bd54dc508f
4 changed files with 157 additions and 73 deletions
60
packages/app/e2e/regression/new-session-dropzone.spec.ts
Normal file
60
packages/app/e2e/regression/new-session-dropzone.spec.ts
Normal file
|
|
@ -0,0 +1,60 @@
|
|||
import { expect, test } from "@playwright/test"
|
||||
import { mockOpenCodeServer } from "../utils/mock-server"
|
||||
import { expectAppVisible } from "../utils/waits"
|
||||
|
||||
const draftID = "draft_new_session_dropzone"
|
||||
const directory = "C:/OpenCode/NewSessionDropzone"
|
||||
const server = `http://${process.env.PLAYWRIGHT_SERVER_HOST ?? "127.0.0.1"}:${process.env.PLAYWRIGHT_SERVER_PORT ?? "4096"}`
|
||||
|
||||
test("shows the dropzone and attaches a dropped file", async ({ page }) => {
|
||||
await mockOpenCodeServer(page, {
|
||||
directory,
|
||||
project: {
|
||||
id: "proj_new_session_dropzone",
|
||||
worktree: directory,
|
||||
vcs: "git",
|
||||
name: "new-session-dropzone",
|
||||
time: { created: 1700000000000, updated: 1700000000000 },
|
||||
sandboxes: [],
|
||||
},
|
||||
provider: { all: [], connected: [], default: {} },
|
||||
sessions: [],
|
||||
pageMessages: () => ({ items: [] }),
|
||||
})
|
||||
await page.addInitScript(
|
||||
({ directory, draftID, server }) => {
|
||||
localStorage.setItem(
|
||||
"opencode.global.dat:server",
|
||||
JSON.stringify({
|
||||
projects: { local: [{ worktree: directory, expanded: true }] },
|
||||
lastProject: { local: directory },
|
||||
}),
|
||||
)
|
||||
localStorage.setItem(
|
||||
"opencode.window.browser.dat:tabs",
|
||||
JSON.stringify([{ type: "draft", draftID, server, directory }]),
|
||||
)
|
||||
},
|
||||
{ directory, draftID, server },
|
||||
)
|
||||
|
||||
await page.goto(`/new-session?draftId=${draftID}`)
|
||||
await expectAppVisible(page.locator('[data-component="composer-editor"]'))
|
||||
|
||||
const surface = page.locator('[data-component="new-session"]')
|
||||
const dropzone = page.locator('[data-component="session-dropzone"]')
|
||||
const transfer = await page.evaluateHandle(() => {
|
||||
const value = new DataTransfer()
|
||||
value.items.add(new File(["Dropzone fixture"], "dropzone.txt", { type: "text/plain" }))
|
||||
return value
|
||||
})
|
||||
|
||||
await expect(dropzone).toHaveCount(0)
|
||||
await surface.dispatchEvent("dragover", { dataTransfer: transfer })
|
||||
await expect(dropzone).toHaveAttribute("data-visible", "true")
|
||||
await expect(dropzone).toContainText("Drop files to add")
|
||||
|
||||
await surface.dispatchEvent("drop", { dataTransfer: transfer })
|
||||
await expect(page.locator('[data-component="composer-attachments"]')).toContainText("dropzone.txt")
|
||||
await expect(dropzone).toHaveCount(0)
|
||||
})
|
||||
87
packages/app/src/composer/dropzone.tsx
Normal file
87
packages/app/src/composer/dropzone.tsx
Normal file
|
|
@ -0,0 +1,87 @@
|
|||
import { Icon } from "@opencode-ai/ui/icon"
|
||||
import { Show, createMemo } from "solid-js"
|
||||
import { createStore } from "solid-js/store"
|
||||
import { useLanguage } from "@/runtime/i18n/language"
|
||||
import { createAnimatedPresence } from "@/runtime/animated-presence"
|
||||
|
||||
export function ComposerDropzone(props: {
|
||||
active: boolean
|
||||
input?: { image?: boolean; pdf?: boolean }
|
||||
identity?: () => unknown
|
||||
}) {
|
||||
const language = useLanguage()
|
||||
const [elements, setElements] = createStore<{ dropzone?: HTMLDivElement }>({})
|
||||
const label = createMemo(() => {
|
||||
if (!props.input?.image && !props.input?.pdf) return language.t("ui.promptInput.dropFiles")
|
||||
if (!props.input.pdf) return language.t("ui.promptInput.dropFiles.image")
|
||||
if (!props.input.image) return language.t("ui.promptInput.dropFiles.pdf")
|
||||
return language.t("ui.promptInput.dropFiles.imagePdf")
|
||||
})
|
||||
const presence = createAnimatedPresence(
|
||||
() => (props.active ? label() : undefined),
|
||||
() => elements.dropzone ?? null,
|
||||
props.identity,
|
||||
)
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
data-slot="session-dropzone-blur"
|
||||
data-visible={props.active}
|
||||
class="pointer-events-none absolute inset-0 z-[79] rounded-[inherit] opacity-[0.001] backdrop-blur-[1.5px] transition-opacity duration-200 ease-[cubic-bezier(0.215,0.61,0.355,1)] will-change-[opacity,backdrop-filter] data-[visible=true]:opacity-100 motion-reduce:transition-none"
|
||||
style={{
|
||||
"-webkit-mask-image":
|
||||
"linear-gradient(to right, transparent 0%, black 25%, black 75%, transparent 100%), linear-gradient(to bottom, transparent 0%, black 28%, black 72%, transparent 100%)",
|
||||
"-webkit-mask-composite": "source-in",
|
||||
"mask-image":
|
||||
"linear-gradient(to right, transparent 0%, black 25%, black 75%, transparent 100%), linear-gradient(to bottom, transparent 0%, black 28%, black 72%, transparent 100%)",
|
||||
"mask-composite": "intersect",
|
||||
}}
|
||||
/>
|
||||
<Show when={presence.present()}>
|
||||
<div
|
||||
ref={(element) => setElements("dropzone", element)}
|
||||
data-component="session-dropzone"
|
||||
data-visible={props.active}
|
||||
class="pointer-events-none absolute inset-0 z-[80] grid place-items-center overflow-hidden rounded-[inherit] bg-[color-mix(in_srgb,var(--v2-text-text-base)_var(--session-dropzone-wash),transparent)] opacity-100 transition-opacity duration-200 ease-[cubic-bezier(0.215,0.61,0.355,1)] data-[visible=false]:opacity-0 motion-reduce:transition-none"
|
||||
>
|
||||
<div class="absolute inset-0 bg-v2-background-bg-base/25" />
|
||||
<div
|
||||
class="absolute inset-y-0 left-1/2 w-full -translate-x-1/2 md:max-w-200 2xl:max-w-[1000px]"
|
||||
style={{
|
||||
"-webkit-mask-image": "linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%)",
|
||||
"mask-image": "linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%)",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
data-slot="session-dropzone-stripes"
|
||||
class="absolute inset-0 opacity-60"
|
||||
style={{
|
||||
background:
|
||||
"repeating-linear-gradient(135deg, transparent 0px, transparent 12px, color-mix(in srgb, var(--v2-text-text-base) var(--session-dropzone-stripe), transparent) 12px, color-mix(in srgb, var(--v2-text-text-base) var(--session-dropzone-stripe), transparent) 24px)",
|
||||
"-webkit-mask-image":
|
||||
"radial-gradient(ellipse 59% 40% at center, black 0%, rgba(0,0,0,0.72) 58%, transparent 100%)",
|
||||
"mask-image":
|
||||
"radial-gradient(ellipse 59% 40% at center, black 0%, rgba(0,0,0,0.72) 58%, transparent 100%)",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
data-slot="session-dropzone-content"
|
||||
class="relative flex translate-y-0 flex-col items-center gap-5 opacity-100 transition-[opacity,transform] duration-200 ease-[cubic-bezier(0.215,0.61,0.355,1)] data-[visible=false]:translate-y-1 data-[visible=false]:opacity-0 motion-reduce:transition-none"
|
||||
data-visible={props.active}
|
||||
>
|
||||
<div
|
||||
data-slot="session-dropzone-upload"
|
||||
class="flex size-10 items-center justify-center rounded-full bg-[var(--session-dropzone-card)] text-v2-icon-icon-muted shadow-[var(--v2-elevation-floating)]"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<Icon name="arrow-up" size="normal" class="text-v2-icon-icon-muted" />
|
||||
</div>
|
||||
<div class="text-[15px] font-[530] leading-6 text-v2-text-text-base">{presence.value()}</div>
|
||||
</div>
|
||||
</div>
|
||||
</Show>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
@ -6,6 +6,7 @@ import { Show, createMemo, createSignal } from "solid-js"
|
|||
import { Schema } from "effect"
|
||||
import createPresence from "solid-presence"
|
||||
import { Composer } from "@/composer/composer"
|
||||
import { ComposerDropzone } from "@/composer/dropzone"
|
||||
import type { ComposerModel } from "@/composer/model"
|
||||
import { PromptGitStatus, PromptWorkspaceSelector } from "@/new-session/workspace/selector"
|
||||
import {
|
||||
|
|
@ -54,6 +55,10 @@ export function NewSessionView(props: {
|
|||
data-component="new-session"
|
||||
class="relative flex-1 min-h-0 overflow-hidden rounded-[10px] bg-v2-background-bg-base shadow-[var(--v2-elevation-raised)]"
|
||||
>
|
||||
<ComposerDropzone
|
||||
active={props.composer.state.drag === "active"}
|
||||
input={props.composer.model.selection.current()?.capabilities.input}
|
||||
/>
|
||||
<div class="absolute inset-x-0 top-[25.375%] flex justify-center px-6">
|
||||
<div class={NEW_SESSION_CONTENT_WIDTH}>
|
||||
<Wordmark class="h-auto w-full text-v2-background-bg-inverse" />
|
||||
|
|
|
|||
|
|
@ -12,11 +12,10 @@ import {
|
|||
} from "solid-js"
|
||||
import { createStore } from "solid-js/store"
|
||||
import { ResizeHandle } from "@opencode-ai/ui/resize-handle"
|
||||
import { Icon } from "@opencode-ai/ui/icon"
|
||||
import { MessageTimeline, SessionSummaryPanel } from "@/session/timeline/message-timeline"
|
||||
import { useServer } from "@/runtime/server/current"
|
||||
import { useLanguage } from "@/runtime/i18n/language"
|
||||
import { projectForSession } from "@/shell/layout/helpers"
|
||||
import { ComposerDropzone } from "@/composer/dropzone"
|
||||
import type { SessionModel } from "@/session/model"
|
||||
import { SESSION_PANEL_WIDTH_MIN } from "@/session/session-panel-width"
|
||||
import { SessionPanelFrame } from "@/session/session-frame"
|
||||
|
|
@ -41,7 +40,6 @@ const SessionMobileFiles = lazy(async () => {
|
|||
export function SessionScreen(props: { session: SessionModel }) {
|
||||
const session = props.session
|
||||
const server = useServer()
|
||||
const language = useLanguage()
|
||||
const detailsProject = createMemo(() => {
|
||||
const info = session.data.info()
|
||||
return info ? projectForSession(info, server.ctx.sync.data.project) : undefined
|
||||
|
|
@ -63,7 +61,6 @@ export function SessionScreen(props: { session: SessionModel }) {
|
|||
const [elements, setElements] = createStore<{
|
||||
side?: HTMLDivElement
|
||||
bottomTerminal?: HTMLDivElement
|
||||
dropzone?: HTMLDivElement
|
||||
}>({})
|
||||
const sideVisible = createMemo(() => isDesktop() && screen.side.layout().visible)
|
||||
const sideTerminalVisible = createMemo(() => isDesktop() && screen.terminal.side() && screen.terminal.open())
|
||||
|
|
@ -140,19 +137,6 @@ export function SessionScreen(props: { session: SessionModel }) {
|
|||
timeline,
|
||||
visible: conversationVisible,
|
||||
})
|
||||
const dropLabel = createMemo(() => {
|
||||
const input = composer.drop.input()
|
||||
if (!input?.image && !input?.pdf) return language.t("ui.promptInput.dropFiles")
|
||||
if (!input.pdf) return language.t("ui.promptInput.dropFiles.image")
|
||||
if (!input.image) return language.t("ui.promptInput.dropFiles.pdf")
|
||||
return language.t("ui.promptInput.dropFiles.imagePdf")
|
||||
})
|
||||
const dropPresence = createAnimatedPresence(
|
||||
() => (composer.drop.active() ? dropLabel() : undefined),
|
||||
() => elements.dropzone ?? null,
|
||||
session.layout.tabKey,
|
||||
)
|
||||
|
||||
useUsageExceededDialogs()
|
||||
|
||||
const sessionErrorFallback = (error: unknown, reset: () => void) => {
|
||||
|
|
@ -215,63 +199,11 @@ export function SessionScreen(props: { session: SessionModel }) {
|
|||
|
||||
const sessionPanelContent = () => (
|
||||
<>
|
||||
<div
|
||||
data-slot="session-dropzone-blur"
|
||||
data-visible={composer.drop.active()}
|
||||
class="pointer-events-none absolute inset-0 z-[79] rounded-[inherit] opacity-[0.001] backdrop-blur-[1.5px] transition-opacity duration-200 ease-[cubic-bezier(0.215,0.61,0.355,1)] will-change-[opacity,backdrop-filter] data-[visible=true]:opacity-100 motion-reduce:transition-none"
|
||||
style={{
|
||||
"-webkit-mask-image":
|
||||
"linear-gradient(to right, transparent 0%, black 25%, black 75%, transparent 100%), linear-gradient(to bottom, transparent 0%, black 28%, black 72%, transparent 100%)",
|
||||
"-webkit-mask-composite": "source-in",
|
||||
"mask-image":
|
||||
"linear-gradient(to right, transparent 0%, black 25%, black 75%, transparent 100%), linear-gradient(to bottom, transparent 0%, black 28%, black 72%, transparent 100%)",
|
||||
"mask-composite": "intersect",
|
||||
}}
|
||||
<ComposerDropzone
|
||||
active={composer.drop.active()}
|
||||
input={composer.drop.input()}
|
||||
identity={session.layout.tabKey}
|
||||
/>
|
||||
<Show when={dropPresence.present()}>
|
||||
<div
|
||||
ref={(element) => setElements("dropzone", element)}
|
||||
data-component="session-dropzone"
|
||||
data-visible={composer.drop.active()}
|
||||
class="pointer-events-none absolute inset-0 z-[80] grid place-items-center overflow-hidden rounded-[inherit] bg-[color-mix(in_srgb,var(--v2-text-text-base)_var(--session-dropzone-wash),transparent)] opacity-100 transition-opacity duration-200 ease-[cubic-bezier(0.215,0.61,0.355,1)] data-[visible=false]:opacity-0 motion-reduce:transition-none"
|
||||
>
|
||||
<div class="absolute inset-0 bg-v2-background-bg-base/25" />
|
||||
<div
|
||||
class="absolute inset-y-0 left-1/2 w-full -translate-x-1/2 md:max-w-200 2xl:max-w-[1000px]"
|
||||
style={{
|
||||
"-webkit-mask-image": "linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%)",
|
||||
"mask-image": "linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%)",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
data-slot="session-dropzone-stripes"
|
||||
class="absolute inset-0 opacity-60"
|
||||
style={{
|
||||
background:
|
||||
"repeating-linear-gradient(135deg, transparent 0px, transparent 12px, color-mix(in srgb, var(--v2-text-text-base) var(--session-dropzone-stripe), transparent) 12px, color-mix(in srgb, var(--v2-text-text-base) var(--session-dropzone-stripe), transparent) 24px)",
|
||||
"-webkit-mask-image":
|
||||
"radial-gradient(ellipse 59% 40% at center, black 0%, rgba(0,0,0,0.72) 58%, transparent 100%)",
|
||||
"mask-image":
|
||||
"radial-gradient(ellipse 59% 40% at center, black 0%, rgba(0,0,0,0.72) 58%, transparent 100%)",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
data-slot="session-dropzone-content"
|
||||
class="relative flex translate-y-0 flex-col items-center gap-5 opacity-100 transition-[opacity,transform] duration-200 ease-[cubic-bezier(0.215,0.61,0.355,1)] data-[visible=false]:translate-y-1 data-[visible=false]:opacity-0 motion-reduce:transition-none"
|
||||
data-visible={composer.drop.active()}
|
||||
>
|
||||
<div
|
||||
data-slot="session-dropzone-upload"
|
||||
class="flex size-10 items-center justify-center rounded-full bg-[var(--session-dropzone-card)] text-v2-icon-icon-muted shadow-[var(--v2-elevation-floating)]"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<Icon name="arrow-up" size="normal" class="text-v2-icon-icon-muted" />
|
||||
</div>
|
||||
<div class="text-[15px] font-[530] leading-6 text-v2-text-text-base">{dropPresence.value()}</div>
|
||||
</div>
|
||||
</div>
|
||||
</Show>
|
||||
<Show when={!isDesktop() && !!session.identity.params.id}>{mobileTabs()}</Show>
|
||||
{/* Surface query errors without suspending session metadata while messages load. */}
|
||||
<Show when={timeline.resource.error}>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue