diff --git a/extensions/spectacular/webview-ui/src/components/PreviewImage.tsx b/extensions/spectacular/webview-ui/src/components/PreviewImage.tsx
new file mode 100644
index 00000000..c5056da9
--- /dev/null
+++ b/extensions/spectacular/webview-ui/src/components/PreviewImage.tsx
@@ -0,0 +1,39 @@
+import { DialogTrigger } from '@radix-ui/react-dialog';
+import { XIcon } from 'lucide-react';
+import React from 'react';
+
+import { Dialog, DialogContent } from './ui/dialog';
+import { cn } from '@/lib/utils';
+
+interface PreviewImageProps extends React.ImgHTMLAttributes
{
+ handleRemoveImage: () => void;
+ src: string;
+ // when set to true, it will stop the propagation of the escape key event and prevent the parent dialog from closing
+ stopEscapePropagation?: boolean;
+}
+
+export function PreviewImage({
+ handleRemoveImage,
+ src,
+ stopEscapePropagation,
+ className,
+ ...props
+}: PreviewImageProps) {
+ return (
+
+ handleRemoveImage()}
+ className="absolute right-1 top-1 -translate-y-1/2 translate-x-1/2 rounded-full bg-black text-white"
+ >
+
+
+
+
+ stopEscapePropagation && e.stopPropagation()}>
+
+
+ )
+}
diff --git a/extensions/spectacular/webview-ui/src/components/Tasks.tsx b/extensions/spectacular/webview-ui/src/components/Tasks.tsx
index b9d847a0..e0500df8 100644
--- a/extensions/spectacular/webview-ui/src/components/Tasks.tsx
+++ b/extensions/spectacular/webview-ui/src/components/Tasks.tsx
@@ -1,6 +1,4 @@
-import * as vscode from "vscode";
-
-import { useState, useEffect, useCallback, useRef } from "react";
+import { useState, useEffect, useCallback, useRef, useMemo } from "react";
import { Card, CardHeader, CardTitle, CardContent } from "./ui/card";
import { RpcClient } from "../RpcClient";
import { Button } from "./ui/button";
@@ -19,9 +17,9 @@ import { MouseEvent, KeyboardEvent } from "react";
import Ascii from "./Ascii";
import OnboardingSection from './OnboardingSection';
import "diff2html/bundles/css/diff2html.min.css";
-import { Link, useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
import AutoExpandingTextarea from "./AutoExpandingTextarea";
-import { DehydratedTask, TaskMode, AssistantInfo } from "../types";
+import { DehydratedTask, TaskMode, AssistantInfo, UserAttachedImage } from "../types";
import {
Select,
SelectContent,
@@ -34,6 +32,10 @@ import { AddFileButton } from "./AddFileButton";
import * as strings from "@/utilities/strings";
import { FastFilePicker } from "./FastFilePicker";
import { EventManager } from "@/eventManager";
+import { imagePasteHandler, showNotification } from '@/lib/utils';
+import { PreviewImage } from './PreviewImage';
+import { CustomError } from '@/lib/errors';
+import { MAX_IMAGES } from '@/constants';
// Utility function to format the date
function formatDate(date: Date): string {
@@ -69,6 +71,7 @@ export function Tasks({
const [gitConfigError, setGitConfigError] = useState(null);
const navigate = useNavigate();
const [workspaceFilePaths, setWorkspaceFilePaths] = useState([]);
+ const [images, setImages] = useState([]);
const [meltyMindFilePaths, setMeltyMindFilePaths] = useState(
initialMeltyMindFiles || []
);
@@ -81,7 +84,6 @@ export function Tasks({
});
const [suggestions, setSuggestions] = useState([]);
-
useEffect(() => {
if (shouldFocus) {
textareaRef.current?.focus();
@@ -144,8 +146,8 @@ export function Tasks({
[fetchTasks]
);
- const handleSendMessage = useCallback((text: string, taskId: string) => {
- rpcClient.run("chatMessage", { text, taskId });
+ const handleSendMessage = useCallback((text: string, taskId: string, images?: UserAttachedImage[]) => {
+ rpcClient.run("chatMessage", { text, taskId, images });
}, []);
/* =====================================================
@@ -174,7 +176,7 @@ export function Tasks({
const didActivate = await rpcClient.run("activateTask", { taskId });
if (didActivate) {
- handleSendMessage(message, taskId);
+ handleSendMessage(message, taskId, images);
navigate(`/task/${taskId}`);
}
}
@@ -228,6 +230,11 @@ export function Tasks({
setShouldFocus(true);
}, []);
+ const handleDropImage = useCallback((idx: number) => {
+ const updatedImages = images.filter((_, i) => i !== idx);
+ setImages(updatedImages);
+ }, [images]);
+
async function activateAndNavigateToTask(taskId: string) {
const didActivate = await rpcClient.run("activateTask", { taskId });
if (didActivate) {
@@ -301,6 +308,25 @@ export function Tasks({
}, [fetchTasks, fetchFilePaths, checkGitConfig, addSuggestion]); // DO NOT add anything to the initialization dependency array that isn't a constant
+ const handlePaste = async (event: React.ClipboardEvent) => {
+ try {
+ await imagePasteHandler(event, (imgs) => {
+ const totalImages = images.length + imgs.length;
+ if (totalImages > MAX_IMAGES) {
+ throw new CustomError(`You can only attach up to ${MAX_IMAGES} images.`);
+ }
+
+ setImages(i => [...i, ...imgs]);
+ })
+ } catch (error) {
+ console.error(error)
+ let errorMessage = "Failed to paste image. Please try again.";
+ if (error instanceof CustomError) {
+ errorMessage = error.getDisplayMessage();
+ }
+ showNotification(errorMessage, 'error');
+ }
+ }
return (
@@ -330,13 +356,16 @@ export function Tasks({
-
-
Git config error
-
Oops! Try restarting Melty?
-
{gitConfigError}
+ (
+ gitConfigError &&
+
+
+
Git config error
+
Oops! Try restarting Melty?
+
{gitConfigError}
+
-
+ )
) : (
<>
setMessageText(e.target.value)}
+ onPaste={handlePaste}
onKeyDown={handleKeyDown}
className="flex-grow p-3 pr-12 pb-12"
ref={textareaRef}
@@ -422,7 +452,7 @@ export function Tasks({
Melty can see your codebase structure but not the full
content of your files. Too much context confuses language
- models.
+ models. Melty can also see any images you attach/paste.
{" "}
Only add files that are helpful to the current task.
@@ -460,6 +490,17 @@ export function Tasks({
))}