fix: update modified files handling in Chat.client.tsx

This commit is contained in:
Hayat Bourgi 2025-04-17 12:24:07 +03:00 committed by Stijnus
parent dac37b4344
commit 2c635d5df2
2 changed files with 43 additions and 15 deletions

View File

@ -422,8 +422,16 @@ export const ChatImpl = memo(
chatStore.setKey('aborted', false);
if (modifiedFiles !== undefined) {
const userUpdateArtifact = filesToArtifacts(modifiedFiles, `${Date.now()}`);
if (modifiedFiles) {
// Convert the modifiedFiles object to an array of [filePath, file] entries
const modifiedFilesWithContent = Object.entries(modifiedFiles).reduce<Record<string, { content: string }>>((acc, [filePath, file]) => {
if (file?.type === 'file') {
acc[filePath] = { content: file.content };
}
return acc;
}, {});
const userUpdateArtifact = filesToArtifacts(modifiedFilesWithContent, `${Date.now()}`);
append({
role: 'user',
content: [

View File

@ -1,4 +1,4 @@
import { memo, useCallback, useEffect, useRef, useState } from 'react';
import { memo, useCallback, useEffect, useRef, useState, useMemo } from 'react';
import { useStore } from '@nanostores/react';
import { IconButton } from '~/components/ui/IconButton';
import { workbenchStore } from '~/lib/stores/workbench';
@ -6,6 +6,7 @@ import { PortDropdown } from './PortDropdown';
import { ScreenshotSelector } from './ScreenshotSelector';
import { expoUrlAtom } from '~/lib/stores/qrCodeStore';
import { ExpoQrModal } from '~/components/workbench/ExpoQrModal';
import type { PreviewInfo } from '~/lib/stores/previews';
type ResizeSide = 'left' | 'right' | null;
@ -56,16 +57,33 @@ export const Preview = memo(() => {
const [isPortDropdownOpen, setIsPortDropdownOpen] = useState(false);
const [isFullscreen, setIsFullscreen] = useState(false);
const hasSelectedPreview = useRef(false);
const previews = useStore(workbenchStore.previews);
const rawPreviews = useStore(workbenchStore.previews);
const previews = useMemo(() => {
if (rawPreviews && typeof rawPreviews === 'object' && !Array.isArray(rawPreviews)) {
return Object.values(rawPreviews)
.map((v) => v as unknown)
.filter(
(v): v is PreviewInfo =>
typeof v === 'object' &&
v !== null &&
typeof (v as any).port === 'number' &&
typeof (v as any).ready === 'boolean' &&
typeof (v as any).baseUrl === 'string',
);
}
return [];
}, [rawPreviews]);
const activePreview = previews[activePreviewIndex];
const [displayPath, setDisplayPath] = useState('/');
const [iframeUrl, setIframeUrl] = useState<string | undefined>();
const [isSelectionMode, setIsSelectionMode] = useState(false);
// Toggle between responsive mode and device mode
const [isDeviceModeOn, setIsDeviceModeOn] = useState(false);
// Use percentage for width
const [widthPercent, setWidthPercent] = useState<number>(37.5);
const [currentWidth, setCurrentWidth] = useState<number>(0);
@ -78,7 +96,6 @@ export const Preview = memo(() => {
pointerId: null as number | null,
});
// Reduce scaling factor to make resizing less sensitive
const SCALING_FACTOR = 1;
const [isWindowSizeDropdownOpen, setIsWindowSizeDropdownOpen] = useState(false);
@ -103,8 +120,11 @@ export const Preview = memo(() => {
}, [activePreview]);
const findMinPortIndex = useCallback(
(minIndex: number, preview: { port: number }, index: number, array: { port: number }[]) => {
return preview.port < array[minIndex].port ? index : minIndex;
(minIndex: number, preview: PreviewInfo, index: number, array: PreviewInfo[]) => {
const currentPort = typeof preview.port === 'string' ? parseInt(preview.port, 10) : preview.port;
const minPort = typeof array[minIndex].port === 'string' ? parseInt(array[minIndex].port, 10) : array[minIndex].port;
return currentPort < minPort ? index : minIndex;
},
[],
);
@ -454,11 +474,11 @@ export const Preview = memo(() => {
overflow: hidden;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.device-container {
position: relative;
}
.device-name {
position: absolute;
top: -30px;
@ -468,7 +488,7 @@ export const Preview = memo(() => {
font-size: 14px;
color: #333;
}
.device-frame {
position: relative;
border-radius: ${frameRadius};
@ -477,7 +497,7 @@ export const Preview = memo(() => {
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
overflow: hidden;
}
/* Notch */
.device-frame:before {
content: '';
@ -491,7 +511,7 @@ export const Preview = memo(() => {
border-radius: 4px;
z-index: 2;
}
/* Home button */
.device-frame:after {
content: '';
@ -505,7 +525,7 @@ export const Preview = memo(() => {
border-radius: 50%;
z-index: 2;
}
iframe {
border: none;
width: ${width}px;