fix(desktop): refine composer dropzone

packages/app/src/components/prompt-input-v2.tsx

@@ -48,12 +48,20 @@ export function PromptInputV2Composer(props: PromptInputV2ComposerProps) {
   const dialog = useDialog()
   const command = useCommand()
   const language = useLanguage()
+  const dropLabel = createMemo(() => {
+    const input = props.controller.model.selection.current()?.capabilities.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")
+  })
 
   return (
     <div class="flex flex-col gap-3">
       <PromptInputV2
         controller={props.controller}
         borderUnderlay={props.borderUnderlay}
+        dropLabel={dropLabel()}
         class={props.class}
         variantControlVisible={!props.controller.model.loading}
         attachKeybind={command.keybindParts("file.attach")}

packages/session-ui/src/v2/components/prompt-input/index.tsx

@@ -39,6 +39,7 @@ export type PromptInputV2Props = {
   disabled?: boolean
   readOnly?: boolean
   borderUnderlay?: boolean
+  dropLabel?: string
   class?: string
   modelControl?: JSX.Element
   variantControlVisible?: boolean
@@ -109,11 +110,10 @@ export function PromptInputV2(props: PromptInputV2Props) {
       </Show>
       <form
         data-component="prompt-input-v2"
-        data-dock-border-underlay={props.borderUnderlay ? "v2" : undefined}
+        data-dock-border-underlay={props.borderUnderlay && state.drag !== "active" ? "v2" : undefined}
         class="group/prompt-input relative min-h-[96px] w-full overflow-clip rounded-xl bg-v2-background-bg-base"
         classList={{
-          "shadow-[var(--v2-elevation-raised)]": !props.borderUnderlay,
+          "shadow-[var(--v2-elevation-raised)]": !props.borderUnderlay && state.drag !== "active",
-          "border border-v2-icon-icon-info border-dashed": state.drag === "active",
         }}
         onSubmit={(event) => {
           event.preventDefault()
@@ -125,8 +125,22 @@ export function PromptInputV2(props: PromptInputV2Props) {
         onDrop={props.controller.onDrop}
       >
         <Show when={state.drag === "active"}>
-          <div class="pointer-events-none absolute inset-0 z-20 grid place-items-center rounded-xl bg-v2-background-bg-base/90 text-v2-text-text-base">
+          <div class="pointer-events-none absolute inset-0 z-20 grid place-items-center rounded-xl bg-[color-mix(in_srgb,var(--v2-background-bg-accent)_5%,var(--v2-background-bg-base))] text-v2-text-text-muted">
-            {i18n.t("ui.promptInput.dropFiles")}
+            <svg class="absolute inset-0 size-full" aria-hidden="true">
+              <rect
+                x="0.25"
+                y="0.25"
+                width="calc(100% - 0.5px)"
+                height="calc(100% - 0.5px)"
+                rx="11.75"
+                fill="none"
+                stroke="var(--v2-border-border-focus)"
+                stroke-width="0.5"
+                stroke-dasharray="3 3"
+                stroke-dashoffset="1.5"
+              />
+            </svg>
+            {props.dropLabel ?? i18n.t("ui.promptInput.dropFiles")}
           </div>
         </Show>
 

packages/ui/src/i18n/en.ts

@@ -124,7 +124,10 @@ export const dict: Record<string, string> = {
 
   "ui.promptInput.noMatchingItems": "No matching items",
   "ui.promptInput.commands": "Commands",
-  "ui.promptInput.dropFiles": "Drop files to attach",
+  "ui.promptInput.dropFiles": "Drop files to add",
+  "ui.promptInput.dropFiles.image": "Drop images or files to add",
+  "ui.promptInput.dropFiles.pdf": "Drop PDFs or files to add",
+  "ui.promptInput.dropFiles.imagePdf": "Drop images, PDFs, or files to add",
   "ui.promptInput.removeAttachment": "Remove attachment",
   "ui.promptInput.label": "Prompt",
   "ui.promptInput.placeholder.shell": "Enter shell command...",