feat: Start new chat

commit b8700b59a5fe2d7520d7564383eee4b5019d6958
Author: anpigon <markan82@gmail.com>
Date:   Mon May 27 22:01:23 2024 +0900

    feat: Add useTransition hook and onStartNewChat functionality

commit a6898f2
Author: anpigon <markan82@gmail.com>
Date:   Mon May 27 21:56:15 2024 +0900

    doc: Add new translations for chatbot in en.json and ko.json

commit 20ef1f8
Author: anpigon <markan82@gmail.com>
Date:   Mon May 27 21:56:03 2024 +0900

    fix: abort errors

manifest.json

@@ -1,7 +1,7 @@
 {
 	"id": "max-chatbot",
 	"name": "MAX",
-	"version": "0.1.7",
+	"version": "0.2.0",
 	"minAppVersion": "1.5.0",
 	"description": "Generate and brainstorm ideas while creating your notes using Large Language Models (LLMs) from Ollama, LM Studio, Anthropic, OpenAI, Mistral AI, and more for Obsidian.",
 	"author": "anpigon",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "max-chatbot",
-  "version": "0.1.7",
+  "version": "0.2.0",
   "description": "Generate and brainstorm ideas while creating your notes using Large Language Models (LLMs) from Ollama, LM Studio, Anthropic, OpenAI, Mistral AI, and more for Obsidian.",
   "main": "main.js",
   "scripts": {

src/features/chatbot/chatbot.tsx

@@ -2,7 +2,7 @@ import {DEFAULT_SETTINGS} from '@/constants';
 import {useApp, usePlugin, useSettings} from '@/hooks/useApp';
 import {Notice} from 'obsidian';
 import type {ChangeEvent, KeyboardEvent} from 'react';
-import {useEffect, useRef} from 'react';
+import {useEffect, useRef, useTransition} from 'react';
 import {useTranslation} from 'react-i18next';
 import {BotMessage} from './components/bot-message';
 import {ChatBox} from './components/chat-box';
@@ -21,6 +21,7 @@ export const Chatbot: React.FC = () => {
 	const plugin = usePlugin();
 	const settings = useSettings();
 	const {t} = useTranslation('chatbot');
+	const [, startTransition] = useTransition();
 
 	const formRef = useRef<HTMLFormElement>(null);
 	const chatBoxRef = useRef<HTMLTextAreaElement>(null);
@@ -37,7 +38,7 @@ export const Chatbot: React.FC = () => {
 
 	const defaultSystemPrompt = t('You are a helpful assistant');
 
-	const {messages, isStreaming, controller, setMessage, processMessage} = useLLM({
+	const {messages, setMessages, isStreaming, controller, setMessage, processMessage} = useLLM({
 		provider: currentModel.provider,
 		model: currentModel.model,
 		systemPrompt: defaultSystemPrompt,
@@ -124,6 +125,15 @@ export const Chatbot: React.FC = () => {
 					settings.general.model = newModel;
 					plugin.saveSettings();
 				}}
+				onStartNewChat={() => {
+					controller?.abort();
+					startTransition(() => {
+						setMessages([]);
+						setMessage('');
+						resetInputForm();
+						scrollToBottom();
+					});
+				}}
 			/>
 
 			<MessageContainer ref={messageContainerRef}>

src/features/chatbot/components/chatbot-header.tsx

@@ -2,6 +2,9 @@ import {Dropdown} from '@/components/form/dropdown';
 import {LLM_PROVIDERS} from '@/constants';
 import {PropsWithChildren} from 'react';
 import {ProviderModels} from '../hooks/use-get-ai-models';
+import {Button} from './button';
+import {IconButton} from '@/components/buttons/icon-button';
+import {t} from 'i18next';
 
 interface ChatbotHeaderProps extends PropsWithChildren {
 	botName: string;
@@ -12,9 +15,10 @@ interface ChatbotHeaderProps extends PropsWithChildren {
 		model: string;
 	};
 	onChangeModel: (provider: LLM_PROVIDERS, modelName: string) => void;
+	onStartNewChat: () => void;
 }
 
-export const ChatbotHeader: React.FC<ChatbotHeaderProps> = ({botName, providers, disabled, currentModel, onChangeModel}) => {
+export const ChatbotHeader: React.FC<ChatbotHeaderProps> = ({botName, providers, disabled, currentModel, onChangeModel, onStartNewChat}) => {
 	const handleChangeModel: React.ChangeEventHandler<HTMLSelectElement> = e => {
 		const value = e.target.value;
 		if (value) {
@@ -24,7 +28,7 @@ export const ChatbotHeader: React.FC<ChatbotHeaderProps> = ({botName, providers,
 	};
 
 	return (
-		<div className="py-4 px-0 text-center *:text-interactive-accent">
+		<div className="py-4 px-0 text-center *:text-interactive-accent relative">
 			<h2 className="mt-0 mb-0 p-0 text-xl w-full">{botName}</h2>
 			<Dropdown
 				className="h-fit px-0 py-1 shadow-none hover:shadow-none text-center text-xs mr-1 pr-4"
@@ -50,6 +54,7 @@ export const ChatbotHeader: React.FC<ChatbotHeaderProps> = ({botName, providers,
 						return null;
 					})}
 			</Dropdown>
+			<IconButton className="absolute top-2 right-2" label={t('Start new chat')} icon="plus" onClick={onStartNewChat} />
 		</div>
 	);
 };

src/features/chatbot/hooks/use-llm.ts

@@ -1,16 +1,16 @@
-import { LLM_PROVIDERS } from '@/constants';
-import { usePlugin } from '@/hooks/useApp';
+import {LLM_PROVIDERS} from '@/constants';
+import {usePlugin} from '@/hooks/useApp';
 import useOnceEffect from '@/hooks/useOnceEffect';
-import { ProviderSettings } from '@/types';
+import {ProviderSettings} from '@/types';
 import Logger from '@/utils/logging';
-import { ChatOllama } from '@langchain/community/chat_models/ollama';
-import { BaseLanguageModelInput } from '@langchain/core/language_models/base';
-import { AIMessage, HumanMessage, MessageType, SystemMessage, type BaseMessage } from '@langchain/core/messages';
-import { StringOutputParser } from '@langchain/core/output_parsers';
-import { Runnable, RunnableConfig } from '@langchain/core/runnables';
-import { ChatOpenAI } from '@langchain/openai';
-import { TFile, getFrontMatterInfo } from 'obsidian';
-import { useState, useTransition } from 'react';
+import {ChatOllama} from '@langchain/community/chat_models/ollama';
+import {BaseLanguageModelInput} from '@langchain/core/language_models/base';
+import {AIMessage, HumanMessage, MessageType, SystemMessage, type BaseMessage} from '@langchain/core/messages';
+import {StringOutputParser} from '@langchain/core/output_parsers';
+import {Runnable, RunnableConfig} from '@langchain/core/runnables';
+import {ChatOpenAI} from '@langchain/openai';
+import {TFile, getFrontMatterInfo} from 'obsidian';
+import {useState, useTransition} from 'react';
 
 interface UseLLMProps {
 	provider: LLM_PROVIDERS;
@@ -137,9 +137,10 @@ export const useLLM = ({provider, model, systemPrompt, allowReferenceCurrentNote
 
 			await handlers?.onMessageAdded?.({...aiMessage, content: response});
 		} catch (error) {
-			if (error instanceof DOMException && error.name === 'AbortError') {
+			if (error instanceof Error && error.message === 'AbortError') {
 				// Request was aborted, do not show the notice
 				setMessages(messages => {
+					if (messages.length === 0) return messages;
 					const latestMessage = messages[messages.length - 1];
 					if (latestMessage.role === 'ai' && latestMessage.content === '') {
 						return [...messages.slice(0, -1), {...latestMessage, content: latestMessage.content + ' (Request aborted)'}];

src/locales/en.json

@@ -2,7 +2,8 @@
 	"chatbot": {
 		"You are a helpful assistant": "You are a helpful assistant.",
 		"Refer to the current note": "Refer to the current note",
-		"What can I help you with?" : "What can I help you with?"
+		"What can I help you with?" : "What can I help you with?",
+		"Start new chat": "Start new chat"
 	},
 	"settings": {
 		"Profiles": "Profiles",

src/locales/ko.json

@@ -2,7 +2,8 @@
 	"chatbot": {
 		"You are a helpful assistant": "친절한 챗봇으로서 상대방의 요청에 최대한 자세하고 친절하게 답하자. 모든 대답은 한국어(Korean)으로 대답해줘.",
 		"Refer to the current note": "현재 노트 참조",
-		"What can I help you with?" : "무엇을 도와드릴까요?"
+		"What can I help you with?" : "무엇을 도와드릴까요?",
+		"Start new chat": "새 채팅 시작"
 	},
 	"settings": {
 		"Profiles": "프로필 설정",

versions.json

@@ -8,5 +8,6 @@
 	"0.1.4": "1.5.0",
 	"0.1.5": "1.5.0",
 	"0.1.6": "1.5.0",
-	"0.1.7": "1.5.0"
+	"0.1.7": "1.5.0",
+	"0.2.0": "1.5.0"
 }