Merge pull request #40 from vasilecampeanu/develop

Develop
vasilecampeanu · May 29, 2023 · 59d7575 · 59d7575
2 parents 1777b64 + d460a92
commit 59d7575
Show file tree

Hide file tree

Showing 25 changed files with 770 additions and 168 deletions.
diff --git a/manifest.json b/manifest.json
@@ -1,7 +1,7 @@
 {
 	"id": "obsidian-weaver",
 	"name": "Weaver",
-	"version": "0.5.0",
+	"version": "0.5.2",
 	"minAppVersion": "1.0.0",
 	"description": "Weaver is a useful Obsidian plugin that integrates ChatGPT/GPT-3 into your note-taking workflow. This plugin makes it easy to access AI-generated suggestions and insights within Obsidian, helping you improve your writing and brainstorming process.",
 	"author": "Vasile Câmpeanu",

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "obsidian-weaver",
-	"version": "0.5.0",
+	"version": "0.5.2",
 	"description": "Weaver is a useful Obsidian plugin that integrates ChatGPT/GPT-3 into your note-taking workflow. This plugin makes it easy to access AI-generated suggestions and insights within Obsidian, helping you improve your writing and brainstorming process.",
 	"main": "main.js",
 	"scripts": {

diff --git a/src/components/Conversation/ConversationDialogue.tsx b/src/components/Conversation/ConversationDialogue.tsx
@@ -19,13 +19,20 @@ export const ConversationDialogue: React.FC<ConversationDialogueProps> = ({
 	setConversationSession
 }) => {
 	const [selectedChildren, setSelectedChildren] = useState<{ [key: string]: number }>({});
-	const [activeEngine, setActiveEngine] = useState<"gpt-3.5-turbo" | "gpt-4">(plugin.settings.engine as any);
+	const [activeEngine, setActiveEngine] = useState<"gpt-3.5-turbo" | "gpt-4">();
+	const [activeMode, setActiveMode] = useState<"creative" | "balanced" | "precise">();
 	const [showEngineInfo, setShowEngineInfo] = useState(false);
+	const [showConversationEngineInfo, setShowConversationEngineInfo] = useState(plugin.settings.engineInfo);
 
 	const dialogueTimelineRef = useRef<HTMLDivElement>(null);
 	const rootMessage = conversation?.messages.find((msg) => msg.role === "system");
 	const TIMEOUT_DELAY = 250;
 
+	useEffect(() => {
+		setActiveEngine(conversation?.model as "gpt-3.5-turbo" | "gpt-4")
+		setActiveMode(conversation?.mode as "creative" | "balanced" | "precise")
+	}, [conversation?.model, conversation?.mode])
+
 	useEffect(() => {
 		const timer = setTimeout(() => {
 			setShowEngineInfo(true);
@@ -116,18 +123,68 @@ export const ConversationDialogue: React.FC<ConversationDialogueProps> = ({
 		}
 	};
 
-	const handleSetGPT3 = () => {
+	const handleSetGPT3 = async () => {
 		setActiveEngine("gpt-3.5-turbo");
-		plugin.settings.engine = "gpt-3.5-turbo";
-		plugin.saveSettings();
+
+		if (conversation) {
+			const updatedConversation = { ...conversation, model: "gpt-3.5-turbo" };
+			setConversationSession(updatedConversation)
+			await ConversationManager.updateConversationModel(plugin, conversation!?.id, "gpt-3.5-turbo");
+		}
 	}
 
-	const handleSetGPT4 = () => {
+	const handleSetGPT4 = async () => {
 		setActiveEngine("gpt-4");
-		plugin.settings.engine = "gpt-4";
-		plugin.saveSettings();
+
+		if (conversation) {
+			const updatedConversation = { ...conversation, model: "gpt-4" };
+			setConversationSession(updatedConversation)
+			await ConversationManager.updateConversationModel(plugin, conversation!?.id, "gpt-4");
+		}
 	}
 
+	const handleShowInfoClick = async () => {
+		setShowConversationEngineInfo(!showConversationEngineInfo);
+		plugin.settings.engineInfo = true;
+		await plugin.saveSettings();
+	};
+
+	const handleHideInfoClick = async () => {
+		setShowConversationEngineInfo(!showConversationEngineInfo);
+		plugin.settings.engineInfo = false;
+		await plugin.saveSettings();
+	};
+
+	const handleModeChange = async (newMode: string) => {
+		setActiveMode(newMode as "creative" | "balanced" | "precise");
+
+		let systemPromptContent = ""
+
+		if (newMode === "creative") {
+			systemPromptContent = plugin.settings.creativeSystemRolePrompt;
+		} else if (newMode === "balanced") {
+			systemPromptContent = plugin.settings.balancedSystemRolePrompt;
+		} else if (newMode === "precise") {
+			systemPromptContent = plugin.settings.preciseSystemRolePrompt;
+		}
+
+		if (conversation) {
+			const updatedConversation = { ...conversation, mode: newMode };
+
+			// Update the system message content in the updated conversation
+			const systemPrompt = updatedConversation.messages.find(message => message.role === 'system');
+
+			if (systemPrompt) {
+				systemPrompt.content = systemPromptContent; // update to your desired content
+			}
+
+			setConversationSession(updatedConversation);
+
+			await ConversationManager.updateSystemPrompt(plugin, conversation!?.id, systemPromptContent);
+			await ConversationManager.updateConversationMode(plugin, conversation!?.id, newMode);
+		}
+	};	
+
 	return (
 		<div className={`ow-conversation-dialogue ${conversation?.context === false ? "ow-context" : ""}`} ref={dialogueTimelineRef}>
 			{
@@ -145,30 +202,93 @@ export const ConversationDialogue: React.FC<ConversationDialogueProps> = ({
 					showEngineInfo && (
 						<div className="ow-message-empty-dialogue">
 							<div className="ow-change-engine">
-								<button
-									className={activeEngine === "gpt-3.5-turbo" ? "ow-active" : ""}
+								<div
+									className={`ow-btn-change-model ${activeEngine === "gpt-3.5-turbo" ? "ow-active" : ""}`}
 									onClick={handleSetGPT3}
 								>
 									<div className="ow-icon">
 										<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="lucide lucide-zap"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon></svg>
 									</div>
-									<span>
-										GPT-3.5
-									</span>
-								</button>
-								<button
-									className={activeEngine === "gpt-4" ? "ow-active" : ""}
+									<div className="ow-engine-wrapper">
+										<span>
+											GPT-3.5
+										</span>
+										{showConversationEngineInfo === true ? (
+											<button
+												className="ow-btn-show-info"
+												onClick={handleHideInfoClick}
+											>
+												<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="lucide lucide-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>
+											</button>
+										) : (
+											<button
+												className="ow-btn-show-info"
+												onClick={handleShowInfoClick}
+											>
+												<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="lucide lucide-chevron-right"><polyline points="9 18 15 12 9 6"></polyline></svg>
+											</button>
+										)}
+									</div>
+								</div>
+								<div
+									className={`ow-btn-change-model ${activeEngine === "gpt-4" ? "ow-active" : ""}`}
 									onClick={handleSetGPT4}
 								>
 									<div className="ow-icon">
 										<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="lucide lucide-sparkles"><path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z"></path><path d="M5 3v4"></path><path d="M19 17v4"></path><path d="M3 5h4"></path><path d="M17 19h4"></path></svg>
 									</div>
-									<span>
-										GPT-4
-									</span>
-								</button>
+									<div className="ow-engine-wrapper">
+										<span>
+											GPT-4
+										</span>
+										{showConversationEngineInfo === true ? (
+											<button
+												className="ow-btn-show-info"
+												onClick={handleHideInfoClick}
+											>
+												<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="lucide lucide-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>
+											</button>
+										) : (
+											<button
+												className="ow-btn-show-info"
+												onClick={handleShowInfoClick}
+											>
+												<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="lucide lucide-chevron-right"><polyline points="9 18 15 12 9 6"></polyline></svg>
+											</button>
+										)}
+									</div>
+								</div>
+							</div>
+							{showConversationEngineInfo && <ConversationEngineInfo plugin={plugin} activeEngine={activeEngine as "gpt-3.5-turbo" | "gpt-4"} />}
+							<div className={`ow-change-mode ${showConversationEngineInfo === true ? "showConversationEngineInfoEnabled" : ""}`}>
+								<div className="ow-title">
+									Choose a conversation style
+								</div>
+								<div className="ow-mode-list">
+									<button
+										className={`ow-mode-wrapper ${activeMode === "creative" ? "active" : ""}`}
+										onClick={() => handleModeChange("creative")}
+									>
+										<span className="ow-more">More</span>
+										<span className="ow-mode">Creative</span>
+									</button>
+									<button
+										className={`ow-mode-wrapper ${activeMode === "balanced" ? "active" : ""}`}
+										onClick={() => handleModeChange("balanced")}
+									>
+										<span className="ow-more">More</span>
+										<span className="ow-mode">Balanced</span>
+									</button>
+									<button
+										className={`ow-mode-wrapper ${activeMode === "precise" ? "active" : ""}`}
+										onClick={() => handleModeChange("precise")}
+									>
+										<span className="ow-more">More</span>
+										<span className="ow-mode">Precise</span>
+									</button>
+								</div>
 							</div>
-							<ConversationEngineInfo plugin={plugin} activeEngine={activeEngine} />
+
 						</div>
 					)
 				)

diff --git a/src/components/Conversation/ConversationHeader.tsx b/src/components/Conversation/ConversationHeader.tsx
@@ -122,8 +122,11 @@ export const ConversationHeader: React.FC<ConversationHeaderProps> = ({
 		}
 	};
 
-	const handleTabSwitch = () => {
+	const handleTabSwitch = async () => {
 		onTabSwitch("thread-page");
+		plugin.settings.lastConversationId = "";
+		plugin.settings.loadLastConversationState = false;
+		await plugin.saveSettings();
 	}
 
 	const handleToggleContext = () => {

diff --git a/src/components/Conversation/ConversationInput.tsx b/src/components/Conversation/ConversationInput.tsx
@@ -142,10 +142,12 @@ export const ConversationInput: React.FC<ConversationInput> = ({
 		setInputText('');
 	}
 
-	const onCancelRequest = useCallback(() => {
+	const onCancelRequest = useCallback(async () => {
 		if (messageDispatcherRef.current) {
-			messageDispatcherRef.current.handleStopStreaming();
+			await messageDispatcherRef.current.handleStopStreaming();
 		}
+
+		setIsLoading(false);
 	}, []);
 
 	const handleRegenerateMessage = async () => {

diff --git a/src/components/Conversation/ConversationMessageBubble.tsx b/src/components/Conversation/ConversationMessageBubble.tsx
@@ -53,35 +53,64 @@ export const ConversationMessageBubble: React.FC<ConversationMessageBubbleProps>
 	};
 
 	return (
-		<div className={`ow-message-bubble ${message.role === 'user' ? 'ow-user-bubble' : 'ow-assistant-bubble'} ${previousMessage?.children && previousMessage?.children.length > 1 ? 'ow-message-bubble-has-top-bar' : ''} ${contextClass}`} key={message.id}>
-			<div className={`ow-message-bubble-content`}>
-				{previousMessage?.children && previousMessage?.children.length > 1 && (
-					<div className={`ow-message-bubble-top-bar ${message.isLoading === true ? "show" : ""}`}>
-						<div className="ow-branch-selector">
-							<button onClick={() => onSelectedChildChange(-1)}>
-								<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="lucide lucide-chevron-left"><polyline points="15 18 9 12 15 6"></polyline></svg>
-							</button>
-							<span>{selectedChild + 1}</span>
-							<button onClick={() => onSelectedChildChange(1)}>
-								<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="lucide lucide-chevron-right"><polyline points="9 18 15 12 9 6"></polyline></svg>
-							</button>
+		message.role === 'info' ? (
+			<div className="ow-message-info-bubble">
+				{message.model === "gpt-3.5-turbo" ? (
+					<>
+						<div className="ow-icon">
+							<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="lucide lucide-zap"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon></svg>
 						</div>
-					</div>
+						<span>Using GPT-3.5</span>
+					</>
+				) : (
+					<>
+						<div className="ow-icon">
+							<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="lucide lucide-sparkles"><path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z"></path><path d="M5 3v4"></path><path d="M19 17v4"></path><path d="M3 5h4"></path><path d="M17 19h4"></path></svg>
+						</div>
+						<span>Using GPT-4</span>
+					</>
 				)}
-				<div
-					className="ow-content"
-					dangerouslySetInnerHTML={{ __html: `${htmlDescriptionContent?.__html}${message.isLoading && htmlDescriptionContent?.__html.length === 0 ? '<span class="ow-blinking-cursor"></span>' : ''}` }}
-				/>
 			</div>
-			<div className="ow-message-actions">
-				<button className="ow-copy-button" onClick={copyTextWithMarkdown}>
-					{showConfirmation ? (
-						<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="lucide lucide-check"><polyline points="20 6 9 17 4 12"></polyline></svg>
-					) : (
-						<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect width="13" height="13" x="9" y="9" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>
+		) : (
+			<div className={`ow-message-bubble ${message.role === 'user' ? 'ow-user-bubble' : 'ow-assistant-bubble'} ${previousMessage?.children && previousMessage?.children.length > 1 ? 'ow-message-bubble-has-top-bar' : ''} ${contextClass}`} key={message.id}>
+				<div className={`ow-message-bubble-content`}>
+					{previousMessage?.children && previousMessage?.children.length > 1 && (
+						<div className={`ow-message-bubble-top-bar ${message.isLoading === true ? "show" : ""}`}>
+							<div className="ow-branch-selector">
+								<button onClick={() => onSelectedChildChange(-1)}>
+									<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="lucide lucide-chevron-left"><polyline points="15 18 9 12 15 6"></polyline></svg>
+								</button>
+								<span>{selectedChild + 1}</span>
+								<button onClick={() => onSelectedChildChange(1)}>
+									<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="lucide lucide-chevron-right"><polyline points="9 18 15 12 9 6"></polyline></svg>
+								</button>
+							</div>
+						</div>
 					)}
-				</button>
+					<div
+						className="ow-content"
+						dangerouslySetInnerHTML={{ __html: `${htmlDescriptionContent?.__html}${message.isLoading && htmlDescriptionContent?.__html.length === 0 ? '<span class="ow-blinking-cursor"></span>' : ''}` }}
+					/>
+				</div>
+				<div className="ow-message-actions">
+					{message.role === 'user' ? (
+						<>
+							{/* 
+								<button className="ow-edit-button">
+									<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="lucide lucide-edit"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
+								</button> 
+							*/}
+						</>
+					) : null}
+					<button className="ow-copy-button" onClick={copyTextWithMarkdown}>
+						{showConfirmation ? (
+							<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="lucide lucide-check"><polyline points="20 6 9 17 4 12"></polyline></svg>
+						) : (
+							<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect width="13" height="13" x="9" y="9" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>
+						)}
+					</button>
+				</div>
 			</div>
-		</div>
-	);
+		)
+	)
 };