Val Town Code SearchReturn to Val Town

172
173- **Redirects:** Use `return new Response(null, { status: 302, headers: { Location: "/place/to/redirect" }})` instead of `Response.redirect` which is broken
174- **Images:** Avoid external images or base64 images. Use emojis, unicode symbols, or icon fonts/libraries instead
175- **AI Image:** To inline generate an AI image use: `<img src="https://maxm-imggenurl.web.val.run/the-description-of-your-image" />`
176- **Storage:** DO NOT use the Deno KV module for storage
177- **Browser APIs:** DO NOT use the `alert()`, `prompt()`, or `confirm()` methods

19  }
20
21  const { messages, project, branchId, anthropicApiKey, selectedFiles, images } = await c.req.json();
22  console.log("Original messages:", JSON.stringify(messages, null, 2));
23  console.log("Images received:", JSON.stringify(images, null, 2));
24
25  // Check if API key is available
47  let coreMessages = convertToCoreMessages(messages);
48
49  // If there are images, we need to add them to the last user message
50  if (images && Array.isArray(images) && images.length > 0) {
51    // Find the last user message
52    const lastUserMessageIndex = coreMessages.findIndex(
70      };
71
72      // Add each image to the content array using the correct ImagePart format
73      for (const image of images) {
74        if (image && image.url) {
75          // Extract mime type from data URL if available
76          let mimeType = undefined;
77          if (image.url.startsWith("data:")) {
78            const matches = image.url.match(/^data:([^;]+);/);
79            if (matches && matches.length > 1) {
80              mimeType = matches[1];
83
84          newUserMessage.content.push({
85            type: "image",
86            image: image.url,
87            mimeType,
88          });

2import { type Message } from "https://esm.sh/@ai-sdk/react?dev&deps=react@18.2.0&react-dom@18.2.0";
3import ReactMarkdown from "https://esm.sh/react-markdown?dev&deps=react@18.2.0&react-dom@18.2.0";
4import { ImagePreview } from "./ImageUpload.tsx";
5
6// Helper function to detect language from file path
322    );
323  }
324  if (part.type === "image") {
325    // Handle both formats: {image: {url: string}} and {image: string}
326    const imageUrl = typeof part.image === "string"
327      ? part.image
328      : part.image.url || (part.image as any).source?.url;
329
330    return (
331      <div className="mt-2">
332        <img
333          src={imageUrl}
334          alt="Uploaded image"
335          className="max-h-64 max-w-full object-contain rounded"
336        />
338    );
339  }
340  // Handle multiple images in a single part
341  if (part.type === "images") {
342    return <ImagePreview images={part.images.map(img => img.url)} />;
343  }
344}

2import React, { useRef, useState } from "https://esm.sh/react@18.2.0?dev";
3
4// Maximum number of images that can be uploaded
5export const PROMPT_IMAGE_LIMIT = 5;
6
7interface ImageUploadProps {
8  images: (string | null)[];
9  setImages: (images: (string | null)[]) => void;
10  processFiles: (files: File[]) => void;
11}
12
13export function ImageUpload({ images, setImages, processFiles }: ImageUploadProps) {
14  const fileInputRef = useRef<HTMLInputElement>(null);
15
21  };
22
23  // Handle removing an image
24  const removeImage = (index: number) => {
25    const newImages = [...images];
26    newImages.splice(index, 1);
27    setImages(newImages);
28  };
29
30  // Check if we've reached the image limit
31  const isAtLimit = images.filter(Boolean).length >= PROMPT_IMAGE_LIMIT;
32
33  return (
34    <div className="w-full">
35      {/* Image previews */}
36      {images.length > 0 && (
37        <div className="flex flex-wrap gap-2 mb-2">
38          {images.map((image, index) => (
39            <div key={index} className="relative">
40              {image ? (
41                <div className="relative group">
42                  <img 
43                    src={image} 
44                    alt={`Uploaded ${index + 1}`} 
45                    className="h-16 w-16 object-cover rounded border border-gray-300"
47                  <button
48                    className="absolute top-0 right-0 bg-red-500 text-white rounded-full w-5 h-5 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"
49                    onClick={() => removeImage(index)}
50                    title="Remove image"
51                  >
52                    ×
68        ref={fileInputRef}
69        onChange={handleFileChange}
70        accept="image/*"
71        multiple
72        className="hidden"
80
81// Process files utility function - moved from the component to be reusable
82export const processFiles = async (files: File[], images: (string | null)[], setImages: (images: (string | null)[]) => void) => {
83  // Filter for image files only
84  const imageFiles = files.filter(file => file.type.startsWith('image/'));
85  
86  // Limit the number of images
87  const filesToProcess = imageFiles.slice(0, PROMPT_IMAGE_LIMIT - images.filter(Boolean).length);
88  
89  if (filesToProcess.length === 0) return;
90
91  // Add null placeholders for loading state
92  const newImages = [...images, ...Array(filesToProcess.length).fill(null)];
93  setImages(newImages);
94
95  // Process each file
96  const processedImages = await Promise.all(
97    filesToProcess.map(async (file) => {
98      return await readFileAsDataURL(file);
100  );
101
102  // Replace null placeholders with actual images
103  const updatedImages = [...images];
104  processedImages.forEach((dataUrl, index) => {
105    updatedImages[images.length + index] = dataUrl;
106  });
107  
108  setImages(updatedImages.slice(0, PROMPT_IMAGE_LIMIT));
109};
110
115    reader.onload = () => {
116      const result = reader.result as string;
117      console.log("Image loaded, size:", result.length, "bytes");
118      resolve(result);
119    };
123};
124
125// Component to display images in messages
126export function ImagePreview({ images }: { images: string[] }) {
127  const [expandedImage, setExpandedImage] = useState<string | null>(null);
128
129  if (!images || images.length === 0) return null;
130
131  return (
132    <div className="mt-2">
133      <div className="flex flex-wrap gap-2">
134        {images.map((image, index) => (
135          <div key={index} className="relative">
136            <img
137              src={image}
138              alt={`Image ${index + 1}`}
139              className="max-h-32 max-w-32 object-contain rounded cursor-pointer"
140              onClick={() => setExpandedImage(image)}
141            />
142          </div>
144      </div>
145
146      {/* Modal for expanded image */}
147      {expandedImage && (
148        <div 
149          className="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50"
150          onClick={() => setExpandedImage(null)}
151        >
152          <div className="max-w-[90%] max-h-[90%]">
153            <img
154              src={expandedImage}
155              alt="Expanded view"
156              className="max-w-full max-h-full object-contain"

9import { ChatInput } from "./ChatInput.tsx";
10import { ApiKeyWarning } from "./ApiKeyWarning.tsx";
11import { processFiles } from "./ImageUpload.tsx";
12import { Preview } from "./Preview.tsx";
13
26  const [soundEnabled, setSoundEnabled] = useLocalStorage<boolean>("soundEnabled", true);
27  const [selectedFiles, setSelectedFiles] = useState<string[]>([]);
28  const [images, setImages] = useState<(string | null)[]>([]);
29  const [isDragging, setIsDragging] = useState(false);
30
60    bearerToken,
61    selectedFiles,
62    images,
63    soundEnabled,
64  });
95    
96    if (e.dataTransfer.files && !running) {
97      processFiles(Array.from(e.dataTransfer.files), images, setImages);
98    }
99  };
125      
126      if (e.dataTransfer?.files && !running) {
127        processFiles(Array.from(e.dataTransfer.files), images, setImages);
128      }
129    };
142      document.removeEventListener('drop', handleDocumentDrop);
143    };
144  }, [images, running, setImages]);
145
146  return (
197          handleSubmit={handleSubmit}
198          running={running}
199          images={images}
200          setImages={setImages}
201          isDragging={isDragging}
202        />

1/** @jsxImportSource https://esm.sh/react@18.2.0?dev */
2import React, { useEffect, useRef, useState } from "https://esm.sh/react@18.2.0?dev";
3import { ImageUpload, processFiles } from "./ImageUpload.tsx";
4
5interface ChatInputProps {
8  handleSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
9  running: boolean;
10  images: (string | null)[];
11  setImages: React.Dispatch<React.SetStateAction<(string | null)[]>>;
12  isDragging: boolean;
13}
18  handleSubmit,
19  running,
20  images,
21  setImages,
22  isDragging,
23}: ChatInputProps) {
43  const handleFormSubmit = (e: React.FormEvent<HTMLFormElement>) => {
44    e.preventDefault();
45    const validImages = images.filter((img): img is string => typeof img === "string");
46    console.log("Submitting with images:", validImages);
47    if (input.trim() || validImages.length > 0) {
48      handleSubmit(e);
49      setImages([]);
50    }
51  };
52
53  const handleProcessFiles = (files: File[]) => {
54    processFiles(files, images, setImages);
55  };
56
61      disabled={running}
62    >
63      {images.length > 0 && (
64        <ImageUpload
65          images={images}
66          setImages={setImages}
67          processFiles={handleProcessFiles}
68        />
82              if (e.key === "Enter" && !e.shiftKey && !isMobile) {
83                e.preventDefault();
84                if (input.trim() || images.filter(Boolean).length > 0) {
85                  handleFormSubmit(e as any);
86                }
103              }
104            }}
105            accept="image/*"
106            multiple
107            className="hidden"
139      </div>
140      
141      {/* Attach images button below textarea */}
142      {!running && (
143        <div className="flex justify-start mt-1 mb-2">
150              }
151            }}
152            title="Attach images"
153          >
154            <span>📎</span> Attach images
155          </button>
156        </div>
162          <div className="bg-white p-6 rounded-lg shadow-lg text-center">
163            <div className="text-2xl mb-2">📁</div>
164            <div className="text-xl font-semibold">Drop images here</div>
165          </div>
166        </div>

3This is a lightweight Blob Admin interface to view and debug your Blob data.
4
5![Screenshot 2024-11-22 at 15.43.43@2x.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/d075a4ee-93ec-4cdd-4823-7c8aee593f00/public)
6
7To use this, fork it to your account. 

61  const { ValTown } = await import("npm:@valtown/sdk");
62  const vt = new ValTown();
63  const { email: authorEmail, profileImageUrl, username } = await vt.me.profile.retrieve();
64  // const authorEmail = me.email;
65
129
130  c.set("email", email);
131  c.set("profile", { profileImageUrl, username });
132  await next();
133};

437          {profile && (
438            <div className="flex items-center space-x-4">
439              <img src={profile.profileImageUrl} alt="Profile" className="w-8 h-8 rounded-full" />
440              <span>{profile.username}</span>
441              <a href="/auth/logout" className="text-blue-400 hover:text-blue-300">Logout</a>
580                            alt="Blob content"
581                            className="max-w-full h-auto"
582                            onError={() => console.error("Error loading image")}
583                          />
584                        </div>
630                  <li>Create public shareable links for blobs</li>
631                  <li>View and manage public folder</li>
632                  <li>Preview images directly in the interface</li>
633                </ul>
634              </div>

1import addCreation from "./addCreation";
2import fetchCreations from "./fetchCreations";
3import getCreationImage from "./getCreationImage";
4import updateTable from "./updateTable";
5
11    return addCreation(req);
12  if (req.method == "GET" && url.pathname == "/creations" && url.searchParams.has("c"))
13    return getCreationImage(req);
14  if (req.method == "GET" && url.pathname == "/creations")
15    return fetchCreations(req);