+ {message.content.map((item, key) => {
+ if (item.type === ContentPartType.TextPrompt) {
+ return 
+ )
+ }
+
+ if (
+ item.type === ContentPartType.UrlFileUrlPromptType &&
+ item.mimeType.includes('image')
+ ) {
+ return (
+ 
+ )
+ }
+
+ if (
+ item.type === ContentPartType.Base64FilePromptType &&
+ item.mimeType.includes('audio')
+ ) {
+ return
+ }
+
+ if (
+ item.type === ContentPartType.UrlFileUrlPromptType &&
+ item.mimeType.includes('audio')
+ ) {
+ return
+ }
+
+ if (
+ item.type === ContentPartType.Base64FilePromptType &&
+ item.mimeType.includes('video')
+ ) {
+ return
+ }
+
+ if (
+ item.type === ContentPartType.UrlFileUrlPromptType &&
+ item.mimeType.includes('video')
+ ) {
+ return
+ }
+
+ return
+ )}
+ {item.text}
+ } + + if ( + item.type === ContentPartType.Base64FilePromptType && + item.mimeType.includes('image') + ) { + return ( +File: {item.name}
+ })}
+ - {DateTime.fromMillis(date).toLocaleString( - DateTime.DATETIME_SHORT_WITH_SECONDS - )} -
-
- ) : (
-
- {message.content.map((item, key) => {
- if (item.type === 'image_url') {
- return (
- 
- )
- }
-
- if (item.type === 'text') {
- return
- )}
-
- )}
- {item.text}
- } - })} -
+
+ )}
) : (
- {currConversation?.avatar}
+
+
+
+ {conversation?.avatar || (
+ 
+ )}
+
+
+
+
-
-
+
- {currConversation && (
-
-
-
-
-
-
- )}
)
}
diff --git a/src/components/ChatBox/ContactHeaderNew.tsx b/src/components/ChatBox/ContactHeaderNew.tsx
new file mode 100644
index 00000000..e69de29b
diff --git a/src/components/ChatBox/InputBox.tsx b/src/components/ChatBox/InputBox.tsx
index c38de5cc..5d49163b 100644
--- a/src/components/ChatBox/InputBox.tsx
+++ b/src/components/ChatBox/InputBox.tsx
@@ -1,157 +1,38 @@
+import { useChat } from '@ai-sdk/react'
import classNames from 'classnames'
-import { produce } from 'immer'
-import {
- ChatCompletionContentPart,
- ChatCompletionContentPartImage,
- ChatCompletionContentPartText
-} from 'openai/resources'
+import { useAtom, useAtomValue } from 'jotai'
import { FC, memo, useEffect, useRef, useState } from 'react'
-import { useRecoilState, useRecoilValue } from 'recoil'
-import items from 'src/components/Sidebar/Items'
-import {
- useAudio,
- useChatCompletion,
- useCompletion,
- useImageGeneration
-} from 'src/hooks'
-import {
- audioFileState,
- base64ImagesState,
- currConversationState,
- loadingState,
- userInputState
-} from 'src/stores/conversation'
-import { currProductState } from 'src/stores/global'
-import { settingsState } from 'src/stores/settings'
-import { AudioContentPart } from 'src/types/conversation'
-import { Products } from 'src/types/global'
-import { LoadingIcon, SolidCloseIcon, SolidSendIcon } from '../Icons'
-import WaveForm from '../Waveform'
-import MediaUploader from './MediaUploader'
+import { useChatCompletion } from 'src/hooks'
+import { base64FilePromptAtom, inputTextAtom } from 'src/stores/conversation'
+import { loadingAtom, settingsAtom } from 'src/stores/global'
+import { LoadingIcon, SolidSendIcon } from '../Icons'
+import { Textarea } from '../ui/textarea'
+import AttachmentPreview from './AttachmentPreview'
+import AttachmentUploader from './AttachmentUploader'
import AudioRecorder from './Recorder'
+import TokenCount from './TokenCount'
+import { Button } from '../ui/button'
const InputBox: FC = () => {
- const currConversation = useRecoilValue(currConversationState)
- const currProduct = useRecoilValue(currProductState)
- const settings = useRecoilValue(settingsState)
- const loading = useRecoilValue(loadingState)
- const [userInput, setUserInput] = useRecoilState(userInputState)
- const [audioFile, setAudioFile] = useRecoilState(audioFileState)
- const [base64Images, setBase64Images] = useRecoilState(base64ImagesState)
+ const { messages, input, handleInputChange, handleSubmit } = useChat({
+ api: 'http://localhost:8965/api/chat'
+ })
+ const settings = useAtomValue(settingsAtom)
+ const loading = useAtomValue(loadingAtom)
+ const [inputText, setInputText] = useAtom(inputTextAtom)
const createChatCompletion = useChatCompletion()
- const createAudio = useAudio()
- const createImage = useImageGeneration()
- const createCompletion = useCompletion()
const textareaRef = useRef(null)
const [isTyping, setIsTyping] = useState(false)
- const mediaType = items.find(
- (item) => item.product === currProduct
- )?.multiMedia
-
- const deleteBase64Image = (idx: number) => {
- setBase64Images(
- produce(base64Images, (draft) => {
- draft?.splice(idx, 1)
- })
- )
- }
+ const [base64FilePrompt, setBase64FilePrompt] = useAtom(base64FilePromptAtom)
const resetInput = () => {
- setUserInput('')
- setAudioFile({
- filename: '',
- binary: undefined
- })
- setBase64Images(null)
+ setInputText('')
+ setBase64FilePrompt([])
}
const validate = () => {
if (loading) return false
- return userInput.trim().length !== 0
- }
-
- const handleRequest = () => {
- if (!settings || !validate()) return
-
- if (currProduct === Products.ChatCompletion) {
- const chatMessageImageContent:
- | ChatCompletionContentPartImage[]
- | undefined = base64Images?.map((imageUrl) => ({
- type: 'image_url',
- image_url: {
- url: imageUrl
- }
- }))
-
- const chatMessageTextContent: ChatCompletionContentPartText = {
- type: 'text',
- text: userInput
- }
-
- const chatCompletionUserMessage: ChatCompletionContentPart[] = [
- ...(chatMessageImageContent || []),
- chatMessageTextContent
- ]
-
- if (createChatCompletion) {
- createChatCompletion(chatCompletionUserMessage)
- }
- }
-
- if (
- currProduct === Products.AudioTranscription ||
- currProduct === Products.AudioTranslation
- ) {
- const audioContentPart: AudioContentPart[] = [
- {
- type: 'audio',
- audioUrl: { url: audioFile.filename },
- text: userInput,
- binary: audioFile.binary
- }
- ]
-
- if (createAudio) {
- if (currProduct === Products.AudioTranscription) {
- const createAudioTranscription =
- createAudio[Products.AudioTranscription]
- createAudioTranscription(audioContentPart)
- }
-
- if (currProduct === Products.AudioTranslation) {
- const createAudioTranslation = createAudio[Products.AudioTranslation]
- createAudioTranslation(audioContentPart)
- }
- }
- }
-
- if (currProduct === Products.ImageGeneration) {
- const imageGenerationTextContent: ChatCompletionContentPartText[] = [
- {
- type: 'text',
- text: userInput
- }
- ]
-
- if (createImage) {
- createImage(imageGenerationTextContent)
- }
- }
-
- if (currProduct === Products.Completion) {
- const completionTextContent: ChatCompletionContentPartText[] = [
- {
- type: 'text',
- text: userInput
- }
- ]
-
- if (createCompletion) {
- createCompletion(completionTextContent)
- }
- }
-
- resetInput()
+ return inputText.trim().length !== 0
}
// FIXME: I cannot declare the type of `event` correctly.
@@ -165,7 +46,7 @@ const InputBox: FC = () => {
const end = event.target.selectionEnd
const value = event.target.value
- setUserInput(value.substring(0, start) + '\n' + value.substring(end))
+ setInputText(value.substring(0, start) + '\n' + value.substring(end))
event.target.selectionStart = event.target.selectionEnd = start + 1
}
@@ -175,6 +56,21 @@ const InputBox: FC = () => {
}
}
+ const handleRequest = () => {
+ if (!settings || !validate()) return
+
+ // const textPrompt: TextPrompt[] = [
+ // {
+ // type: ContentPartType.TextPrompt,
+ // text: inputText
+ // }
+ // ]
+
+ // createChatCompletion([...textPrompt, ...base64FilePrompt])
+
+ resetInput()
+ }
+
useEffect(() => {
if (textareaRef && textareaRef.current) {
textareaRef.current.style.height = 'inherit'
@@ -183,45 +79,20 @@ const InputBox: FC = () => {
textareaRef?.current?.scrollHeight > 400 ? 'auto' : 'hidden'
}`
}
- }, [userInput])
-
- if (!currConversation) return null
+ }, [inputText])
return (
-
- {Array.isArray(base64Images) && base64Images.length > 0 && (
-
- {base64Images.map((image, idx) => (
-
-
- deleteBase64Image(idx)}
- />
-
- 
-
- ))}
-
- )}
- {audioFile.filename && (
-
-
- )}
-
- {mediaType && (
-
+
+
- ) : (
- + {online ? 'Online' : 'Offline'} +
+
+
{summaryInputVisible ? (
<>
{
+ setSummaryValue(e.target.value)
+ setIsTyping(true)
+ setTimeout(() => setIsTyping(false), 500)
+ }}
onKeyDown={handleKeyDown}
- onChange={(e) => setSummaryValue(e.target.value)}
- onCompositionStart={() => setIsTyping(true)}
- onCompositionEnd={() => setIsTyping(false)}
- className="w-80"
- sx={{
- '.MuiInput-input': {
- padding: 0
- }
+ onBlur={() => {
+ setSummaryInputVisible(false)
}}
+ autoFocus
+ />
+
+ {summary}
- {!!currConversation &&- - - {isOnline ? 'Online' : 'Offline'} - -
- +