Skip to content

Commit 1fff3d3

Browse files
JYC0413JYC0413
committed
super update
global unified image quantity limit
1 parent dd1b41a commit 1fff3d3

File tree

3 files changed

+73
-44
lines changed

3 files changed

+73
-44
lines changed

‎components/Chat/Chat.tsx‎

Lines changed: 24 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,8 @@ interface Props {
2626
export const Chat = memo(({stopConversationRef}: Props) => {
2727
const {t} = useTranslation('chat');
2828

29+
const maxImg = 1
30+
2931
const {
3032
state: {
3133
selectedConversation,
@@ -45,6 +47,7 @@ export const Chat = memo(({stopConversationRef}: Props) => {
4547
} = useContext(HomeContext);
4648

4749
const [currentMessage, setCurrentMessage] = useState<Message>();
50+
const [imageCount, setImageCount] = useState<number>(0);
4851
const [autoScrollEnabled, setAutoScrollEnabled] = useState<boolean>(true);
4952
const [showSettings, setShowSettings] = useState<boolean>(false);
5053
const [showScrollDownButton, setShowScrollDownButton] =
@@ -358,10 +361,25 @@ export const Chat = memo(({stopConversationRef}: Props) => {
358361

359362
useEffect(() => {
360363
throttledScrollDown();
361-
selectedConversation &&
362-
setCurrentMessage(
363-
selectedConversation.messages[selectedConversation.messages.length - 2],
364-
);
364+
if (selectedConversation) {
365+
setImageCount(selectedConversation?.messages.reduce((total, currentItem) => {
366+
if (Array.isArray(currentItem.content)) {
367+
total += currentItem.content.reduce((acc, item) => {
368+
if (item.type === "image_url" && item["image_url"]) {
369+
console.log(item)
370+
acc++;
371+
}
372+
console.log(item)
373+
return acc;
374+
}, 0);
375+
}
376+
console.log(total)
377+
return total;
378+
}, 0))
379+
setCurrentMessage(
380+
selectedConversation.messages[selectedConversation.messages.length - 2],
381+
);
382+
}
365383
}, [selectedConversation, throttledScrollDown]);
366384

367385
useEffect(() => {
@@ -499,6 +517,7 @@ export const Chat = memo(({stopConversationRef}: Props) => {
499517
key={index}
500518
message={message}
501519
messageIndex={index}
520+
maxImg={maxImg - imageCount}
502521
onEdit={(editedMessage) => {
503522
setCurrentMessage(editedMessage);
504523
// discard edited message and the ones that come after then resend
@@ -520,6 +539,7 @@ export const Chat = memo(({stopConversationRef}: Props) => {
520539
)}
521540
</div>
522541
{(selectedConversation?.promptState !== 1 || selectedConversation?.prompt !== "") && <ChatInput
542+
maxImg={maxImg - imageCount}
523543
stopConversationRef={stopConversationRef}
524544
textareaRef={textareaRef}
525545
onSend={(message, plugin) => {

‎components/Chat/ChatInput.tsx‎

Lines changed: 47 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,4 @@
1-
import {
2-
IconArrowDown,
3-
IconBolt, IconCircuitSwitchClosed, IconCross, IconCrossFilled, IconCrossOff,
4-
IconRepeat,
5-
IconSend,
6-
IconUpload, IconWorldCancel,
7-
IconWorldUpload,
8-
IconWriting, IconWritingOff, IconZeppelinOff, IconZzzOff
9-
} from '@tabler/icons-react';
1+
import {IconArrowDown, IconBolt, IconRepeat, IconSend, IconUpload, IconWriting} from '@tabler/icons-react';
102
import React, {KeyboardEvent, MutableRefObject, useCallback, useContext, useEffect, useRef, useState,} from 'react';
113

124
import {useTranslation} from 'next-i18next';
@@ -21,25 +13,27 @@ import {VariableModal} from './VariableModal';
2113

2214
interface Props {
2315
onSend: (message: Message, plugin: Plugin | null) => void;
16+
maxImg: number;
2417
onRegenerate: () => void;
2518
onScrollDownClick: () => void;
2619
stopConversationRef: MutableRefObject<boolean>;
2720
textareaRef: MutableRefObject<HTMLTextAreaElement | null>;
2821
showScrollDownButton: boolean;
2922
}
3023

31-
const maxImg = 1
3224

3325
export const ChatInput = ({
3426
onSend,
3527
onRegenerate,
28+
maxImg,
3629
onScrollDownClick,
3730
stopConversationRef,
3831
textareaRef,
3932
showScrollDownButton,
4033
}: Props) => {
4134
const {t} = useTranslation('chat');
4235

36+
console.log("maxImg", maxImg)
4337
const {
4438
state: {selectedConversation, messageIsStreaming, prompts},
4539

@@ -83,6 +77,11 @@ export const ChatInput = ({
8377
};
8478

8579
const handleSend = () => {
80+
let thisList: string[] = imageSrcList
81+
if (urlInputShow) {
82+
thisList = uploadInput()
83+
}
84+
8685
if (messageIsStreaming) {
8786
return;
8887
}
@@ -94,14 +93,13 @@ export const ChatInput = ({
9493

9594
let finalContent: string | Content[] = content
9695

97-
if (imageSrcList.length > 0) {
96+
if (thisList.length > 0) {
9897
finalContent = [{type: 'text', text: content}]
99-
imageSrcList.forEach((item) => {
98+
thisList.forEach((item) => {
10099
if (Array.isArray(finalContent)) {
101100
finalContent.push({
102101
type: "image_url",
103102
image_url: {url: item}
104-
105103
})
106104
}
107105
})
@@ -292,14 +290,15 @@ export const ChatInput = ({
292290
};
293291

294292
const addImg = (imageList: string[]) => {
293+
let list: string[]
295294
if (imageSrcList.length + imageList.length <= maxImg) {
296-
setImageSrcList((prevImages) => [...prevImages, ...imageList]);
295+
list = [...imageSrcList, ...imageList]
297296
} else {
298-
setImageSrcList((prevImages) => {
299-
const newList = [...prevImages, ...imageList];
300-
return newList.slice(-maxImg);
301-
})
297+
const newList = [...imageList, ...imageList];
298+
list = newList.slice(-maxImg);
302299
}
300+
setImageSrcList(list)
301+
return list
303302
}
304303

305304
const handleImageRemove = (index: number) => {
@@ -310,6 +309,16 @@ export const ChatInput = ({
310309
});
311310
};
312311

312+
const uploadInput = () => {
313+
let list: string[] = []
314+
setUrlInputShow(false)
315+
if (inputUrl) {
316+
list = addImg([inputUrl])
317+
setInputUrl("")
318+
}
319+
return list
320+
}
321+
313322
return (
314323
<div
315324
className="absolute bottom-0 left-0 w-full border-transparent bg-gradient-to-b from-transparent via-white to-white pt-6 dark:border-white/20 dark:via-[#343541] dark:to-[#343541] md:pt-2">
@@ -323,31 +332,32 @@ export const ChatInput = ({
323332
<div className="lg:mx-auto lg:max-w-3xl mx-2 md:mx-4 mt-4 md:mt-[52px] ">
324333
<div className={"flex justify-start" + (imageSrcList.length > 0 ? " mt-4" : "")}>
325334
<div
326-
className="flex items-center p-2 mx-2 sm:mx-4 w-full rounded-t-md bg-white border-black/10 dark:border-gray-900/50 dark:bg-[#40414f] border-t border-x">
327-
<button title="upload image file(coming soon)" disabled className="cursor-not-allowed p-2 mr-2 dark:bg-[#343541] rounded-lg" onClick={() => {
328-
document.getElementById("upload-button")?.click()
329-
}}>
330-
<IconUpload size={18}/>
335+
className="text-black flex items-center p-2 mx-2 sm:mx-4 w-full rounded-t-md bg-white border-black/10 dark:text-white dark:border-gray-900/50 dark:bg-[#40414f] border-t border-x">
336+
<button title="upload image file(coming soon)" disabled={true || maxImg === 0}
337+
className={"p-2 mr-2 bg-[#ececec] dark:bg-[#343541] rounded-lg" + (true || maxImg === 0 ? " cursor-not-allowed" : "")}
338+
onClick={() => {
339+
document.getElementById("upload-button")?.click()
340+
}}>
341+
<IconUpload size={20}/>
331342
</button>
332343
{urlInputShow ? <>
333344
<input onChange={(e) => {
334345
setInputUrl(e.target.value)
335-
}} id="imgUrlInputBox" autoFocus style={{height: "2.125rem"}}
336-
className="px-2 h-full dark:bg-[#343541] rounded-l-lg"/>
337-
<button title="upload" className="p-2 dark:bg-[#343541] rounded-r-lg" onClick={() => {
338-
setUrlInputShow(false)
339-
if (inputUrl) {
340-
addImg([inputUrl])
341-
setInputUrl("")
342-
}
343-
}}>
344-
{inputUrl ? <IconWorldUpload size={18}/> : <IconWritingOff size={18}/>}
346+
}} id="imgUrlInputBox" autoFocus style={{height: "2.25rem"}}
347+
className="px-2 h-full bg-[#ececec] dark:bg-[#343541] rounded-l-lg"/>
348+
<button title="upload" className="p-2 bg-[#ececec] dark:bg-[#343541] rounded-r-lg" onClick={uploadInput}>
349+
{inputUrl ? "Upload" : "Close"}
345350
</button>
346-
</> : <button title="Upload images by entering the url" className="p-2 dark:bg-[#343541] rounded-lg" onClick={() => {
347-
setUrlInputShow(true)
348-
}}>
349-
<IconWriting size={18}/>
351+
</> : <button disabled={maxImg === 0} title="Upload images by entering the url"
352+
className={"p-2 bg-[#ececec] dark:bg-[#343541] rounded-lg" + (maxImg === 0 ? " cursor-not-allowed" : "")}
353+
onClick={() => {
354+
setUrlInputShow(true)
355+
}}>
356+
<IconWriting size={20}/>
350357
</button>}
358+
<div className={"ml-4 " + (maxImg === 0 ? "block" : "hidden")}>For Llava series models, submit
359+
an image URL for processing.
360+
</div>
351361
</div>
352362
</div>
353363
</div>

‎components/Chat/ChatMessage.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,13 +18,12 @@ import remarkMath from 'remark-math';
1818

1919
export interface Props {
2020
message: Message;
21+
maxImg: number;
2122
messageIndex: number;
2223
onEdit?: (editedMessage: Message) => void
2324
}
2425

25-
const maxImg = 1
26-
27-
export const ChatMessage: FC<Props> = memo(({message, messageIndex, onEdit}) => {
26+
export const ChatMessage: FC<Props> = memo(({message, maxImg, messageIndex, onEdit}) => {
2827
const {t} = useTranslation('chat');
2928

3029
const {

0 commit comments

Comments
 (0)