dmitry.galkin/chatbot-template
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: render attachment preview after upload (#590)

Browse source
This commit is contained in:
Jeremy 2024-12-04 17:27:48 +03:00 • committed by GitHub
parent e839007580
commit b609dca828
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 6 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

9
components/multimodal-input.tsx
View file

@ -7,7 +7,6 @@ import type {
Message, Message,
} from 'ai'; } from 'ai';
import cx from 'classnames'; import cx from 'classnames';
import { motion } from 'framer-motion';
import type React from 'react'; import type React from 'react';
import { import {
useRef, useRef,
@ -29,6 +28,7 @@ import { PreviewAttachment } from './preview-attachment';
import { Button } from './ui/button'; import { Button } from './ui/button';
import { Textarea } from './ui/textarea'; import { Textarea } from './ui/textarea';
import { SuggestedActions } from './suggested-actions'; import { SuggestedActions } from './suggested-actions';
import equal from 'fast-deep-equal';
function PureMultimodalInput({ function PureMultimodalInput({
chatId, chatId,
@ -287,9 +287,10 @@ function PureMultimodalInput({
export const MultimodalInput = memo( export const MultimodalInput = memo(
PureMultimodalInput, PureMultimodalInput,
(prevProps, currentProps) => { (prevProps, nextProps) => {
if (prevProps.input !== currentProps.input) return false; if (prevProps.input !== nextProps.input) return false;
if (prevProps.isLoading !== currentProps.isLoading) return false; if (prevProps.isLoading !== nextProps.isLoading) return false;
if (!equal(prevProps.attachments, nextProps.attachments)) return false;
return true; return true;
}, },

2
components/preview-attachment.tsx
View file

@ -13,7 +13,7 @@ export const PreviewAttachment = ({
return ( return (
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
<div className="w-20 aspect-video bg-muted rounded-md relative flex flex-col items-center justify-center"> <div className="w-20 h-16 aspect-video bg-muted rounded-md relative flex flex-col items-center justify-center">
{contentType ? ( {contentType ? (
contentType.startsWith('image') ? ( contentType.startsWith('image') ? (
// NOTE: it is recommended to use next/image for images // NOTE: it is recommended to use next/image for images