Nicholai/jan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'main' into fix508

Browse Source
This commit is contained in:
0xSage 2023-11-28 15:04:05 +08:00 committed by GitHub
commit 64daa31aa6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 149 additions and 136 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
plugins/inference-plugin/nitro/version.txt
View File

@ -1 +1 @@
0.1.11
0.1.17

3
plugins/inference-plugin/src/module.ts
View File

@ -25,6 +25,7 @@ let currentModelFile = null;
*/
interface InitModelResponse {
error?: any;
modelFile?: string;
}
/**
@ -51,7 +52,7 @@ function initModel(modelFile: string): Promise<InitModelResponse> {
.then(validateModelStatus)
.catch((err) => {
log.error("error: " + JSON.stringify(err));
return { error: err };
return { error: err, modelFile };
})
);
}

5
web/containers/Layout/Ribbon/index.tsx
View File

@ -20,15 +20,12 @@ import { twMerge } from 'tailwind-merge'
import LogoMark from '@/containers/Brand/Logo/Mark'
import { FeatureToggleContext } from '@/context/FeatureToggle'
import { MainViewState } from '@/constants/screens'
import { useMainViewState } from '@/hooks/useMainViewState'
export default function RibbonNav() {
const { mainViewState, setMainViewState } = useMainViewState()
const { experimentalFeatureEnabed } = useContext(FeatureToggleContext)
const onMenuClick = (state: MainViewState) => {
if (mainViewState === state) return
@ -49,8 +46,6 @@ export default function RibbonNav() {
]
const secondaryMenus = [
// Add menu if experimental feature
...(experimentalFeatureEnabed ? [] : []),
{
name: 'Explore Models',
icon: <CpuIcon size={20} className="flex-shrink-0" />,

3
web/containers/Layout/TopBar/CommandSearch/index.tsx
View File

@ -28,7 +28,6 @@ import { MainViewState } from '@/constants/screens'
import { useMainViewState } from '@/hooks/useMainViewState'
export default function CommandSearch() {
const { experimentalFeatureEnabed } = useContext(FeatureToggleContext)
const { setMainViewState } = useMainViewState()
const menus = [
@ -44,8 +43,6 @@ export default function CommandSearch() {
),
state: MainViewState.Chat,
},
// Added experimental feature here
...(experimentalFeatureEnabed ? [] : []),
{
name: 'Explore Models',
icon: <CpuIcon size={16} className="mr-3 text-muted-foreground" />,

5
web/hooks/useActiveModel.ts
View File

@ -31,6 +31,8 @@ export function useActiveModel() {
return
}
setActiveModel(undefined)
setStateModel({ state: 'start', loading: true, model: modelId })
const model = downloadedModels.find((e) => e.id === modelId)
@ -52,7 +54,7 @@ export function useActiveModel() {
console.debug('Init model: ', modelId)
const path = join('models', model.name, modelId)
const res = await initModel(path)
if (res?.error && (!activeModel?.id || modelId === activeModel?.id)) {
if (res && res.error && res.modelFile === stateModel.model) {
const errorMessage = `${res.error}`
alert(errorMessage)
setStateModel(() => ({
@ -60,7 +62,6 @@ export function useActiveModel() {
loading: false,
model: modelId,
}))
setActiveModel(undefined)
} else {
console.debug(
`Init model ${modelId} successfully!, take ${

1
web/hooks/useSendChatMessage.ts
View File

@ -59,6 +59,7 @@ export default function useSendChatMessage() {
...newMessage,
messages: newMessage.messages?.slice(0, -1).concat([summaryMsg]),
})
.catch(console.error)
if (
currentConvo &&
currentConvo.id === newMessage.threadId &&

9
web/screens/Chat/ChatBody/index.tsx
View File

@ -1,9 +1,5 @@
import { useContext } from 'react'
import { useAtomValue } from 'jotai'
import { FeatureToggleContext } from '@/context/FeatureToggle'
import ChatInstruction from '../ChatInstruction'
import ChatItem from '../ChatItem'
@ -11,15 +7,12 @@ import { getCurrentChatMessagesAtom } from '@/helpers/atoms/ChatMessage.atom'
const ChatBody: React.FC = () => {
const messages = useAtomValue(getCurrentChatMessagesAtom)
const { experimentalFeatureEnabed } = useContext(FeatureToggleContext)
return (
<div className="flex h-full w-full flex-col-reverse overflow-y-auto">
{messages.map((message) => (
<ChatItem {...message} key={message.id} />
))}
{experimentalFeatureEnabed && messages.length === 0 && (
<ChatInstruction />
)}
{messages.length === 0 && <ChatInstruction />}
</div>
)
}

4
web/screens/Chat/ChatInstruction/index.tsx
View File

@ -35,7 +35,8 @@ const ChatInstruction = () => {
What does this Assistant do? How does it behave? What should it avoid
doing?
</p>
{!isSettingInstruction && (
{!isSettingInstruction && activeConvoId && (
<>
<Button
themes={'outline'}
className="w-32"
@ -43,6 +44,7 @@ const ChatInstruction = () => {
>
Give Instruction
</Button>
</>
)}
{isSettingInstruction && (
<div className="space-y-4">

5
web/screens/Chat/ChatItem/index.tsx
View File

@ -7,7 +7,10 @@ import SimpleTextMessage from '../SimpleTextMessage'
type Ref = HTMLDivElement
const ChatItem = forwardRef<Ref, ThreadMessage>((message, ref) => (
<div ref={ref} className="py-4 even:bg-secondary dark:even:bg-secondary/20">
<div
ref={ref}
className="relative py-4 first:pb-14 even:bg-secondary dark:even:bg-secondary/20"
>
<SimpleTextMessage {...message} />
</div>
))

12
web/screens/Chat/HistoryList/index.tsx
View File

@ -11,7 +11,6 @@ import { twMerge } from 'tailwind-merge'
import { useActiveModel } from '@/hooks/useActiveModel'
import { useCreateConversation } from '@/hooks/useCreateConversation'
import { useGetDownloadedModels } from '@/hooks/useGetDownloadedModels'
import useGetUserConversations from '@/hooks/useGetUserConversations'
import { displayDate } from '@/utils/datetime'
@ -27,11 +26,10 @@ export default function HistoryList() {
const conversations = useAtomValue(userConversationsAtom)
const threadStates = useAtomValue(conversationStatesAtom)
const { getUserConversations } = useGetUserConversations()
const { activeModel, startModel } = useActiveModel()
const { activeModel } = useActiveModel()
const { requestCreateConvo } = useCreateConversation()
const activeConvoId = useAtomValue(getActiveConvoIdAtom)
const setActiveConvoId = useSetAtom(setActiveConvoIdAtom)
const { downloadedModels } = useGetDownloadedModels()
useEffect(() => {
getUserConversations()
@ -48,14 +46,6 @@ export default function HistoryList() {
console.debug('modelId is undefined')
return
}
const model = downloadedModels.find((e) => e.id === convo.modelId)
if (convo == null) {
console.debug('modelId is undefined')
return
}
if (model != null) {
startModel(model.id)
}
if (activeConvoId !== convo.id) {
setActiveConvoId(convo.id)
}

38
web/screens/Chat/MessageToolbar/index.tsx
View File

@ -35,18 +35,19 @@ const MessageToolbar = ({ message }: { message: ThreadMessage }) => {
}
return (
<div className="flex flex-row items-center">
<div className="flex overflow-hidden rounded-md border border-border bg-background/20">
{message.status === MessageStatus.Pending && (
<StopCircle
className="mx-1 cursor-pointer rounded-sm bg-gray-800 px-[3px]"
size={20}
<div
className="cursor-pointer border-r border-border px-2 py-2 hover:bg-background/80"
onClick={() => stopInference()}
/>
>
<StopCircle size={14} />
</div>
)}
{message.status !== MessageStatus.Pending &&
message.id === messages[0]?.id && (
<RefreshCcw
className="mx-1 cursor-pointer rounded-sm bg-gray-800 px-[3px]"
size={20}
<div
className="cursor-pointer border-r border-border px-2 py-2 hover:bg-background/80"
onClick={() => {
const messageRequest: MessageRequest = {
id: message.id ?? '',
@ -66,21 +67,23 @@ const MessageToolbar = ({ message }: { message: ThreadMessage }) => {
}
events.emit(EventName.OnNewMessageRequest, messageRequest)
}}
/>
>
<RefreshCcw size={14} />
</div>
)}
<ClipboardCopy
className="mx-1 cursor-pointer rounded-sm bg-gray-800 px-[3px]"
size={20}
<div
className="cursor-pointer border-r border-border px-2 py-2 hover:bg-background/80"
onClick={() => {
navigator.clipboard.writeText(message.content ?? '')
toaster({
title: 'Copied to clipboard',
})
}}
/>
<Trash2Icon
className="mx-1 cursor-pointer rounded-sm bg-gray-800 px-[3px]"
size={20}
>
<ClipboardCopy size={14} />
</div>
<div
className="cursor-pointer px-2 py-2 hover:bg-background/80"
onClick={async () => {
deleteAMessage(message.id ?? '')
if (thread)
@ -91,7 +94,10 @@ const MessageToolbar = ({ message }: { message: ThreadMessage }) => {
messages: messages.filter((e) => e.id !== message.id),
})
}}
/>
>
<Trash2Icon size={14} />
</div>
</div>
</div>
)
}

29
web/screens/Chat/SimpleTextMessage/index.tsx
View File

@ -5,6 +5,7 @@ import { ChatCompletionRole, MessageStatus, ThreadMessage } from '@janhq/core'
import hljs from 'highlight.js'
import { useAtomValue } from 'jotai'
import { Marked } from 'marked'
import { markedHighlight } from 'marked-highlight'
@ -21,6 +22,8 @@ import { displayDate } from '@/utils/datetime'
import MessageToolbar from '../MessageToolbar'
import { getCurrentChatMessagesAtom } from '@/helpers/atoms/ChatMessage.atom'
const marked = new Marked(
markedHighlight({
langPrefix: 'hljs',
@ -47,7 +50,6 @@ const marked = new Marked(
)
const SimpleTextMessage: React.FC<ThreadMessage> = (props) => {
const { experimentalFeatureEnabed } = useContext(FeatureToggleContext)
const parsedText = marked.parse(props.content ?? '')
const isUser = props.role === ChatCompletionRole.User
const isSystem = props.role === ChatCompletionRole.System
@ -55,9 +57,10 @@ const SimpleTextMessage: React.FC<ThreadMessage> = (props) => {
const [lastTimestamp, setLastTimestamp] = useState<number | undefined>()
const [tokenSpeed, setTokenSpeed] = useState(0)
const messages = useAtomValue(getCurrentChatMessagesAtom)
useEffect(() => {
if (props.status === MessageStatus.Ready || !experimentalFeatureEnabed) {
if (props.status === MessageStatus.Ready) {
return
}
const currentTimestamp = new Date().getTime() // Get current time in milliseconds
@ -73,25 +76,30 @@ const SimpleTextMessage: React.FC<ThreadMessage> = (props) => {
setTokenSpeed(averageTokenSpeed)
setTokenCount(totalTokenCount)
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [props.content])
return (
<div className="group mx-auto rounded-xl px-4 lg:w-3/4">
<div className="group relative mx-auto rounded-xl px-4 lg:w-3/4">
<div
className={twMerge(
'mb-1 flex items-center justify-start gap-2',
'mb-2 flex items-center justify-start gap-x-2',
!isUser && 'mt-2'
)}
>
{!isUser && !isSystem && <LogoMark width={20} />}
<div className="text-sm font-extrabold capitalize">{props.role}</div>
<p className="text-xs font-medium">{displayDate(props.createdAt)}</p>
{experimentalFeatureEnabed && (
<div className="hidden cursor-pointer group-hover:flex">
<div
className={twMerge(
'absolute right-0 cursor-pointer transition-all',
messages[0].id === props.id
? 'absolute -bottom-10 left-4'
: 'hidden group-hover:flex'
)}
>
<MessageToolbar message={props} />
</div>
)}
</div>
<div className={twMerge('w-full')}>
@ -111,9 +119,8 @@ const SimpleTextMessage: React.FC<ThreadMessage> = (props) => {
</>
)}
</div>
{experimentalFeatureEnabed &&
(props.status === MessageStatus.Pending || tokenSpeed > 0) && (
<p className="mt-1 text-xs font-medium text-white">
{(props.status === MessageStatus.Pending || tokenSpeed > 0) && (
<p className="mt-2 text-xs font-medium text-foreground">
Token Speed: {Number(tokenSpeed).toFixed(2)}/s
</p>
)}

45
web/screens/Chat/index.tsx
View File

@ -10,9 +10,12 @@ import { twMerge } from 'tailwind-merge'
import { currentPromptAtom } from '@/containers/Providers/Jotai'
import { FeatureToggleContext } from '@/context/FeatureToggle'
import ShortCut from '@/containers/Shortcut'
import { toaster } from '@/containers/Toast'
import { FeatureToggleContext } from '@/context/FeatureToggle'
import { MainViewState } from '@/constants/screens'
import { useActiveModel } from '@/hooks/useActiveModel'
@ -61,9 +64,13 @@ const ChatScreen = () => {
const [isModelAvailable, setIsModelAvailable] = useState(
downloadedModels.some((x) => x.id === currentConvo?.modelId)
)
const { experimentalFeatureEnabed } = useContext(FeatureToggleContext)
const textareaRef = useRef<HTMLTextAreaElement>(null)
const { startModel } = useActiveModel()
const modelRef = useRef(activeModel)
useEffect(() => {
modelRef.current = activeModel
}, [activeModel])
useEffect(() => {
getUserConversations()
@ -81,6 +88,24 @@ const ChatScreen = () => {
}, [currentConvo, downloadedModels])
const handleSendMessage = async () => {
if (!activeModel || activeModel.id !== currentConvo?.modelId) {
const model = downloadedModels.find((e) => e.id === currentConvo?.modelId)
// Model is available to start
if (model != null) {
toaster({
title: 'Message queued.',
description: 'It will be sent once the model is done loading.',
})
startModel(model.id).then(() => {
setTimeout(() => {
if (modelRef?.current?.id === currentConvo?.modelId)
sendChatMessage()
}, 300)
})
}
return
}
if (activeConversationId) {
sendChatMessage()
} else {
@ -149,20 +174,16 @@ const ChatScreen = () => {
Download Model
</Button>
)}
{experimentalFeatureEnabed && (
<Paintbrush
size={16}
className="cursor-pointer text-muted-foreground"
onClick={() => cleanConvo()}
/>
)}
{
<Trash2Icon
size={16}
className="cursor-pointer text-muted-foreground"
onClick={() => deleteConvo()}
/>
}
</div>
</div>
</div>
@ -206,11 +227,7 @@ const ChatScreen = () => {
ref={textareaRef}
onKeyDown={(e) => handleKeyDown(e)}
placeholder="Type your message ..."
disabled={
!activeModel ||
stateModel.loading ||
activeModel.id !== currentConvo?.modelId
}
disabled={stateModel.loading || !currentConvo}
value={currentPrompt}
onChange={(e) => {
handleMessageChange(e)
@ -218,8 +235,8 @@ const ChatScreen = () => {
/>
<Button
size="lg"
disabled={!activeModel || disabled || stateModel.loading}
themes={!activeModel ? 'secondary' : 'primary'}
disabled={disabled || stateModel.loading || !currentConvo}
themes={'primary'}
onClick={handleSendMessage}
>
Send