zack3d/big-agi
1
0
Fork 0
mirror of https://github.com/enricoros/big-AGI.git synced 2026-05-10 21:50:14 -07:00
Code Issues Packages Projects Releases Wiki Activity

MP: renames

Browse Source
This commit is contained in:
Enrico Ros
2024-06-23 20:27:56 -07:00
parent 17323facce
commit 1b5438cc6c
11 changed files with 45 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/apps/chat/components/composer/llmattachments/LLMAttachmentMenu.tsx
+2 -2
View File
@@ -8,11 +8,11 @@ import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
import LaunchIcon from '@mui/icons-material/Launch';
import VerticalAlignBottomIcon from '@mui/icons-material/VerticalAlignBottom';
import { showImageDataRefInNewTab } from '~/modules/blocks/image/RenderImageRefDBlob';
import { DMessageAttachmentFragment, isImageRefPart } from '~/common/stores/chat/chat.fragments';
import { CloseableMenu } from '~/common/components/CloseableMenu';
import { showImageDataRefInNewTab } from '../../message/fragments-content/PartImageRefDBlob';
import type { AttachmentDraftId } from '~/common/attachment-drafts/attachment.types';
import type { AttachmentDraftsStoreApi } from '~/common/attachment-drafts/store-attachment-drafts-slice';
import type { LLMAttachmentDraft } from './useLLMAttachmentDrafts';
src/apps/chat/components/message/fragments-attachment-image/ImageAttachmentFragments.tsx
+4 -4
View File
@@ -3,12 +3,12 @@ import * as React from 'react';
import type { SxProps } from '@mui/joy/styles/types';
import { Box } from '@mui/joy';
import { RenderImageRefDBlob, showImageDataRefInNewTab } from '~/modules/blocks/image/RenderImageRefDBlob';
import type { DMessageRole } from '~/common/stores/chat/chat.message';
import { ContentScaling, themeScalingMap } from '~/common/app.theme';
import { DMessageAttachmentFragment, DMessageFragmentId, isImageRefPart } from '~/common/stores/chat/chat.fragments';
import { PartImageRefDBlob, showImageDataRefInNewTab } from '../fragments-content/PartImageRefDBlob';
// configuration
const CARD_MIN_SQR = 84;
@@ -93,7 +93,7 @@ export function ImageAttachmentFragments(props: {
// only support rendering DBLob images as cards for now
if (dataRef.reftype === 'dblob') {
return (
<PartImageRefDBlob
<RenderImageRefDBlob
key={'att-img-' + attachmentFragment.fId}
dataRefDBlobAssetId={dataRef.dblobAssetId}
dataRefMimeType={dataRef.mimeType}
@@ -103,7 +103,7 @@ export function ImageAttachmentFragments(props: {
onOpenInNewTab={() => showImageDataRefInNewTab(dataRef)}
onDeleteFragment={() => props.onFragmentDelete(attachmentFragment.fId)}
scaledImageSx={cardStyleSxMemo}
partVariant='attachment-card'
variant='attachment-card'
/>
);
}
src/apps/chat/components/message/fragments-attachment-text/DocumentFragmentEditor.tsx
+2 -2
View File
@@ -13,7 +13,7 @@ import type { DMessageRole } from '~/common/stores/chat/chat.message';
import { createTextAttachmentFragment, DMessageAttachmentFragment, DMessageFragmentId } from '~/common/stores/chat/chat.fragments';
import { marshallWrapText } from '~/common/stores/chat/chat.tokens';
import { PartTextEdit } from '../fragments-content/PartTextEdit';
import { ContentPartTextEditor } from '../fragments-content/ContentPartTextEditor';
export function DocumentFragmentEditor(props: {
@@ -85,7 +85,7 @@ export function DocumentFragmentEditor(props: {
{isEditing ? (
// Document Editor
<PartTextEdit
<ContentPartTextEditor
textPartText={part.text}
fragmentId={fragmentId}
contentScaling={props.contentScaling}
src/apps/chat/components/message/fragments-content/ContentFragments.tsx
+4 -4
View File
@@ -10,8 +10,8 @@ import { DMessageContentFragment, DMessageFragment, DMessageFragmentId, isConten
import type { ChatMessageTextPartEditState } from '../ChatMessage';
import { ContentPartImageRef } from './ContentPartImageRef';
import { ContentPartPlaceholder } from './ContentPartPlaceholder';
import { PartTextAutoBlocks } from './PartTextAutoBlocks';
import { PartTextEdit } from './PartTextEdit';
import { ContentPartTextAutoBlocks } from './ContentPartTextAutoBlocks';
import { ContentPartTextEditor } from './ContentPartTextEditor';
const editLayoutSx: SxProps = {
@@ -80,7 +80,7 @@ export function ContentFragments(props: {
// editing for text parts
if (props.textEditsState && (fragment.part.pt === 'text' || fragment.part.pt === 'error')) {
return (
<PartTextEdit
<ContentPartTextEditor
key={'edit-' + fragment.fId}
textPartText={fragment.part.pt === 'text' ? fragment.part.text : fragment.part.error}
fragmentId={fragment.fId}
@@ -132,7 +132,7 @@ export function ContentFragments(props: {
case 'text':
return (
<PartTextAutoBlocks
<ContentPartTextAutoBlocks
key={fragment.fId}
// ref={blocksRendererRef}
textPartText={fragment.part.text}
src/apps/chat/components/message/fragments-content/ContentPartImageRef.tsx
+4 -5
View File
@@ -4,13 +4,12 @@ import type { SxProps } from '@mui/joy/styles/types';
import { Box } from '@mui/joy';
import { BlocksContainer } from '~/modules/blocks/BlocksContainer';
import { RenderImageRefDBlob, showImageDataRefInNewTab } from '~/modules/blocks/image/RenderImageRefDBlob';
import { RenderImageURL } from '~/modules/blocks/image/RenderImageURL';
import type { DMessageContentFragment, DMessageFragmentId, DMessageImageRefPart } from '~/common/stores/chat/chat.fragments';
import { ContentScaling, themeScalingMap } from '~/common/app.theme';
import { PartImageRefDBlob, showImageDataRefInNewTab } from './PartImageRefDBlob';
export function ContentPartImageRef(props: {
imageRefPart: DMessageImageRefPart,
@@ -49,7 +48,7 @@ export function ContentPartImageRef(props: {
return (
<BlocksContainer>
{dataRef.reftype === 'dblob' ? (
<PartImageRefDBlob
<RenderImageRefDBlob
dataRefDBlobAssetId={dataRef.dblobAssetId}
dataRefMimeType={dataRef.mimeType}
imageAltText={imageRefPart.altText}
@@ -59,12 +58,12 @@ export function ContentPartImageRef(props: {
onDeleteFragment={onFragmentDelete ? handleDeleteFragment : undefined}
onReplaceFragment={onFragmentReplace ? handleReplaceFragment : undefined}
scaledImageSx={scaledImageSx}
partVariant='content-part'
variant='content-part'
/>
) : dataRef.reftype === 'url' ? (
<RenderImageURL
imageURL={dataRef.url}
infoText={imageRefPart.altText}
expandableText={imageRefPart.altText}
scaledImageSx={scaledImageSx}
variant='content-part'
/>
src/apps/chat/components/message/fragments-content/PartTextAutoBlocks.tsx → src/apps/chat/components/message/fragments-content/ContentPartTextAutoBlocks.tsx
+1 -1
View File
@@ -14,7 +14,7 @@ import { explainServiceErrors } from '../explainServiceErrors';
* The OG part, comprised of text, which can be markdown, have code blocks, etc.
* Uses BlocksRenderer to render the markdown/code/html/text, etc.
*/
export function PartTextAutoBlocks(props: {
export function ContentPartTextAutoBlocks(props: {
textPartText: string,
messageRole: DMessageRole,
src/apps/chat/components/message/fragments-content/PartTextEdit.tsx → src/apps/chat/components/message/fragments-content/ContentPartTextEditor.tsx
+1 -1
View File
@@ -10,7 +10,7 @@ import type { DMessageFragmentId } from '~/common/stores/chat/chat.fragments';
* Very similar to <InlineTextArea /> but with externally controlled state rather than internal.
* Made it for as the editing alternative for <ContentPartText />.
*/
export function PartTextEdit(props: {
export function ContentPartTextEditor(props: {
// current value
textPartText: string,
fragmentId: DMessageFragmentId,
src/modules/blocks/AutoBlocksRenderer.tsx
+1 -1
View File
@@ -273,7 +273,7 @@ export const AutoBlocksRenderer = React.forwardRef<HTMLDivElement, BlocksRendere
const RenderMarkdownMemoOrNot = optimizeSubBlockWithMemo ? RenderMarkdownMemo : RenderMarkdown;
return block.type === 'htmlb' ? <RenderHtml key={'html-' + index} htmlBlock={block} sx={scaledCodeSx} />
: block.type === 'codeb' ? <RenderCodeMemoOrNot key={'code-' + index} codeBlock={block} fitScreen={props.fitScreen} initialShowHTML={props.showUnsafeHtml} noCopyButton={props.specialDiagramMode} optimizeLightweight={false /*!optimizeSubBlockWithMemo*/} sx={scaledCodeSx} />
: block.type === 'imageb' ? <RenderImageURL key={'image-' + index} imageURL={block.url} infoText={block.alt} onImageRegenerate={undefined /* we'd need to have selective fragment editing as there could be many of these URL images in a fragment */} scaledImageSx={scaledImageSx} variant='content-part' />
: block.type === 'imageb' ? <RenderImageURL key={'image-' + index} imageURL={block.url} expandableText={block.alt} onImageRegenerate={undefined /* we'd need to have selective fragment editing as there could be many of these URL images in a fragment */} scaledImageSx={scaledImageSx} variant='content-part' />
: block.type === 'diffb' ? <RenderTextDiff key={'text-diff-' + index} textDiffBlock={block} sx={scaledTypographySx} />
: (props.renderTextAsMarkdown && !fromSystem && !isUserCommand)
? <RenderMarkdownMemoOrNot key={'text-md-' + index} textBlock={block} sx={scaledTypographySx} />
src/modules/blocks/BlocksContainer.tsx
+2 -1
View File
@@ -1,8 +1,9 @@
import { Box, styled, Textarea } from '@mui/joy';
import { lineHeightChatTextMd } from '~/common/app.theme';
export const blocksTextStyleSx = {
const blocksTextStyleSx = {
// note: this will be used for non-blocks mainly (errors and other strings ourside of RenderXYX)
lineHeight: lineHeightChatTextMd,
src/apps/chat/components/message/fragments-content/PartImageRefDBlob.tsx → src/modules/blocks/image/RenderImageRefDBlob.tsx
+11 -8
View File
@@ -6,13 +6,14 @@ import type { SxProps } from '@mui/joy/styles/types';
import { Box } from '@mui/joy';
import type { DBlobAssetId, DBlobImageAsset } from '~/modules/dblobs/dblobs.types';
import { RenderImageURL } from '~/modules/blocks/image/RenderImageURL';
import { getImageAssetAsBlobURL } from '~/modules/dblobs/dblobs.images';
import { t2iGenerateImageContentFragments } from '~/modules/t2i/t2i.client';
import { useDBAsset } from '~/modules/dblobs/dblobs.hooks';
import type { DMessageContentFragment, DMessageDataRef } from '~/common/stores/chat/chat.fragments';
import { RenderImageURL, RenderImageURLVarint } from './RenderImageURL';
/**
* Opens am image data ref in a new tab (fetches and shows it)
@@ -31,17 +32,19 @@ export async function showImageDataRefInNewTab(dataRef: DMessageDataRef) {
}
export function PartImageRefDBlob(props: {
export function RenderImageRefDBlob(props: {
// from ImageRef
dataRefDBlobAssetId: DBlobAssetId,
dataRefMimeType: string,
imageAltText?: string,
imageWidth?: number,
imageHeight?: number,
// others
variant: RenderImageURLVarint,
onOpenInNewTab: () => void
onDeleteFragment?: () => void,
onReplaceFragment?: (newFragment: DMessageContentFragment) => void,
scaledImageSx?: SxProps,
partVariant: 'content-part' | 'attachment-card',
}) {
// external state from the DB
@@ -77,7 +80,7 @@ export function PartImageRefDBlob(props: {
}
// [attachment card] only return the data
if (props.partVariant === 'attachment-card') {
if (props.variant === 'attachment-card') {
return {
dataUrlMemo: `data:${imageItem.data.mimeType};base64,${imageItem.data.base64}`,
};
@@ -127,19 +130,19 @@ export function PartImageRefDBlob(props: {
altText: props.imageAltText || imageItem.metadata?.description || imageItem.label || '',
overlayText: overlayText,
};
}, [imageItem, props.dataRefMimeType, props.imageAltText, props.imageHeight, props.imageWidth, props.partVariant]);
}, [imageItem, props.dataRefMimeType, props.imageAltText, props.imageHeight, props.imageWidth, props.variant]);
return (
<RenderImageURL
imageURL={dataUrlMemo}
infoText={altText}
description={overlayText}
expandableText={altText}
overlayText={overlayText}
onOpenInNewTab={props.onOpenInNewTab}
onImageDelete={props.onDeleteFragment}
onImageRegenerate={(!!recreationPrompt && !isRegenerating && !!props.onReplaceFragment) ? handleImageRegenerate : undefined}
className={isRegenerating ? 'agi-border-4' : undefined}
scaledImageSx={props.scaledImageSx}
variant={props.partVariant}
variant={props.variant}
/>
);
}
src/modules/blocks/image/RenderImageURL.tsx
+13 -11
View File
@@ -73,16 +73,18 @@ export function heuristicLegacyImageBlocks(fullText: string): ImageBlock[] | nul
}
export type RenderImageURLVarint = 'content-part' | 'attachment-card';
export const RenderImageURL = (props: {
imageURL: string | null, // remote URL, or data URL
description?: React.ReactNode,
infoText?: string,
imageURL: string | null, // remote URL, or data URL
overlayText?: React.ReactNode, // bottom overlay text
expandableText?: string, // expandable pane below the image
variant: RenderImageURLVarint, // either a responsive Block image, or an inline Card
onOpenInNewTab?: (e: React.MouseEvent) => void,
onImageDelete?: () => void,
onImageRegenerate?: () => void,
scaledImageSx?: SxProps,
className?: string,
variant: 'content-part' | 'attachment-card',
}) => {
// state
@@ -182,7 +184,7 @@ export const RenderImageURL = (props: {
{props.imageURL ? (
<picture>
{/* eslint-disable-next-line @next/next/no-img-element */}
<img src={props.imageURL} alt={props.infoText ? `Generated Image: ${props.infoText}` : 'Generated Image'} />
<img src={props.imageURL} alt={props.expandableText ? `Generated Image: ${props.expandableText}` : 'Generated Image'} />
</picture>
) : (
<Box
@@ -199,7 +201,7 @@ export const RenderImageURL = (props: {
)}
{/* [overlay] Description */}
{!!props.description && (
{!!props.overlayText && (
<Box className='overlay-text' sx={{
position: 'absolute',
bottom: 0,
@@ -211,19 +213,19 @@ export const RenderImageURL = (props: {
opacity: infoOpen ? 1 : 0,
transition: 'opacity 0.2s cubic-bezier(.17,.84,.44,1)',
}}>
{props.description}
{props.overlayText}
</Box>
)}
</Box>
{/* Bottom Expander: information */}
{!!props.infoText && infoOpen && (
{!!props.expandableText && infoOpen && (
<Box sx={{
p: { xs: 1, md: 2 },
overflowWrap: 'anywhere',
whiteSpace: 'break-spaces',
}}>
{props.infoText}
{props.expandableText}
</Box>
)}
@@ -236,7 +238,7 @@ export const RenderImageURL = (props: {
gap: 0.5,
}}>
{!!props.infoText && (
{!!props.expandableText && (
<GoodTooltip title={infoOpen ? 'Hide Prompt' : 'Show Prompt'}>
<OverlayButton variant={infoOpen ? 'solid' : 'soft'} color={isCard ? 'primary' : undefined} onClick={handleToggleInfoOpen} sx={{ gridRow: '1', gridColumn: '1' }}>
<InfoOutlinedIcon />
@@ -251,7 +253,7 @@ export const RenderImageURL = (props: {
<OpenInNewIcon />
</OverlayButton>
) : props.imageURL.startsWith('http') ? (
<OverlayButton variant='soft' color={isCard ? 'primary' : undefined} component={Link} href={props.imageURL} download={props.infoText || 'Image'} target='_blank' sx={{ gridRow: '1', gridColumn: '2' }}>
<OverlayButton variant='soft' color={isCard ? 'primary' : undefined} component={Link} href={props.imageURL} download={props.expandableText || 'Image'} target='_blank' sx={{ gridRow: '1', gridColumn: '2' }}>
<OpenInNewIcon />
</OverlayButton>
) : <span />}