Merge branch 'main' into fix508

2023-11-28 15:04:05 +08:00 · 2023-11-28 15:04:05 +08:00 · 64daa31aa6
commit 64daa31aa6
parent 9c30b1ce4f 0ffc81e0f8
13 changed files with 149 additions and 136 deletions
--- a/plugins/inference-plugin/nitro/version.txt
+++ b/plugins/inference-plugin/nitro/version.txt
@ -1 +1 @@
-0.1.11
+0.1.17
--- a/plugins/inference-plugin/src/module.ts
+++ b/plugins/inference-plugin/src/module.ts
@ -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 };
      })
  );
 }
--- a/web/containers/Layout/Ribbon/index.tsx
+++ b/web/containers/Layout/Ribbon/index.tsx
@ -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" />,
--- a/web/containers/Layout/TopBar/CommandSearch/index.tsx
+++ b/web/containers/Layout/TopBar/CommandSearch/index.tsx
@ -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" />,
--- a/web/hooks/useActiveModel.ts
+++ b/web/hooks/useActiveModel.ts
@ -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 ${
--- a/web/hooks/useSendChatMessage.ts
+++ b/web/hooks/useSendChatMessage.ts
@ -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 &&
--- a/web/screens/Chat/ChatBody/index.tsx
+++ b/web/screens/Chat/ChatBody/index.tsx
@ -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>
  )
 }
--- a/web/screens/Chat/ChatInstruction/index.tsx
+++ b/web/screens/Chat/ChatInstruction/index.tsx
@ -35,14 +35,16 @@ const ChatInstruction = () => {
        What does this Assistant do? How does it behave? What should it avoid
        doing?
      </p>
-      {!isSettingInstruction && (
-        <Button
-          themes={'outline'}
-          className="w-32"
-          onClick={() => setIsSettingInstruction(true)}
-        >
-          Give Instruction
-        </Button>
+      {!isSettingInstruction && activeConvoId && (
+        <>
+          <Button
+            themes={'outline'}
+            className="w-32"
+            onClick={() => setIsSettingInstruction(true)}
+          >
+            Give Instruction
+          </Button>
+        </>
      )}
      {isSettingInstruction && (
        <div className="space-y-4">
--- a/web/screens/Chat/ChatItem/index.tsx
+++ b/web/screens/Chat/ChatItem/index.tsx
@ -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>
 ))
--- a/web/screens/Chat/HistoryList/index.tsx
+++ b/web/screens/Chat/HistoryList/index.tsx
@ -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)
    }
--- a/web/screens/Chat/MessageToolbar/index.tsx
+++ b/web/screens/Chat/MessageToolbar/index.tsx
@ -35,63 +35,69 @@ const MessageToolbar = ({ message }: { message: ThreadMessage }) => {
  }
  return (
    <div className="flex flex-row items-center">
-      {message.status === MessageStatus.Pending && (
-        <StopCircle
-          className="mx-1 cursor-pointer rounded-sm bg-gray-800 px-[3px]"
-          size={20}
-          onClick={() => stopInference()}
-        />
-      )}
-      {message.status !== MessageStatus.Pending &&
-        message.id === messages[0]?.id && (
-          <RefreshCcw
-            className="mx-1 cursor-pointer rounded-sm bg-gray-800 px-[3px]"
-            size={20}
-            onClick={() => {
-              const messageRequest: MessageRequest = {
-                id: message.id ?? '',
-                messages: messages
-                  .slice(1, messages.length)
-                  .reverse()
-                  .map((e) => {
-                    return {
-                      content: e.content,
-                      role: e.role,
-                    } as ChatCompletionMessage
-                  }),
-                threadId: message.threadId ?? '',
-              }
-              if (message.role === ChatCompletionRole.Assistant) {
-                deleteAMessage(message.id ?? '')
-              }
-              events.emit(EventName.OnNewMessageRequest, messageRequest)
-            }}
-          />
+      <div className="flex overflow-hidden rounded-md border border-border bg-background/20">
+        {message.status === MessageStatus.Pending && (
+          <div
+            className="cursor-pointer border-r border-border px-2 py-2 hover:bg-background/80"
+            onClick={() => stopInference()}
+          >
+            <StopCircle size={14} />
+          </div>
        )}
-      <ClipboardCopy
-        className="mx-1 cursor-pointer rounded-sm bg-gray-800 px-[3px]"
-        size={20}
-        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}
-        onClick={async () => {
-          deleteAMessage(message.id ?? '')
-          if (thread)
-            await pluginManager
-              .get<ConversationalPlugin>(PluginType.Conversational)
-              ?.saveConversation({
-                ...thread,
-                messages: messages.filter((e) => e.id !== message.id),
-              })
-        }}
-      />
+        {message.status !== MessageStatus.Pending &&
+          message.id === messages[0]?.id && (
+            <div
+              className="cursor-pointer border-r border-border px-2 py-2 hover:bg-background/80"
+              onClick={() => {
+                const messageRequest: MessageRequest = {
+                  id: message.id ?? '',
+                  messages: messages
+                    .slice(1, messages.length)
+                    .reverse()
+                    .map((e) => {
+                      return {
+                        content: e.content,
+                        role: e.role,
+                      } as ChatCompletionMessage
+                    }),
+                  threadId: message.threadId ?? '',
+                }
+                if (message.role === ChatCompletionRole.Assistant) {
+                  deleteAMessage(message.id ?? '')
+                }
+                events.emit(EventName.OnNewMessageRequest, messageRequest)
+              }}
+            >
+              <RefreshCcw size={14} />
+            </div>
+          )}
+        <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',
+            })
+          }}
+        >
+          <ClipboardCopy size={14} />
+        </div>
+        <div
+          className="cursor-pointer px-2 py-2 hover:bg-background/80"
+          onClick={async () => {
+            deleteAMessage(message.id ?? '')
+            if (thread)
+              await pluginManager
+                .get<ConversationalPlugin>(PluginType.Conversational)
+                ?.saveConversation({
+                  ...thread,
+                  messages: messages.filter((e) => e.id !== message.id),
+                })
+          }}
+        >
+          <Trash2Icon size={14} />
+        </div>
+      </div>
    </div>
  )
 }
--- a/web/screens/Chat/SimpleTextMessage/index.tsx
+++ b/web/screens/Chat/SimpleTextMessage/index.tsx
@ -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">
-            <MessageToolbar message={props} />
-          </div>
-        )}
+        <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,12 +119,11 @@ const SimpleTextMessage: React.FC<ThreadMessage> = (props) => {
          </>
        )}
      </div>
-      {experimentalFeatureEnabed &&
-        (props.status === MessageStatus.Pending || tokenSpeed > 0) && (
-          <p className="mt-1 text-xs font-medium text-white">
-            Token Speed: {Number(tokenSpeed).toFixed(2)}/s
-          </p>
-        )}
+      {(props.status === MessageStatus.Pending || tokenSpeed > 0) && (
+        <p className="mt-2 text-xs font-medium text-foreground">
+          Token Speed: {Number(tokenSpeed).toFixed(2)}/s
+        </p>
+      )}
    </div>
  )
 }
--- a/web/screens/Chat/index.tsx
+++ b/web/screens/Chat/index.tsx
@ -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()}
-                    />
-                  }
+                  <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
 @ -1 +1 @@
 .1.11
 .1.17