Add loader buble chat
This commit is contained in:
Faisal Amir
parent
ac1c7018d8
commit
b752595554
@ -12,7 +12,7 @@
|
||||
}
|
||||
|
||||
&-outline {
|
||||
@apply border-input hover:bg-primary hover:text-primary-foreground border bg-transparent;
|
||||
@apply border-input border bg-transparent;
|
||||
}
|
||||
|
||||
&-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 { useAtomValue } from 'jotai'
|
||||
|
||||
import ProgressBar from '@/components/ProgressBar'
|
||||
|
||||
import DownloadingState from '@/containers/Layout/BottomBar/DownloadingState'
|
||||
|
||||
import SystemItem from '@/containers/Layout/BottomBar/SystemItem'
|
||||
import ProgressBar from '@/containers/ProgressBar'
|
||||
|
||||
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 && (
|
||||
<FeatureToggleWrapper>
|
||||
<EventListenerWrapper>
|
||||
<TooltipProvider>
|
||||
<ModalWrapper>{children}</ModalWrapper>
|
||||
</TooltipProvider>
|
||||
<TooltipProvider>{children}</TooltipProvider>
|
||||
</EventListenerWrapper>
|
||||
<Toaster position="top-right" />
|
||||
</FeatureToggleWrapper>
|
||||
|
||||
@ -1,7 +1,5 @@
|
||||
import { atom } from 'jotai'
|
||||
|
||||
import { SwitchingModelConfirmationModalProps } from '@/components/SwitchingModelConfirmationModal'
|
||||
|
||||
export const showConfirmDeleteConversationModalAtom = atom(false)
|
||||
export const showConfirmSignOutModalAtom = 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 showingCancelDownloadModalAtom = atom<boolean>(false)
|
||||
|
||||
export const switchingModelConfirmationModalPropsAtom = atom<
|
||||
SwitchingModelConfirmationModalProps | undefined
|
||||
>(undefined)
|
||||
export const showingModalNoActiveModel = atom<boolean>(false)
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
/* eslint-disable @typescript-eslint/naming-convention */
|
||||
import { NewMessageResponse } from '@janhq/core'
|
||||
import { Message } from '@janhq/core/lib/types'
|
||||
|
||||
export enum MessageType {
|
||||
Text = 'Text',
|
||||
Image = 'Image',
|
||||
@ -78,6 +79,6 @@ export const toChatMessage = (
|
||||
text: content,
|
||||
imageUrls: imageUrls,
|
||||
createdAt: createdAt,
|
||||
status: MessageStatus.Ready,
|
||||
status: m.message === '' ? MessageStatus.Pending : MessageStatus.Ready,
|
||||
}
|
||||
}
|
||||
|
||||
@ -38,6 +38,7 @@
|
||||
"tailwind-merge": "^2.0.0",
|
||||
"tailwindcss": "3.3.5",
|
||||
"typescript": "5.2.2",
|
||||
"typewriter-effect": "^2.21.0",
|
||||
"uuid": "^9.0.1",
|
||||
"zod": "^3.22.4"
|
||||
},
|
||||
|
||||
@ -12,6 +12,7 @@ const ChatItem = forwardRef<Ref, Props>(({ message }, ref) => {
|
||||
return (
|
||||
<div ref={ref} className="py-4 even:bg-secondary dark:even:bg-secondary/20">
|
||||
<SimpleTextMessage
|
||||
status={message.status}
|
||||
key={message.id}
|
||||
avatarUrl={message.senderAvatarUrl}
|
||||
senderName={message.senderName}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { useEffect } from 'react'
|
||||
|
||||
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 { useAtomValue, useSetAtom } from 'jotai'
|
||||
|
||||
@ -96,9 +96,7 @@ export default function HistoryList() {
|
||||
{convo.updatedAt &&
|
||||
displayDate(new Date(convo.updatedAt).getTime())}
|
||||
</p>
|
||||
<span className="line-clamp-1">
|
||||
{convo.summary ?? convo.name}
|
||||
</span>
|
||||
<h2 className="line-clamp-1">{convo.summary ?? convo.name}</h2>
|
||||
<p className="mt-1 line-clamp-2 text-xs">
|
||||
{convo?.lastMessage ?? 'No new message'}
|
||||
</p>
|
||||
|
||||
@ -1,51 +1,58 @@
|
||||
/* eslint-disable @typescript-eslint/no-unused-vars */
|
||||
import React, { Fragment } from 'react'
|
||||
|
||||
import hljs from 'highlight.js'
|
||||
|
||||
import { atom, useAtom } from 'jotai'
|
||||
import { Marked } from 'marked'
|
||||
|
||||
import { markedHighlight } from 'marked-highlight'
|
||||
|
||||
import { twMerge } from 'tailwind-merge'
|
||||
|
||||
// import Typewriter from 'typewriter-effect'
|
||||
|
||||
import LogoMark from '@/containers/Brand/Logo/Mark'
|
||||
|
||||
import BubbleLoader from '@/containers/Loader/Bubble'
|
||||
|
||||
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 = {
|
||||
avatarUrl: string
|
||||
senderName: string
|
||||
createdAt: number
|
||||
senderType: MessageSenderType
|
||||
status: MessageStatus
|
||||
text?: string
|
||||
}
|
||||
|
||||
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({
|
||||
langPrefix: 'hljs language-',
|
||||
langPrefix: 'hljs',
|
||||
highlight(code, lang) {
|
||||
const language = hljs.getLanguage(lang) ? lang : 'plaintext'
|
||||
return hljs.highlight(code, { language }).value
|
||||
if (lang === undefined || lang === '') {
|
||||
return hljs.highlightAuto(code).value
|
||||
}
|
||||
return hljs.highlight(code, { language: lang }).value
|
||||
},
|
||||
}),
|
||||
{
|
||||
renderer: {
|
||||
code(code, lang, escaped) {
|
||||
return `<pre class="hljs"><code class="language-${encodeURIComponent(
|
||||
lang ?? ''
|
||||
)}">${escaped ? code : encodeURIComponent(code)}</code></pre>`
|
||||
// Make a copy paste
|
||||
return `
|
||||
<pre class="hljs">
|
||||
<code class="language-${encodeURIComponent(lang ?? '')}">${
|
||||
escaped ? code : encodeURIComponent(code)
|
||||
}</code>
|
||||
</pre>`
|
||||
},
|
||||
},
|
||||
}
|
||||
@ -55,13 +62,14 @@ const SimpleTextMessage: React.FC<Props> = ({
|
||||
senderName,
|
||||
senderType,
|
||||
createdAt,
|
||||
status,
|
||||
text = '',
|
||||
}) => {
|
||||
const parsedText = marked.parse(text)
|
||||
const isUser = senderType === 'user'
|
||||
|
||||
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
|
||||
className={twMerge(
|
||||
'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>
|
||||
</div>
|
||||
|
||||
<div className="w-full">
|
||||
<div className={twMerge('w-full')}>
|
||||
{text === '' ? (
|
||||
<LoadingIndicator />
|
||||
<BubbleLoader />
|
||||
) : (
|
||||
<>
|
||||
<span
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { Fragment, useEffect } from 'react'
|
||||
|
||||
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 { Trash2Icon } from 'lucide-react'
|
||||
@ -90,18 +90,14 @@ const ChatScreen = () => {
|
||||
}
|
||||
}
|
||||
|
||||
console.log(currentConvo)
|
||||
|
||||
return (
|
||||
<div className="flex h-full">
|
||||
<div className="flex h-full w-64 flex-shrink-0 flex-col border-r border-border">
|
||||
<ScrollArea className="h-full w-full">
|
||||
<HistoryList />
|
||||
</ScrollArea>
|
||||
<div className="flex h-full w-64 flex-shrink-0 flex-col overflow-y-auto border-r border-border">
|
||||
<HistoryList />
|
||||
</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">
|
||||
{isEnableChat && (
|
||||
{isEnableChat && currentConvo && (
|
||||
<div className="h-[53px] flex-shrink-0 border-b border-border bg-background p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<span>{currentConvo?.name ?? ''}</span>
|
||||
@ -135,7 +131,7 @@ const ChatScreen = () => {
|
||||
)}
|
||||
|
||||
{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 />
|
||||
</div>
|
||||
) : (
|
||||
@ -165,7 +161,7 @@ const ChatScreen = () => {
|
||||
)}
|
||||
</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
|
||||
type="text"
|
||||
className="h-10"
|
||||
|
||||
@ -10,7 +10,9 @@ export default function ExploreModelList(props: Props) {
|
||||
const { models } = props
|
||||
return (
|
||||
<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>
|
||||
)
|
||||
}
|
||||
|
||||
@ -53,7 +53,6 @@
|
||||
}
|
||||
|
||||
.hljs {
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
background: #2b2b2b;
|
||||
color: #f8f8f2;
|
||||
@ -62,7 +61,6 @@
|
||||
border-radius: 0.4rem;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.hljs-emphasis {
|
||||
|
||||
@ -70,3 +70,67 @@
|
||||
-webkit-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;
|
||||
}
|
||||
|
||||
// .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