diff --git a/src/apps/chat/components/composer/llmattachments/LLMAttachmentButton.tsx b/src/apps/chat/components/composer/llmattachments/LLMAttachmentButton.tsx
index 5facff657..9188f02f4 100644
--- a/src/apps/chat/components/composer/llmattachments/LLMAttachmentButton.tsx
+++ b/src/apps/chat/components/composer/llmattachments/LLMAttachmentButton.tsx
@@ -19,7 +19,8 @@ import WarningRoundedIcon from '@mui/icons-material/WarningRounded';
import { RenderImageURL } from '~/modules/blocks/image/RenderImageURL';
import { GoodTooltip } from '~/common/components/GoodTooltip';
-import { LiveFileIcon } from '~/common/livefile/LiveFileIcon';
+import { LiveFileIcon } from '~/common/livefile/LiveFileIcons';
+import { TooltipOutlined } from '~/common/components/TooltipOutlined';
import { ellipsizeFront, ellipsizeMiddle } from '~/common/util/textUtils';
import { liveFileInAttachmentFragment } from '~/common/livefile/liveFile';
@@ -139,9 +140,13 @@ function attachmentIcons(attachmentDraft: AttachmentDraft): React.ReactNode {
{/*))}*/}
{/*{activeConterters.some(c => c.id.startsWith('url-page-')) ? : null}*/}
- {activeConterters.map(c => {
- const Icon = converterTypeToIconMap[c.id] ?? null;
- return Icon ? : null;
+ {activeConterters.map((_converter, idx) => {
+ const Icon = converterTypeToIconMap[_converter.id] ?? null;
+ return !Icon ? null : (
+
+
+
+ );
})}
;
}
@@ -264,7 +269,11 @@ export function LLMAttachmentButton(props: {
{isOutputLoading && }
{/* Live file icon */}
- {hasLiveFile && }
+ {hasLiveFile && (
+
+
+
+ )}
>}
)}
diff --git a/src/apps/chat/components/composer/llmattachments/LLMAttachmentMenu.tsx b/src/apps/chat/components/composer/llmattachments/LLMAttachmentMenu.tsx
index a02a22e70..6104f5b9e 100644
--- a/src/apps/chat/components/composer/llmattachments/LLMAttachmentMenu.tsx
+++ b/src/apps/chat/components/composer/llmattachments/LLMAttachmentMenu.tsx
@@ -14,7 +14,7 @@ import { showImageDataRefInNewTab } from '~/modules/blocks/image/RenderImageRefD
import { CloseableMenu } from '~/common/components/CloseableMenu';
import { DMessageAttachmentFragment, isDocPart, isImageRefPart } from '~/common/stores/chat/chat.fragments';
-import { LiveFileIcon } from '~/common/livefile/LiveFileIcon';
+import { LiveFileIcon } from '~/common/livefile/LiveFileIcons';
import { copyToClipboard } from '~/common/util/clipboardUtils';
import { liveFileInAttachmentFragment } from '~/common/livefile/liveFile';
import { showImageDataURLInNewTab } from '~/common/util/imageUtils';
@@ -184,12 +184,6 @@ export function LLMAttachmentMenu(props: {
) : (
- {/* LiveFile notice */}
- {hasLiveFile && !!draftInput && (
- }>
- LiveFile is supported
-
- )}
{/* <- inputs */}
{!!draftInput && (
@@ -271,6 +265,14 @@ export function LLMAttachmentMenu(props: {
)}
+
+ {/* LiveFile notice */}
+ {hasLiveFile && !!draftInput && (
+ }>
+ LiveFile is supported
+
+ )}
+
)}
diff --git a/src/apps/chat/components/message/fragments-attachment-doc/DocAttachmentFragmentButton.tsx b/src/apps/chat/components/message/fragments-attachment-doc/DocAttachmentFragmentButton.tsx
index 6b46e36a3..0b98a23c1 100644
--- a/src/apps/chat/components/message/fragments-attachment-doc/DocAttachmentFragmentButton.tsx
+++ b/src/apps/chat/components/message/fragments-attachment-doc/DocAttachmentFragmentButton.tsx
@@ -1,7 +1,7 @@
import * as React from 'react';
import type { SxProps } from '@mui/joy/styles/types';
-import { Box, Button, ColorPaletteProp, Tooltip } from '@mui/joy';
+import { Box, Button, ColorPaletteProp } from '@mui/joy';
import AbcIcon from '@mui/icons-material/Abc';
import CodeIcon from '@mui/icons-material/Code';
import ExpandCircleDownIcon from '@mui/icons-material/ExpandCircleDown';
@@ -13,7 +13,8 @@ import TextureIcon from '@mui/icons-material/Texture';
import { ContentScaling, themeScalingMap } from '~/common/app.theme';
import { DMessageAttachmentFragment, DMessageFragmentId, isDocPart } from '~/common/stores/chat/chat.fragments';
-import { LiveFileIcon } from '~/common/livefile/LiveFileIcon';
+import { LiveFileIcon } from '~/common/livefile/LiveFileIcons';
+import { TooltipOutlined } from '~/common/components/TooltipOutlined';
import { ellipsizeMiddle } from '~/common/util/textUtils';
import { liveFileInAttachmentFragment } from '~/common/livefile/liveFile';
@@ -124,9 +125,9 @@ export function DocAttachmentFragmentButton(props: {
{/**/}
{liveFileInAttachmentFragment(fragment) && (
-
+
-
+
)}
);
diff --git a/src/apps/chat/components/message/fragments-attachment-doc/useLiveFile.tsx b/src/apps/chat/components/message/fragments-attachment-doc/useLiveFile.tsx
index cc4ef055a..bb772f5f4 100644
--- a/src/apps/chat/components/message/fragments-attachment-doc/useLiveFile.tsx
+++ b/src/apps/chat/components/message/fragments-attachment-doc/useLiveFile.tsx
@@ -2,12 +2,13 @@ import * as React from 'react';
import { fileOpen } from 'browser-fs-access';
import { cleanupEfficiency, makeDiff } from '@sanity/diff-match-patch';
-import { Alert, Box, Button, CircularProgress, ColorPaletteProp, IconButton, Tooltip } from '@mui/joy';
+import { Alert, Box, Button, CircularProgress, ColorPaletteProp, IconButton } from '@mui/joy';
import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
import WarningRoundedIcon from '@mui/icons-material/WarningRounded';
import type { DMessageAttachmentFragment } from '~/common/stores/chat/chat.fragments';
-import { LiveFileIcon, LiveFileReloadIcon, LiveFileSaveIcon } from '~/common/livefile/LiveFileIcon';
+import { LiveFileChooseIcon, LiveFileIcon, LiveFileReloadIcon, LiveFileSaveIcon } from '~/common/livefile/LiveFileIcons';
+import { TooltipOutlined } from '~/common/components/TooltipOutlined';
import { liveFileCreate } from '~/common/livefile/liveFile';
@@ -155,19 +156,37 @@ export function useLiveFile(
const liveFileSyncButton = React.useMemo(() => (
- LiveFile connected.
Click to compare with file content.>}>
+
: (isWorking ? : )}
+ startDecorator={
+ isPreviewMode ?
+ : (isWorking ?
+ : fileSystemFileHandle ?
+ : )
+ }
aria-label={fileSystemFileHandle ? 'Sync File' : 'Choose File'}
>
- {isPreviewMode ? 'Refresh' : (fileSystemFileHandle ? 'Sync File' : 'Choose File')}
+ {
+ isPreviewMode ? 'Refresh'
+ : fileSystemFileHandle ? 'Sync File'
+ : 'Pair File'
+ }
-
+
), [fileSystemFileHandle, handleSyncButtonClick, isPreviewMode, isWorking]);
@@ -195,7 +214,7 @@ export function useLiveFile(
>
{isPreviewMode && !!fileSystemFileHandle && (
-
+
)}
@@ -204,9 +223,10 @@ export function useLiveFile(
+ {/* Load from File */}
{(diffSummary && (diffSummary.insertions > 0 || diffSummary.deletions > 0)) && (
}
aria-label='Load content from disk'
>
- {isMobile ? 'Load File' : 'Load from File'}
+ {isMobile ? 'Update' : 'Load from File'}
)}
+
+ {/* Save to File */}
{(diffSummary && (diffSummary.insertions > 0 || diffSummary.deletions > 0)) && (
}
aria-label='Save content to disk'
>
- {isMobile ? 'Save File' : 'Save to File'}
+ {isMobile ? 'Save' : 'Save to File'}
)}
+ {/* Reassign File button */}
+
+
+
+
+
+
{/* Close button */}
-
-
-
+
+
+
+
+
);
diff --git a/src/common/components/TooltipOutlined.tsx b/src/common/components/TooltipOutlined.tsx
new file mode 100644
index 000000000..9cd9fe650
--- /dev/null
+++ b/src/common/components/TooltipOutlined.tsx
@@ -0,0 +1,25 @@
+import * as React from 'react';
+
+import { Tooltip, TooltipProps } from '@mui/joy';
+
+
+export function TooltipOutlined(props: {
+ title: React.ReactNode;
+ color?: TooltipProps['color'];
+ variant?: TooltipProps['variant'];
+ placement?: TooltipProps['placement'];
+ children: React.JSX.Element;
+}) {
+ return (
+
+ {props.children}
+
+ );
+}
diff --git a/src/common/livefile/LiveFileIcon.ts b/src/common/livefile/LiveFileIcons.ts
similarity index 55%
rename from src/common/livefile/LiveFileIcon.ts
rename to src/common/livefile/LiveFileIcons.ts
index 24469e7be..e65825f86 100644
--- a/src/common/livefile/LiveFileIcon.ts
+++ b/src/common/livefile/LiveFileIcons.ts
@@ -1,7 +1,13 @@
+import { styled } from '@mui/joy';
+import FileOpenOutlinedIcon from '@mui/icons-material/FileOpenOutlined';
import MultipleStopIcon from '@mui/icons-material/MultipleStop';
import SystemUpdateAltIcon from '@mui/icons-material/SystemUpdateAlt';
import UploadFileIcon from '@mui/icons-material/UploadFile';
-export { MultipleStopIcon as LiveFileIcon };
-export { UploadFileIcon as LiveFileSaveIcon };
+export const LiveFileIcon = styled(MultipleStopIcon)({
+ rotate: '90deg',
+});
+
+export { FileOpenOutlinedIcon as LiveFileChooseIcon };
export { SystemUpdateAltIcon as LiveFileReloadIcon };
+export { UploadFileIcon as LiveFileSaveIcon };