Add loader buble chat
This commit is contained in:
Faisal Amir
parent
ac1c7018d8
commit
b752595554
@ -12,7 +12,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&-outline {
|
&-outline {
|
||||||
@apply border-input hover:bg-primary hover:text-primary-foreground border bg-transparent;
|
@apply border-input border bg-transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-secondary {
|
&-secondary {
|
||||||
|
|||||||
@ -1,26 +0,0 @@
|
|||||||
'use client'
|
|
||||||
|
|
||||||
import SendButton from '../SendButton'
|
|
||||||
|
|
||||||
const BasicPromptAccessories: React.FC = () => {
|
|
||||||
return (
|
|
||||||
<div className="absolute inset-x-0 bottom-0 flex justify-between p-3">
|
|
||||||
{/* Add future accessories here, e.g upload a file */}
|
|
||||||
<div className="flex items-center space-x-5">
|
|
||||||
<div className="flex items-center">
|
|
||||||
{/* <button
|
|
||||||
type="button"
|
|
||||||
className="-m-2.5 flex h-10 w-10 items-center justify-center rounded-full text-gray-400 hover:text-gray-500"
|
|
||||||
>
|
|
||||||
<InformationCircleIcon className="h-5 w-5" aria-hidden="true" />
|
|
||||||
</button> */}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="flex-shrink-0">
|
|
||||||
<SendButton />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default BasicPromptAccessories
|
|
||||||
@ -1,95 +0,0 @@
|
|||||||
'use client'
|
|
||||||
|
|
||||||
import { ChangeEvent, useEffect, useRef } from 'react'
|
|
||||||
|
|
||||||
import { useAtom, useAtomValue } from 'jotai'
|
|
||||||
|
|
||||||
import { currentPromptAtom } from '@/containers/Providers/Jotai'
|
|
||||||
|
|
||||||
import { useCreateConversation } from '@/hooks/useCreateConversation'
|
|
||||||
|
|
||||||
import useSendChatMessage from '@/hooks/useSendChatMessage'
|
|
||||||
|
|
||||||
import { getActiveConvoIdAtom } from '@/helpers/atoms/Conversation.atom'
|
|
||||||
import { selectedModelAtom } from '@/helpers/atoms/Model.atom'
|
|
||||||
|
|
||||||
const BasicPromptInput: React.FC = () => {
|
|
||||||
const activeConversationId = useAtomValue(getActiveConvoIdAtom)
|
|
||||||
const selectedModel = useAtomValue(selectedModelAtom)
|
|
||||||
const [currentPrompt, setCurrentPrompt] = useAtom(currentPromptAtom)
|
|
||||||
const { sendChatMessage } = useSendChatMessage()
|
|
||||||
const { requestCreateConvo } = useCreateConversation()
|
|
||||||
|
|
||||||
const textareaRef = useRef<HTMLTextAreaElement>(null)
|
|
||||||
|
|
||||||
const handleKeyDown = async (
|
|
||||||
event: React.KeyboardEvent<HTMLTextAreaElement>
|
|
||||||
) => {
|
|
||||||
if (event.key === 'Enter') {
|
|
||||||
if (!event.shiftKey) {
|
|
||||||
if (activeConversationId) {
|
|
||||||
event.preventDefault()
|
|
||||||
sendChatMessage()
|
|
||||||
} else {
|
|
||||||
if (!selectedModel) {
|
|
||||||
console.log('No model selected')
|
|
||||||
return
|
|
||||||
}
|
|
||||||
await requestCreateConvo(selectedModel)
|
|
||||||
sendChatMessage()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
adjustTextareaHeight()
|
|
||||||
}, [currentPrompt])
|
|
||||||
|
|
||||||
const handleMessageChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
|
|
||||||
setCurrentPrompt(event.target.value)
|
|
||||||
}
|
|
||||||
|
|
||||||
// Auto adjust textarea height based on content
|
|
||||||
const MAX_ROWS = 30
|
|
||||||
|
|
||||||
const adjustTextareaHeight = () => {
|
|
||||||
if (textareaRef.current) {
|
|
||||||
textareaRef.current.style.height = 'auto' // 1 row
|
|
||||||
const scrollHeight = textareaRef.current.scrollHeight
|
|
||||||
const maxScrollHeight =
|
|
||||||
parseInt(window.getComputedStyle(textareaRef.current).lineHeight, 10) *
|
|
||||||
MAX_ROWS
|
|
||||||
textareaRef.current.style.height = `${Math.min(
|
|
||||||
scrollHeight,
|
|
||||||
maxScrollHeight
|
|
||||||
)}px`
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className=" rounded-lg border border-border shadow-sm">
|
|
||||||
<textarea
|
|
||||||
ref={textareaRef}
|
|
||||||
onKeyDown={handleKeyDown}
|
|
||||||
value={currentPrompt}
|
|
||||||
onChange={handleMessageChange}
|
|
||||||
name="comment"
|
|
||||||
id="comment"
|
|
||||||
className="text-background-reverse block w-full resize-none border-0 bg-transparent py-1.5 placeholder:text-gray-400 focus:ring-0 sm:text-sm sm:leading-6"
|
|
||||||
placeholder="Message ..."
|
|
||||||
rows={1}
|
|
||||||
style={{ overflow: 'auto' }}
|
|
||||||
/>
|
|
||||||
{/* Spacer element to match the height of the toolbar */}
|
|
||||||
<div className="py-2" aria-hidden="true">
|
|
||||||
{/* Matches height of button in toolbar (1px border + 36px content height) */}
|
|
||||||
<div className="py-px">
|
|
||||||
<div className="h-9" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default BasicPromptInput
|
|
||||||
@ -1,99 +0,0 @@
|
|||||||
import React, { Fragment, useRef } from 'react'
|
|
||||||
|
|
||||||
import { Dialog, Transition } from '@headlessui/react'
|
|
||||||
import { ExclamationTriangleIcon } from '@heroicons/react/24/outline'
|
|
||||||
|
|
||||||
import { useAtom } from 'jotai'
|
|
||||||
|
|
||||||
import useDeleteConversation from '@/hooks/useDeleteConversation'
|
|
||||||
|
|
||||||
import { showConfirmDeleteConversationModalAtom } from '@/helpers/atoms/Modal.atom'
|
|
||||||
|
|
||||||
const ConfirmDeleteConversationModal: React.FC = () => {
|
|
||||||
const [show, setShow] = useAtom(showConfirmDeleteConversationModalAtom)
|
|
||||||
const cancelButtonRef = useRef(null)
|
|
||||||
const { deleteConvo } = useDeleteConversation()
|
|
||||||
|
|
||||||
const onConfirmDelete = () => {
|
|
||||||
deleteConvo().then(() => setShow(false))
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Transition.Root show={show} as={Fragment}>
|
|
||||||
<Dialog
|
|
||||||
as="div"
|
|
||||||
className="relative z-10"
|
|
||||||
initialFocus={cancelButtonRef}
|
|
||||||
onClose={setShow}
|
|
||||||
>
|
|
||||||
<Transition.Child
|
|
||||||
as={Fragment}
|
|
||||||
enter="ease-out duration-300"
|
|
||||||
enterFrom="opacity-0"
|
|
||||||
enterTo="opacity-100"
|
|
||||||
leave="ease-in duration-200"
|
|
||||||
leaveFrom="opacity-100"
|
|
||||||
leaveTo="opacity-0"
|
|
||||||
>
|
|
||||||
<div className="fixed inset-0 z-40 h-full bg-gray-950/90 transition-opacity dark:backdrop-blur-sm" />
|
|
||||||
</Transition.Child>
|
|
||||||
|
|
||||||
<div className="fixed inset-0 z-50 overflow-y-auto">
|
|
||||||
<div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
|
|
||||||
<Transition.Child
|
|
||||||
as={Fragment}
|
|
||||||
enter="ease-out duration-300"
|
|
||||||
enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
|
||||||
enterTo="opacity-100 translate-y-0 sm:scale-100"
|
|
||||||
leave="ease-in duration-200"
|
|
||||||
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
|
|
||||||
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
|
||||||
>
|
|
||||||
<Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-border bg-background/90 px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6">
|
|
||||||
<div className="sm:flex sm:items-start">
|
|
||||||
<div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
|
|
||||||
<ExclamationTriangleIcon
|
|
||||||
className="h-6 w-6 text-red-600"
|
|
||||||
aria-hidden="true"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
|
|
||||||
<Dialog.Title as="h3" className="font-semibold leading-6">
|
|
||||||
Delete Conversation
|
|
||||||
</Dialog.Title>
|
|
||||||
<div className="mt-2">
|
|
||||||
<p className="text-muted-foreground">
|
|
||||||
Are you sure you want to delete this conversation? All
|
|
||||||
of messages will be permanently removed. This action
|
|
||||||
cannot be undone.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="inline-flex w-full justify-center rounded-md bg-red-600 px-3 py-2 text-xs font-semibold text-white shadow-sm hover:bg-red-500 sm:ml-3 sm:w-auto"
|
|
||||||
onClick={() => onConfirmDelete()}
|
|
||||||
>
|
|
||||||
Delete
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-xs font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:mt-0 sm:w-auto"
|
|
||||||
onClick={() => setShow(false)}
|
|
||||||
ref={cancelButtonRef}
|
|
||||||
>
|
|
||||||
Cancel
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</Dialog.Panel>
|
|
||||||
</Transition.Child>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Dialog>
|
|
||||||
</Transition.Root>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default ConfirmDeleteConversationModal
|
|
||||||
@ -1,93 +0,0 @@
|
|||||||
import React, { Fragment } from 'react'
|
|
||||||
|
|
||||||
import { Dialog, Transition } from '@headlessui/react'
|
|
||||||
import { QuestionMarkCircleIcon } from '@heroicons/react/24/outline'
|
|
||||||
import { PrimitiveAtom, useAtom } from 'jotai'
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
atom: PrimitiveAtom<boolean>
|
|
||||||
title: string
|
|
||||||
description: string
|
|
||||||
onConfirm: () => void
|
|
||||||
}
|
|
||||||
|
|
||||||
const ConfirmationModal: React.FC<Props> = ({
|
|
||||||
atom,
|
|
||||||
title,
|
|
||||||
description,
|
|
||||||
onConfirm,
|
|
||||||
}) => {
|
|
||||||
const [show, setShow] = useAtom(atom)
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Transition.Root show={show} as={Fragment}>
|
|
||||||
<Dialog as="div" className="relative z-10" onClose={setShow}>
|
|
||||||
<Transition.Child
|
|
||||||
as={Fragment}
|
|
||||||
enter="ease-out duration-300"
|
|
||||||
enterFrom="opacity-0"
|
|
||||||
enterTo="opacity-100"
|
|
||||||
leave="ease-in duration-200"
|
|
||||||
leaveFrom="opacity-100"
|
|
||||||
leaveTo="opacity-0"
|
|
||||||
>
|
|
||||||
<div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
|
|
||||||
</Transition.Child>
|
|
||||||
|
|
||||||
<div className="fixed inset-0 z-10 overflow-y-auto">
|
|
||||||
<div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
|
|
||||||
<Transition.Child
|
|
||||||
as={Fragment}
|
|
||||||
enter="ease-out duration-300"
|
|
||||||
enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
|
||||||
enterTo="opacity-100 translate-y-0 sm:scale-100"
|
|
||||||
leave="ease-in duration-200"
|
|
||||||
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
|
|
||||||
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
|
||||||
>
|
|
||||||
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6">
|
|
||||||
<div className="sm:flex sm:items-start">
|
|
||||||
<div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
|
|
||||||
<QuestionMarkCircleIcon
|
|
||||||
className="h-6 w-6 text-green-600"
|
|
||||||
aria-hidden="true"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
|
|
||||||
<Dialog.Title
|
|
||||||
as="h3"
|
|
||||||
className="text-base font-semibold leading-6 text-gray-900"
|
|
||||||
>
|
|
||||||
{title}
|
|
||||||
</Dialog.Title>
|
|
||||||
<div className="mt-2">
|
|
||||||
<p className="text-sm text-gray-500">{description}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="inline-flex w-full justify-center rounded-md bg-red-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-500 sm:ml-3 sm:w-auto"
|
|
||||||
onClick={onConfirm}
|
|
||||||
>
|
|
||||||
OK
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:mt-0 sm:w-auto"
|
|
||||||
onClick={() => setShow(false)}
|
|
||||||
>
|
|
||||||
Cancel
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</Dialog.Panel>
|
|
||||||
</Transition.Child>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Dialog>
|
|
||||||
</Transition.Root>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default React.memo(ConfirmationModal)
|
|
||||||
@ -1,101 +0,0 @@
|
|||||||
import { Model } from '@janhq/core/lib/types'
|
|
||||||
import { useAtomValue, useSetAtom } from 'jotai'
|
|
||||||
|
|
||||||
import { twMerge } from 'tailwind-merge'
|
|
||||||
|
|
||||||
import { MainViewState } from '@/constants/screens'
|
|
||||||
|
|
||||||
import { useActiveModel } from '@/hooks/useActiveModel'
|
|
||||||
|
|
||||||
import { useGetDownloadedModels } from '@/hooks/useGetDownloadedModels'
|
|
||||||
import { useMainViewState } from '@/hooks/useMainViewState'
|
|
||||||
|
|
||||||
import { displayDate } from '@/utils/datetime'
|
|
||||||
|
|
||||||
import {
|
|
||||||
getActiveConvoIdAtom,
|
|
||||||
setActiveConvoIdAtom,
|
|
||||||
} from '@/helpers/atoms/Conversation.atom'
|
|
||||||
|
|
||||||
import { activeAssistantModelAtom } from '@/helpers/atoms/Model.atom'
|
|
||||||
|
|
||||||
type Props = {
|
|
||||||
conversation: Conversation
|
|
||||||
name: string
|
|
||||||
summary?: string
|
|
||||||
updatedAt?: string
|
|
||||||
}
|
|
||||||
|
|
||||||
const HistoryItem: React.FC<Props> = ({
|
|
||||||
conversation,
|
|
||||||
name,
|
|
||||||
summary,
|
|
||||||
updatedAt,
|
|
||||||
}) => {
|
|
||||||
const activeConvoId = useAtomValue(getActiveConvoIdAtom)
|
|
||||||
const isSelected = activeConvoId === conversation._id
|
|
||||||
const activeModel = useAtomValue(activeAssistantModelAtom)
|
|
||||||
const { startModel } = useActiveModel()
|
|
||||||
const { setMainViewState } = useMainViewState()
|
|
||||||
const setActiveConvoId = useSetAtom(setActiveConvoIdAtom)
|
|
||||||
const { downloadedModels } = useGetDownloadedModels()
|
|
||||||
|
|
||||||
const onClick = async () => {
|
|
||||||
if (conversation.modelId == null) {
|
|
||||||
console.debug('modelId is undefined')
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
const model = downloadedModels.find(
|
|
||||||
(e: Model) => e._id === conversation.modelId
|
|
||||||
)
|
|
||||||
if (model != null) {
|
|
||||||
if (activeModel == null) {
|
|
||||||
// if there's no active model, we simply load conversation's model
|
|
||||||
startModel(model._id)
|
|
||||||
} else if (activeModel._id !== model._id) {
|
|
||||||
// display confirmation modal
|
|
||||||
// TODO: temporarily disabled
|
|
||||||
// setConfirmationModalProps({
|
|
||||||
// replacingModel: model,
|
|
||||||
// })
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (activeConvoId !== conversation._id) {
|
|
||||||
setMainViewState(MainViewState.Chat)
|
|
||||||
setActiveConvoId(conversation._id)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const backgroundColor = isSelected ? 'bg-background/80' : 'bg-background/20'
|
|
||||||
const description = conversation?.lastMessage ?? 'No new message'
|
|
||||||
|
|
||||||
return (
|
|
||||||
<li
|
|
||||||
role="button"
|
|
||||||
className={twMerge(
|
|
||||||
'flex flex-row rounded-md border border-border p-3',
|
|
||||||
backgroundColor
|
|
||||||
)}
|
|
||||||
onClick={onClick}
|
|
||||||
>
|
|
||||||
<div className="flex flex-1 flex-col">
|
|
||||||
{/* title */}
|
|
||||||
|
|
||||||
<span className="mb-1 line-clamp-1 leading-5 text-muted-foreground">
|
|
||||||
{updatedAt && displayDate(new Date(updatedAt).getTime())}
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<span className="line-clamp-1">{summary ?? name}</span>
|
|
||||||
|
|
||||||
{/* description */}
|
|
||||||
<span className="mt-1 line-clamp-2 text-muted-foreground">
|
|
||||||
{description}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default HistoryItem
|
|
||||||
@ -1,54 +0,0 @@
|
|||||||
import { useEffect } from 'react'
|
|
||||||
|
|
||||||
import { useAtomValue } from 'jotai'
|
|
||||||
|
|
||||||
import { twMerge } from 'tailwind-merge'
|
|
||||||
|
|
||||||
import { searchAtom } from '@/containers/Providers/Jotai'
|
|
||||||
|
|
||||||
import useGetUserConversations from '@/hooks/useGetUserConversations'
|
|
||||||
|
|
||||||
import HistoryItem from '../HistoryItem'
|
|
||||||
|
|
||||||
import SidebarEmptyHistory from '../SidebarEmptyHistory'
|
|
||||||
|
|
||||||
import { userConversationsAtom } from '@/helpers/atoms/Conversation.atom'
|
|
||||||
|
|
||||||
const HistoryList: React.FC = () => {
|
|
||||||
const conversations = useAtomValue(userConversationsAtom)
|
|
||||||
const searchText = useAtomValue(searchAtom)
|
|
||||||
const { getUserConversations } = useGetUserConversations()
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
getUserConversations()
|
|
||||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
||||||
}, [])
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="flex flex-grow flex-col gap-2 px-4 pb-4">
|
|
||||||
{conversations.length > 0 ? (
|
|
||||||
<ul className={twMerge('mt-1 flex flex-col gap-y-3 overflow-y-auto')}>
|
|
||||||
{conversations
|
|
||||||
.filter(
|
|
||||||
(e) =>
|
|
||||||
searchText.trim() === '' ||
|
|
||||||
e.name?.toLowerCase().includes(searchText.toLowerCase().trim())
|
|
||||||
)
|
|
||||||
.map((convo, i) => (
|
|
||||||
<HistoryItem
|
|
||||||
key={i}
|
|
||||||
conversation={convo}
|
|
||||||
summary={convo.summary}
|
|
||||||
name={convo.name || 'Jan'}
|
|
||||||
updatedAt={convo.updatedAt ?? ''}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</ul>
|
|
||||||
) : (
|
|
||||||
<SidebarEmptyHistory />
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default HistoryList
|
|
||||||
@ -1,112 +0,0 @@
|
|||||||
/* eslint-disable react-hooks/rules-of-hooks */
|
|
||||||
'use client'
|
|
||||||
|
|
||||||
import { useAtomValue } from 'jotai'
|
|
||||||
|
|
||||||
// import { useCreateConversation } from '@/hooks/useCreateConversation'
|
|
||||||
|
|
||||||
import { useActiveModel } from '@/hooks/useActiveModel'
|
|
||||||
import useGetInputState from '@/hooks/useGetInputState'
|
|
||||||
|
|
||||||
import BasicPromptAccessories from '../BasicPromptAccessories'
|
|
||||||
import BasicPromptInput from '../BasicPromptInput'
|
|
||||||
|
|
||||||
import {
|
|
||||||
currentConvoStateAtom,
|
|
||||||
getActiveConvoIdAtom,
|
|
||||||
} from '@/helpers/atoms/Conversation.atom'
|
|
||||||
|
|
||||||
import { userConversationsAtom } from '@/helpers/atoms/Conversation.atom'
|
|
||||||
// import { showingModalNoActiveModel } from '@/helpers/atoms/Modal.atom'
|
|
||||||
// import {
|
|
||||||
// activeAssistantModelAtom,
|
|
||||||
// stateModel,
|
|
||||||
// } from '@/helpers/atoms/Model.atom'
|
|
||||||
|
|
||||||
const InputToolbar: React.FC = () => {
|
|
||||||
// const activeModel = useAtomValue(activeAssistantModelAtom)
|
|
||||||
const currentConvoState = useAtomValue(currentConvoStateAtom)
|
|
||||||
const { inputState, currentConvo } = useGetInputState()
|
|
||||||
// const { requestCreateConvo } = useCreateConversation()
|
|
||||||
const { startModel } = useActiveModel()
|
|
||||||
// const { loading } = useAtomValue(stateModel)
|
|
||||||
const conversations = useAtomValue(userConversationsAtom)
|
|
||||||
const activeConvoId = useAtomValue(getActiveConvoIdAtom)
|
|
||||||
// const setShowModalNoActiveModel = useSetAtom(showingModalNoActiveModel)
|
|
||||||
|
|
||||||
// const onNewConversationClick = () => {
|
|
||||||
// if (activeModel) {
|
|
||||||
// requestCreateConvo(activeModel)
|
|
||||||
// } else {
|
|
||||||
// setShowModalNoActiveModel(true)
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
|
|
||||||
const onStartModelClick = () => {
|
|
||||||
const modelId = currentConvo?.modelId
|
|
||||||
if (!modelId) return
|
|
||||||
startModel(modelId)
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!activeConvoId) {
|
|
||||||
return null
|
|
||||||
}
|
|
||||||
if (
|
|
||||||
(activeConvoId && inputState === 'model-mismatch') ||
|
|
||||||
inputState === 'loading'
|
|
||||||
) {
|
|
||||||
// const message = inputState === 'loading' ? 'Loading..' : 'Model mismatch!'
|
|
||||||
return (
|
|
||||||
<div className="sticky bottom-0 flex items-center justify-center bg-background/90">
|
|
||||||
<div className="my-2">
|
|
||||||
{/* <p className="mx-auto my-5 line-clamp-2 text-ellipsis text-center italic text-gray-600">
|
|
||||||
{message}
|
|
||||||
</p> */}
|
|
||||||
<button onClick={onStartModelClick}>
|
|
||||||
`Start model ${currentConvo?.modelId}`
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
if (inputState === 'model-not-found') {
|
|
||||||
return (
|
|
||||||
<div className="sticky bottom-0 flex items-center justify-center bg-background/90">
|
|
||||||
<p className="mx-auto my-5 line-clamp-2 text-ellipsis text-center italic text-gray-600">
|
|
||||||
Model {currentConvo?.modelId} not found! Please re-download the model
|
|
||||||
first.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
if (conversations.length > 0)
|
|
||||||
return (
|
|
||||||
<div className="sticky bottom-0 w-full bg-background/90 px-5 pb-0 pt-2">
|
|
||||||
{currentConvoState?.error && (
|
|
||||||
<div className="flex flex-row justify-center">
|
|
||||||
<span className="mx-5 my-2 text-sm text-red-500">
|
|
||||||
{currentConvoState?.error?.toString()}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{/* <div className="my-3 flex justify-center gap-2">
|
|
||||||
<SecondaryButton
|
|
||||||
onClick={onNewConversationClick}
|
|
||||||
title="New Conversation"
|
|
||||||
icon={<PlusIcon width={16} height={16} />}
|
|
||||||
/>
|
|
||||||
</div> */}
|
|
||||||
{/* My text input */}
|
|
||||||
<div className="mb-5 flex items-start space-x-4">
|
|
||||||
<div className="relative min-w-0 flex-1">
|
|
||||||
<BasicPromptInput />
|
|
||||||
<BasicPromptAccessories />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default InputToolbar
|
|
||||||
@ -1,13 +0,0 @@
|
|||||||
const LoadingIndicator = () => {
|
|
||||||
return (
|
|
||||||
<div className="typingIndicatorContainer">
|
|
||||||
<div className="typingIndicatorBubble">
|
|
||||||
<div className="typingIndicatorBubbleDot"></div>
|
|
||||||
<div className="typingIndicatorBubbleDot"></div>
|
|
||||||
<div className="typingIndicatorBubbleDot"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default LoadingIndicator
|
|
||||||
@ -1,35 +0,0 @@
|
|||||||
import { useAtomValue, useSetAtom } from 'jotai'
|
|
||||||
|
|
||||||
import { Trash2 } from 'lucide-react'
|
|
||||||
|
|
||||||
import { currentConversationAtom } from '@/helpers/atoms/Conversation.atom'
|
|
||||||
import { showConfirmDeleteConversationModalAtom } from '@/helpers/atoms/Modal.atom'
|
|
||||||
|
|
||||||
const MainHeader: React.FC = () => {
|
|
||||||
const setShowConfirmDeleteConversationModal = useSetAtom(
|
|
||||||
showConfirmDeleteConversationModalAtom
|
|
||||||
)
|
|
||||||
const activeConversation = useAtomValue(currentConversationAtom)
|
|
||||||
|
|
||||||
const currentConvo = useAtomValue(currentConversationAtom)
|
|
||||||
const title = currentConvo?.name ?? ''
|
|
||||||
|
|
||||||
if (!activeConversation) return null
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="sticky top-0 border-b border-border bg-background/90 px-4 py-2">
|
|
||||||
<span className="font-semibold text-muted-foreground">{title}</span>
|
|
||||||
|
|
||||||
{/* right most */}
|
|
||||||
<div className="absolute right-4 top-2">
|
|
||||||
<Trash2
|
|
||||||
role="button"
|
|
||||||
size={16}
|
|
||||||
onClick={() => setShowConfirmDeleteConversationModal(true)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default MainHeader
|
|
||||||
@ -1,75 +0,0 @@
|
|||||||
import React, { Fragment } from 'react'
|
|
||||||
|
|
||||||
import { Dialog, Transition } from '@headlessui/react'
|
|
||||||
import { useAtom } from 'jotai'
|
|
||||||
|
|
||||||
import { MainViewState } from '@/constants/screens'
|
|
||||||
|
|
||||||
import { useMainViewState } from '@/hooks/useMainViewState'
|
|
||||||
|
|
||||||
import { showingModalNoActiveModel } from '@/helpers/atoms/Modal.atom'
|
|
||||||
|
|
||||||
const ModalNoActiveModel: React.FC = () => {
|
|
||||||
const [show, setShow] = useAtom(showingModalNoActiveModel)
|
|
||||||
const { setMainViewState } = useMainViewState()
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Transition.Root show={show} as={Fragment}>
|
|
||||||
<Dialog as="div" className="relative z-10" onClose={setShow}>
|
|
||||||
<Transition.Child
|
|
||||||
as={Fragment}
|
|
||||||
enter="ease-out duration-300"
|
|
||||||
enterFrom="opacity-0"
|
|
||||||
enterTo="opacity-100"
|
|
||||||
leave="ease-in duration-200"
|
|
||||||
leaveFrom="opacity-100"
|
|
||||||
leaveTo="opacity-0"
|
|
||||||
>
|
|
||||||
<div className="fixed inset-0 z-40 h-full bg-gray-950/90 transition-opacity dark:backdrop-blur-sm" />
|
|
||||||
</Transition.Child>
|
|
||||||
|
|
||||||
<div className="fixed inset-0 z-50 w-screen overflow-y-auto">
|
|
||||||
<div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
|
|
||||||
<Transition.Child
|
|
||||||
as={Fragment}
|
|
||||||
enter="ease-out duration-300"
|
|
||||||
enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
|
||||||
enterTo="opacity-100 translate-y-0 sm:scale-100"
|
|
||||||
leave="ease-in duration-200"
|
|
||||||
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
|
|
||||||
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
|
||||||
>
|
|
||||||
<Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-border bg-background/90 px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6">
|
|
||||||
<h1 className="font-base mb-4 font-bold">
|
|
||||||
You don’t have any actively running models. Please start a
|
|
||||||
downloaded model in My Models page to use this feature.
|
|
||||||
</h1>
|
|
||||||
<div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="inline-flex w-full justify-center rounded-md bg-accent px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-accent/80 sm:ml-3 sm:w-auto"
|
|
||||||
onClick={() => {
|
|
||||||
setMainViewState(MainViewState.MyModels)
|
|
||||||
setShow(false)
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Ok
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:mt-0 sm:w-auto"
|
|
||||||
onClick={() => setShow(false)}
|
|
||||||
>
|
|
||||||
Cancel
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</Dialog.Panel>
|
|
||||||
</Transition.Child>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Dialog>
|
|
||||||
</Transition.Root>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default React.memo(ModalNoActiveModel)
|
|
||||||
@ -1,24 +0,0 @@
|
|||||||
import { useAtom, useAtomValue } from 'jotai'
|
|
||||||
|
|
||||||
import { currentPromptAtom } from '@/containers/Providers/Jotai'
|
|
||||||
|
|
||||||
import useSendChatMessage from '@/hooks/useSendChatMessage'
|
|
||||||
|
|
||||||
import { currentConvoStateAtom } from '@/helpers/atoms/Conversation.atom'
|
|
||||||
|
|
||||||
const SendButton: React.FC = () => {
|
|
||||||
const [currentPrompt] = useAtom(currentPromptAtom)
|
|
||||||
const currentConvoState = useAtomValue(currentConvoStateAtom)
|
|
||||||
|
|
||||||
const { sendChatMessage } = useSendChatMessage()
|
|
||||||
const isWaitingForResponse = currentConvoState?.waitingForResponse ?? false
|
|
||||||
const disabled = currentPrompt.trim().length === 0 || isWaitingForResponse
|
|
||||||
|
|
||||||
return (
|
|
||||||
<button onClick={sendChatMessage} disabled={disabled} type="submit">
|
|
||||||
Send
|
|
||||||
</button>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default SendButton
|
|
||||||
@ -1,63 +0,0 @@
|
|||||||
import { useEffect, useState } from 'react'
|
|
||||||
|
|
||||||
import { useAtomValue, useSetAtom } from 'jotai'
|
|
||||||
|
|
||||||
import { MessageCircle } from 'lucide-react'
|
|
||||||
|
|
||||||
import { MainViewState } from '@/constants/screens'
|
|
||||||
|
|
||||||
import { useCreateConversation } from '@/hooks/useCreateConversation'
|
|
||||||
import { useGetDownloadedModels } from '@/hooks/useGetDownloadedModels'
|
|
||||||
import { useMainViewState } from '@/hooks/useMainViewState'
|
|
||||||
|
|
||||||
import { showingModalNoActiveModel } from '@/helpers/atoms/Modal.atom'
|
|
||||||
import { activeAssistantModelAtom } from '@/helpers/atoms/Model.atom'
|
|
||||||
|
|
||||||
enum ActionButton {
|
|
||||||
DownloadModel = 'Download a Model',
|
|
||||||
StartChat = 'Start a Conversation',
|
|
||||||
}
|
|
||||||
|
|
||||||
const SidebarEmptyHistory: React.FC = () => {
|
|
||||||
const { downloadedModels } = useGetDownloadedModels()
|
|
||||||
const { setMainViewState } = useMainViewState()
|
|
||||||
const { requestCreateConvo } = useCreateConversation()
|
|
||||||
const [action, setAction] = useState(ActionButton.DownloadModel)
|
|
||||||
const modalNoActiveModel = useSetAtom(showingModalNoActiveModel)
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (downloadedModels.length > 0) {
|
|
||||||
setAction(ActionButton.StartChat)
|
|
||||||
} else {
|
|
||||||
setAction(ActionButton.DownloadModel)
|
|
||||||
}
|
|
||||||
}, [downloadedModels])
|
|
||||||
|
|
||||||
const activeModel = useAtomValue(activeAssistantModelAtom)
|
|
||||||
const onClick = async () => {
|
|
||||||
if (action === ActionButton.DownloadModel) {
|
|
||||||
setMainViewState(MainViewState.ExploreModels)
|
|
||||||
} else {
|
|
||||||
if (!activeModel) {
|
|
||||||
modalNoActiveModel(true)
|
|
||||||
} else {
|
|
||||||
await requestCreateConvo(activeModel)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="flex flex-col items-center gap-3 py-10">
|
|
||||||
<MessageCircle size={24} />
|
|
||||||
<div className="flex flex-col items-center">
|
|
||||||
<h6 className="text-center text-base">No Chat History</h6>
|
|
||||||
<p className="mb-6 mt-1 text-center text-muted-foreground">
|
|
||||||
Get started by creating a new chat.
|
|
||||||
</p>
|
|
||||||
<button onClick={onClick}>{action}</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default SidebarEmptyHistory
|
|
||||||
@ -1,135 +0,0 @@
|
|||||||
import React, { Fragment } from 'react'
|
|
||||||
|
|
||||||
import { Dialog, Transition } from '@headlessui/react'
|
|
||||||
import { ExclamationTriangleIcon, XMarkIcon } from '@heroicons/react/24/outline'
|
|
||||||
|
|
||||||
import { Model } from '@janhq/core/lib/types'
|
|
||||||
import { useAtom, useAtomValue } from 'jotai'
|
|
||||||
|
|
||||||
import { useActiveModel } from '@/hooks/useActiveModel'
|
|
||||||
|
|
||||||
import { switchingModelConfirmationModalPropsAtom } from '@/helpers/atoms/Modal.atom'
|
|
||||||
|
|
||||||
import { activeAssistantModelAtom } from '@/helpers/atoms/Model.atom'
|
|
||||||
|
|
||||||
export type SwitchingModelConfirmationModalProps = {
|
|
||||||
replacingModel: Model
|
|
||||||
}
|
|
||||||
|
|
||||||
const SwitchingModelConfirmationModal: React.FC = () => {
|
|
||||||
const [props, setProps] = useAtom(switchingModelConfirmationModalPropsAtom)
|
|
||||||
const activeModel = useAtomValue(activeAssistantModelAtom)
|
|
||||||
const { startModel } = useActiveModel()
|
|
||||||
|
|
||||||
const onConfirmSwitchModelClick = () => {
|
|
||||||
const modelId = props?.replacingModel._id
|
|
||||||
if (modelId) {
|
|
||||||
startModel(modelId)
|
|
||||||
}
|
|
||||||
setProps(undefined)
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Transition.Root show={props != null} as={Fragment}>
|
|
||||||
<Dialog
|
|
||||||
as="div"
|
|
||||||
className="relative z-10"
|
|
||||||
onClose={() => setProps(undefined)}
|
|
||||||
>
|
|
||||||
<Transition.Child
|
|
||||||
as={Fragment}
|
|
||||||
enter="ease-out duration-300"
|
|
||||||
enterFrom="opacity-0"
|
|
||||||
enterTo="opacity-100"
|
|
||||||
leave="ease-in duration-200"
|
|
||||||
leaveFrom="opacity-100"
|
|
||||||
leaveTo="opacity-0"
|
|
||||||
>
|
|
||||||
<div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
|
|
||||||
</Transition.Child>
|
|
||||||
|
|
||||||
<div className="fixed inset-0 z-10 w-screen overflow-y-auto">
|
|
||||||
<div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
|
|
||||||
<Transition.Child
|
|
||||||
as={Fragment}
|
|
||||||
enter="ease-out duration-300"
|
|
||||||
enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
|
||||||
enterTo="opacity-100 translate-y-0 sm:scale-100"
|
|
||||||
leave="ease-in duration-200"
|
|
||||||
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
|
|
||||||
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
|
||||||
>
|
|
||||||
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6">
|
|
||||||
<div className="absolute right-0 top-0 hidden pr-4 pt-4 sm:block">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
|
|
||||||
onClick={() => setProps(undefined)}
|
|
||||||
>
|
|
||||||
<span className="sr-only">Close</span>
|
|
||||||
<XMarkIcon className="h-6 w-6" aria-hidden="true" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div className="sm:flex sm:items-start">
|
|
||||||
<div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
|
|
||||||
<ExclamationTriangleIcon
|
|
||||||
className="h-6 w-6 text-red-600"
|
|
||||||
aria-hidden="true"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
|
|
||||||
<Dialog.Title
|
|
||||||
as="h3"
|
|
||||||
className="text-base font-semibold leading-6 text-gray-900"
|
|
||||||
>
|
|
||||||
Switching model
|
|
||||||
</Dialog.Title>
|
|
||||||
<div className="mt-2 flex flex-col">
|
|
||||||
<p className="text-sm text-gray-500">
|
|
||||||
Selected conversation is using model{' '}
|
|
||||||
<span className="font-semibold text-black">
|
|
||||||
{props?.replacingModel.name}
|
|
||||||
</span>
|
|
||||||
, but the active model is using{' '}
|
|
||||||
<span className="font-semibold text-black">
|
|
||||||
{activeModel?.name}
|
|
||||||
</span>
|
|
||||||
.
|
|
||||||
</p>
|
|
||||||
<br />
|
|
||||||
<p className="text-sm text-gray-500">
|
|
||||||
Switch to
|
|
||||||
<span className="font-semibold text-black">
|
|
||||||
{' '}
|
|
||||||
{props?.replacingModel.name}?
|
|
||||||
</span>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="inline-flex w-full justify-center rounded-md bg-red-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-500 sm:ml-3 sm:w-auto"
|
|
||||||
onClick={onConfirmSwitchModelClick}
|
|
||||||
>
|
|
||||||
Switch
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:mt-0 sm:w-auto"
|
|
||||||
onClick={() => setProps(undefined)}
|
|
||||||
>
|
|
||||||
Cancel
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</Dialog.Panel>
|
|
||||||
</Transition.Child>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Dialog>
|
|
||||||
</Transition.Root>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default SwitchingModelConfirmationModal
|
|
||||||
@ -1,46 +0,0 @@
|
|||||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
||||||
|
|
||||||
import { useController } from 'react-hook-form'
|
|
||||||
|
|
||||||
type Props = {
|
|
||||||
id: string
|
|
||||||
title: string
|
|
||||||
placeholder: string
|
|
||||||
description?: string
|
|
||||||
control?: any
|
|
||||||
required?: boolean
|
|
||||||
}
|
|
||||||
|
|
||||||
const TextAreaWithTitle: React.FC<Props> = ({
|
|
||||||
id,
|
|
||||||
title,
|
|
||||||
placeholder,
|
|
||||||
description,
|
|
||||||
control,
|
|
||||||
required = false,
|
|
||||||
}) => {
|
|
||||||
const { field } = useController({
|
|
||||||
name: id,
|
|
||||||
control: control,
|
|
||||||
rules: { required: required },
|
|
||||||
})
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="flex flex-col gap-2">
|
|
||||||
<label htmlFor="comment" className="block font-bold">
|
|
||||||
{title}
|
|
||||||
</label>
|
|
||||||
{description && (
|
|
||||||
<p className="mt-1 font-normal text-muted-foreground">{description}</p>
|
|
||||||
)}
|
|
||||||
<textarea
|
|
||||||
rows={4}
|
|
||||||
className="text-background-reverse block w-full resize-none rounded-md border-0 bg-background/80 py-1.5 text-xs leading-relaxed shadow-sm ring-1 ring-inset ring-border placeholder:text-muted-foreground focus:ring-2 focus:ring-inset focus:ring-accent/50"
|
|
||||||
placeholder={placeholder}
|
|
||||||
{...field}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default TextAreaWithTitle
|
|
||||||
@ -1,11 +1,10 @@
|
|||||||
import { Badge, Button } from '@janhq/uikit'
|
import { Badge, Button } from '@janhq/uikit'
|
||||||
import { useAtomValue } from 'jotai'
|
import { useAtomValue } from 'jotai'
|
||||||
|
|
||||||
import ProgressBar from '@/components/ProgressBar'
|
|
||||||
|
|
||||||
import DownloadingState from '@/containers/Layout/BottomBar/DownloadingState'
|
import DownloadingState from '@/containers/Layout/BottomBar/DownloadingState'
|
||||||
|
|
||||||
import SystemItem from '@/containers/Layout/BottomBar/SystemItem'
|
import SystemItem from '@/containers/Layout/BottomBar/SystemItem'
|
||||||
|
import ProgressBar from '@/containers/ProgressBar'
|
||||||
|
|
||||||
import { appDownloadProgress } from '@/containers/Providers/Jotai'
|
import { appDownloadProgress } from '@/containers/Providers/Jotai'
|
||||||
|
|
||||||
|
|||||||
9
web/containers/Loader/Bubble.tsx
Normal file
9
web/containers/Loader/Bubble.tsx
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
export default function BubbleLoader() {
|
||||||
|
return (
|
||||||
|
<div className="bubble-loader">
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
@ -69,9 +69,7 @@ const Providers = (props: PropsWithChildren) => {
|
|||||||
{setupCore && activated && (
|
{setupCore && activated && (
|
||||||
<FeatureToggleWrapper>
|
<FeatureToggleWrapper>
|
||||||
<EventListenerWrapper>
|
<EventListenerWrapper>
|
||||||
<TooltipProvider>
|
<TooltipProvider>{children}</TooltipProvider>
|
||||||
<ModalWrapper>{children}</ModalWrapper>
|
|
||||||
</TooltipProvider>
|
|
||||||
</EventListenerWrapper>
|
</EventListenerWrapper>
|
||||||
<Toaster position="top-right" />
|
<Toaster position="top-right" />
|
||||||
</FeatureToggleWrapper>
|
</FeatureToggleWrapper>
|
||||||
|
|||||||
@ -1,7 +1,5 @@
|
|||||||
import { atom } from 'jotai'
|
import { atom } from 'jotai'
|
||||||
|
|
||||||
import { SwitchingModelConfirmationModalProps } from '@/components/SwitchingModelConfirmationModal'
|
|
||||||
|
|
||||||
export const showConfirmDeleteConversationModalAtom = atom(false)
|
export const showConfirmDeleteConversationModalAtom = atom(false)
|
||||||
export const showConfirmSignOutModalAtom = atom(false)
|
export const showConfirmSignOutModalAtom = atom(false)
|
||||||
export const showConfirmDeleteModalAtom = atom(false)
|
export const showConfirmDeleteModalAtom = atom(false)
|
||||||
@ -11,7 +9,4 @@ export const showingMobilePaneAtom = atom<boolean>(false)
|
|||||||
export const showingBotListModalAtom = atom<boolean>(false)
|
export const showingBotListModalAtom = atom<boolean>(false)
|
||||||
export const showingCancelDownloadModalAtom = atom<boolean>(false)
|
export const showingCancelDownloadModalAtom = atom<boolean>(false)
|
||||||
|
|
||||||
export const switchingModelConfirmationModalPropsAtom = atom<
|
|
||||||
SwitchingModelConfirmationModalProps | undefined
|
|
||||||
>(undefined)
|
|
||||||
export const showingModalNoActiveModel = atom<boolean>(false)
|
export const showingModalNoActiveModel = atom<boolean>(false)
|
||||||
|
|||||||
@ -1,6 +1,7 @@
|
|||||||
/* eslint-disable @typescript-eslint/naming-convention */
|
/* eslint-disable @typescript-eslint/naming-convention */
|
||||||
import { NewMessageResponse } from '@janhq/core'
|
import { NewMessageResponse } from '@janhq/core'
|
||||||
import { Message } from '@janhq/core/lib/types'
|
import { Message } from '@janhq/core/lib/types'
|
||||||
|
|
||||||
export enum MessageType {
|
export enum MessageType {
|
||||||
Text = 'Text',
|
Text = 'Text',
|
||||||
Image = 'Image',
|
Image = 'Image',
|
||||||
@ -78,6 +79,6 @@ export const toChatMessage = (
|
|||||||
text: content,
|
text: content,
|
||||||
imageUrls: imageUrls,
|
imageUrls: imageUrls,
|
||||||
createdAt: createdAt,
|
createdAt: createdAt,
|
||||||
status: MessageStatus.Ready,
|
status: m.message === '' ? MessageStatus.Pending : MessageStatus.Ready,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -38,6 +38,7 @@
|
|||||||
"tailwind-merge": "^2.0.0",
|
"tailwind-merge": "^2.0.0",
|
||||||
"tailwindcss": "3.3.5",
|
"tailwindcss": "3.3.5",
|
||||||
"typescript": "5.2.2",
|
"typescript": "5.2.2",
|
||||||
|
"typewriter-effect": "^2.21.0",
|
||||||
"uuid": "^9.0.1",
|
"uuid": "^9.0.1",
|
||||||
"zod": "^3.22.4"
|
"zod": "^3.22.4"
|
||||||
},
|
},
|
||||||
|
|||||||
@ -12,6 +12,7 @@ const ChatItem = forwardRef<Ref, Props>(({ message }, ref) => {
|
|||||||
return (
|
return (
|
||||||
<div ref={ref} className="py-4 even:bg-secondary dark:even:bg-secondary/20">
|
<div ref={ref} className="py-4 even:bg-secondary dark:even:bg-secondary/20">
|
||||||
<SimpleTextMessage
|
<SimpleTextMessage
|
||||||
|
status={message.status}
|
||||||
key={message.id}
|
key={message.id}
|
||||||
avatarUrl={message.senderAvatarUrl}
|
avatarUrl={message.senderAvatarUrl}
|
||||||
senderName={message.senderName}
|
senderName={message.senderName}
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
import { useEffect } from 'react'
|
import { useEffect } from 'react'
|
||||||
|
|
||||||
import { Conversation, Model } from '@janhq/core/lib/types'
|
import { Conversation, Model } from '@janhq/core/lib/types'
|
||||||
import { Badge, Button } from '@janhq/uikit'
|
import { Button } from '@janhq/uikit'
|
||||||
import { motion as m } from 'framer-motion'
|
import { motion as m } from 'framer-motion'
|
||||||
import { useAtomValue, useSetAtom } from 'jotai'
|
import { useAtomValue, useSetAtom } from 'jotai'
|
||||||
|
|
||||||
@ -96,9 +96,7 @@ export default function HistoryList() {
|
|||||||
{convo.updatedAt &&
|
{convo.updatedAt &&
|
||||||
displayDate(new Date(convo.updatedAt).getTime())}
|
displayDate(new Date(convo.updatedAt).getTime())}
|
||||||
</p>
|
</p>
|
||||||
<span className="line-clamp-1">
|
<h2 className="line-clamp-1">{convo.summary ?? convo.name}</h2>
|
||||||
{convo.summary ?? convo.name}
|
|
||||||
</span>
|
|
||||||
<p className="mt-1 line-clamp-2 text-xs">
|
<p className="mt-1 line-clamp-2 text-xs">
|
||||||
{convo?.lastMessage ?? 'No new message'}
|
{convo?.lastMessage ?? 'No new message'}
|
||||||
</p>
|
</p>
|
||||||
|
|||||||
@ -1,51 +1,58 @@
|
|||||||
|
/* eslint-disable @typescript-eslint/no-unused-vars */
|
||||||
import React, { Fragment } from 'react'
|
import React, { Fragment } from 'react'
|
||||||
|
|
||||||
import hljs from 'highlight.js'
|
import hljs from 'highlight.js'
|
||||||
|
|
||||||
|
import { atom, useAtom } from 'jotai'
|
||||||
import { Marked } from 'marked'
|
import { Marked } from 'marked'
|
||||||
|
|
||||||
import { markedHighlight } from 'marked-highlight'
|
import { markedHighlight } from 'marked-highlight'
|
||||||
|
|
||||||
import { twMerge } from 'tailwind-merge'
|
import { twMerge } from 'tailwind-merge'
|
||||||
|
|
||||||
|
// import Typewriter from 'typewriter-effect'
|
||||||
|
|
||||||
import LogoMark from '@/containers/Brand/Logo/Mark'
|
import LogoMark from '@/containers/Brand/Logo/Mark'
|
||||||
|
|
||||||
|
import BubbleLoader from '@/containers/Loader/Bubble'
|
||||||
|
|
||||||
import { displayDate } from '@/utils/datetime'
|
import { displayDate } from '@/utils/datetime'
|
||||||
|
|
||||||
import LoadingIndicator from '../../../components/LoadingIndicator'
|
import { MessageSenderType, MessageStatus } from '@/models/ChatMessage'
|
||||||
|
|
||||||
import { MessageSenderType } from '@/models/ChatMessage'
|
// export const currentStreamingMessageAtom = atom<ChatMessage | undefined>(
|
||||||
|
// undefined
|
||||||
|
// )
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
avatarUrl: string
|
avatarUrl: string
|
||||||
senderName: string
|
senderName: string
|
||||||
createdAt: number
|
createdAt: number
|
||||||
senderType: MessageSenderType
|
senderType: MessageSenderType
|
||||||
|
status: MessageStatus
|
||||||
text?: string
|
text?: string
|
||||||
}
|
}
|
||||||
|
|
||||||
const marked = new Marked(
|
const marked = new Marked(
|
||||||
// markedHighlight({
|
|
||||||
// langPrefix: 'hljs',
|
|
||||||
// highlight(code, lang) {
|
|
||||||
// if (lang === undefined || lang === '') {
|
|
||||||
// return hljs.highlightAuto(code).value
|
|
||||||
// }
|
|
||||||
// return hljs.highlight(code, { language: lang }).value
|
|
||||||
// },
|
|
||||||
// }),
|
|
||||||
markedHighlight({
|
markedHighlight({
|
||||||
langPrefix: 'hljs language-',
|
langPrefix: 'hljs',
|
||||||
highlight(code, lang) {
|
highlight(code, lang) {
|
||||||
const language = hljs.getLanguage(lang) ? lang : 'plaintext'
|
if (lang === undefined || lang === '') {
|
||||||
return hljs.highlight(code, { language }).value
|
return hljs.highlightAuto(code).value
|
||||||
|
}
|
||||||
|
return hljs.highlight(code, { language: lang }).value
|
||||||
},
|
},
|
||||||
}),
|
}),
|
||||||
{
|
{
|
||||||
renderer: {
|
renderer: {
|
||||||
code(code, lang, escaped) {
|
code(code, lang, escaped) {
|
||||||
return `<pre class="hljs"><code class="language-${encodeURIComponent(
|
// Make a copy paste
|
||||||
lang ?? ''
|
return `
|
||||||
)}">${escaped ? code : encodeURIComponent(code)}</code></pre>`
|
<pre class="hljs">
|
||||||
|
<code class="language-${encodeURIComponent(lang ?? '')}">${
|
||||||
|
escaped ? code : encodeURIComponent(code)
|
||||||
|
}</code>
|
||||||
|
</pre>`
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
@ -55,13 +62,14 @@ const SimpleTextMessage: React.FC<Props> = ({
|
|||||||
senderName,
|
senderName,
|
||||||
senderType,
|
senderType,
|
||||||
createdAt,
|
createdAt,
|
||||||
|
status,
|
||||||
text = '',
|
text = '',
|
||||||
}) => {
|
}) => {
|
||||||
const parsedText = marked.parse(text)
|
const parsedText = marked.parse(text)
|
||||||
const isUser = senderType === 'user'
|
const isUser = senderType === 'user'
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="mx-auto flex w-full flex-col items-start gap-1 rounded-xl px-4 lg:w-3/4">
|
<div className="mx-auto rounded-xl px-4 lg:w-3/4">
|
||||||
<div
|
<div
|
||||||
className={twMerge(
|
className={twMerge(
|
||||||
'mb-1 flex items-center justify-start gap-2',
|
'mb-1 flex items-center justify-start gap-2',
|
||||||
@ -73,9 +81,9 @@ const SimpleTextMessage: React.FC<Props> = ({
|
|||||||
<p className="text-xs font-medium">{displayDate(createdAt)}</p>
|
<p className="text-xs font-medium">{displayDate(createdAt)}</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="w-full">
|
<div className={twMerge('w-full')}>
|
||||||
{text === '' ? (
|
{text === '' ? (
|
||||||
<LoadingIndicator />
|
<BubbleLoader />
|
||||||
) : (
|
) : (
|
||||||
<>
|
<>
|
||||||
<span
|
<span
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
import { Fragment, useEffect } from 'react'
|
import { Fragment, useEffect } from 'react'
|
||||||
|
|
||||||
import { Model } from '@janhq/core/lib/types'
|
import { Model } from '@janhq/core/lib/types'
|
||||||
import { ScrollArea, Input, Button, Badge } from '@janhq/uikit'
|
import { Input, Button, Badge } from '@janhq/uikit'
|
||||||
|
|
||||||
import { useAtom, useAtomValue } from 'jotai'
|
import { useAtom, useAtomValue } from 'jotai'
|
||||||
import { Trash2Icon } from 'lucide-react'
|
import { Trash2Icon } from 'lucide-react'
|
||||||
@ -90,18 +90,14 @@ const ChatScreen = () => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
console.log(currentConvo)
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex h-full">
|
<div className="flex h-full">
|
||||||
<div className="flex h-full w-64 flex-shrink-0 flex-col border-r border-border">
|
<div className="flex h-full w-64 flex-shrink-0 flex-col overflow-y-auto border-r border-border">
|
||||||
<ScrollArea className="h-full w-full">
|
<HistoryList />
|
||||||
<HistoryList />
|
|
||||||
</ScrollArea>
|
|
||||||
</div>
|
</div>
|
||||||
<div className="relative flex h-full w-full flex-col bg-muted/10">
|
<div className="relative flex h-full w-[calc(100%-256px)] flex-col bg-muted/10">
|
||||||
<div className="flex h-full w-full flex-col justify-between">
|
<div className="flex h-full w-full flex-col justify-between">
|
||||||
{isEnableChat && (
|
{isEnableChat && currentConvo && (
|
||||||
<div className="h-[53px] flex-shrink-0 border-b border-border bg-background p-4">
|
<div className="h-[53px] flex-shrink-0 border-b border-border bg-background p-4">
|
||||||
<div className="flex items-center justify-between">
|
<div className="flex items-center justify-between">
|
||||||
<span>{currentConvo?.name ?? ''}</span>
|
<span>{currentConvo?.name ?? ''}</span>
|
||||||
@ -135,7 +131,7 @@ const ChatScreen = () => {
|
|||||||
)}
|
)}
|
||||||
|
|
||||||
{isEnableChat ? (
|
{isEnableChat ? (
|
||||||
<div className="flex h-full w-full overflow-x-auto">
|
<div className="flex h-full w-full overflow-y-auto overflow-x-hidden">
|
||||||
<ChatBody />
|
<ChatBody />
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
@ -165,7 +161,7 @@ const ChatScreen = () => {
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
<div className="flex w-full flex-shrink-0 items-center justify-center space-x-4 p-4">
|
<div className="mx-auto flex w-full flex-shrink-0 items-center justify-center space-x-4 p-4 lg:w-3/4">
|
||||||
<Input
|
<Input
|
||||||
type="text"
|
type="text"
|
||||||
className="h-10"
|
className="h-10"
|
||||||
|
|||||||
@ -10,7 +10,9 @@ export default function ExploreModelList(props: Props) {
|
|||||||
const { models } = props
|
const { models } = props
|
||||||
return (
|
return (
|
||||||
<div className="relative h-full w-full flex-shrink-0">
|
<div className="relative h-full w-full flex-shrink-0">
|
||||||
{models?.map((item, i) => <ExploreModelItem key={i} model={item} />)}
|
{models?.map((item, i) => (
|
||||||
|
<ExploreModelItem key={item._id} model={item} />
|
||||||
|
))}
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@ -53,7 +53,6 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.hljs {
|
.hljs {
|
||||||
display: block;
|
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
background: #2b2b2b;
|
background: #2b2b2b;
|
||||||
color: #f8f8f2;
|
color: #f8f8f2;
|
||||||
@ -62,7 +61,6 @@
|
|||||||
border-radius: 0.4rem;
|
border-radius: 0.4rem;
|
||||||
margin-top: 1rem;
|
margin-top: 1rem;
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
white-space: pre-wrap;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.hljs-emphasis {
|
.hljs-emphasis {
|
||||||
|
|||||||
@ -70,3 +70,67 @@
|
|||||||
-webkit-animation: loaderDot 3s 500ms infinite ease-in-out;
|
-webkit-animation: loaderDot 3s 500ms infinite ease-in-out;
|
||||||
animation: loaderDot 3s 500ms infinite ease-in-out;
|
animation: loaderDot 3s 500ms infinite ease-in-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.bubble-loader {
|
||||||
|
position: relative;
|
||||||
|
margin-top: 8px;
|
||||||
|
height: 32px;
|
||||||
|
@apply bg-secondary;
|
||||||
|
border-radius: 20px;
|
||||||
|
width: 56px;
|
||||||
|
display: inline-flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bubble-loader span {
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: inline-block;
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
margin-left: -4px;
|
||||||
|
animation: 3s infinite linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bubble-loader span:nth-child(1) {
|
||||||
|
@apply bg-secondary-foreground/50;
|
||||||
|
animation: DotLeft 1.5s infinite linear;
|
||||||
|
}
|
||||||
|
.bubble-loader span:nth-child(2) {
|
||||||
|
@apply bg-secondary-foreground/50;
|
||||||
|
z-index: 100;
|
||||||
|
}
|
||||||
|
.bubble-loader span:nth-child(3) {
|
||||||
|
@apply bg-secondary-foreground/50;
|
||||||
|
animation: DotRight 1.5s infinite linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes DotRight {
|
||||||
|
0% {
|
||||||
|
-webkit-transform: translateX(14px);
|
||||||
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
-webkit-transform: translateX(-14px);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
-webkit-transform: translateX(14px);
|
||||||
|
z-index: 200;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes DotLeft {
|
||||||
|
0% {
|
||||||
|
-webkit-transform: translateX(-14px);
|
||||||
|
z-index: 200;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
-webkit-transform: translateX(14px);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
-webkit-transform: translateX(-14px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@ -6,3 +6,37 @@
|
|||||||
}
|
}
|
||||||
@apply text-muted-foreground;
|
@apply text-muted-foreground;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// .typewriter * {
|
||||||
|
// color: #fff;
|
||||||
|
// font-family: monospace;
|
||||||
|
// overflow: hidden; /* Ensures the content is not revealed until the animation */
|
||||||
|
// border-right: 0.15em solid orange; /* The typwriter cursor */
|
||||||
|
// white-space: nowrap; /* Keeps the content on a single line */
|
||||||
|
// margin: 0 auto; /* Gives that scrolling effect as the typing happens */
|
||||||
|
// letter-spacing: 0.15em; /* Adjust as needed */
|
||||||
|
// animation:
|
||||||
|
// typing 3.5s steps(30, end),
|
||||||
|
// blink-caret 0.5s step-end infinite;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// /* The typing effect */
|
||||||
|
// @keyframes typing {
|
||||||
|
// from {
|
||||||
|
// width: 0;
|
||||||
|
// }
|
||||||
|
// to {
|
||||||
|
// width: 100%;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
|
// /* The typewriter cursor effect */
|
||||||
|
// @keyframes blink-caret {
|
||||||
|
// from,
|
||||||
|
// to {
|
||||||
|
// border-color: transparent;
|
||||||
|
// }
|
||||||
|
// 50% {
|
||||||
|
// border-color: orange;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user