Merge pull request #16 from vasilecampeanu/develop

Develop

manifest.json

@@ -1,7 +1,7 @@
 {
 	"id": "obsidian-weaver",
 	"name": "Weaver",
-	"version": "0.3.0",
+	"version": "0.3.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",

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "obsidian-weaver",
-	"version": "0.3.0",
+	"version": "0.3.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": {
@@ -28,6 +28,7 @@
 		"@types/axios": "^0.14.0",
 		"@types/react": "^18.0.31",
 		"@types/react-dom": "^18.0.11",
+		"@types/turndown": "^5.0.1",
 		"bson": "^5.1.0",
 		"esbuild-sass-plugin": "^2.8.0",
 		"fast-fuzzy": "^1.12.0",
@@ -40,6 +41,8 @@
 		"react-syntax-highlighter": "^15.5.0",
 		"remark-gfm": "^3.0.1",
 		"safe-await": "^2.0.0",
-		"stopword": "^2.0.8"
+		"stopword": "^2.0.8",
+		"turndown": "^7.1.2",
+		"turndown-plugin-gfm": "^1.0.2"
 	}
 }

src/components/HomePage.tsx

@@ -146,8 +146,8 @@ export const HomePage: React.FC<HomePage> = ({
 									{conversation.timestamp.substring(0, 10)}
 								</span>
 							</div>
-							<div className={`item-actions ${showDeleteConfirmation === conversation.id ? 'show' : ''}`}>
-								<div className="actions">
+							<div className={`item-ow-actions ${showDeleteConfirmation === conversation.id ? 'show' : ''}`}>
+								<div className="ow-actions">
 									{showDeleteConfirmation === conversation.id ? (
 										<div className="delete-confirmation-dialog">
 											<button

src/components/chat/ConversationDialogue.tsx

@@ -6,8 +6,8 @@ import { ConversationHelper } from 'helpers/ConversationHelpers';
 import OpenAIContentProvider from 'helpers/OpenAIContentProvider';
 
 // React Component
-import { ChatHeader } from './Header';
-import { MessageBubbleList } from './MessageBubbleList';
+import { ChatHeader } from './ChatHeader';
+import { DialogueTimeline } from './DialogueTimeline';
 import { InputArea } from './InputArea';
 
 export interface IChatMessage {
@@ -262,7 +262,7 @@ export const ConversationDialogue: React.FC<IConversationDialogue> = ({
 	return (
 		<div className="chat-view">
 			<ChatHeader title={chatSession?.title} onBackToHomePage={onBackToHomePage} onUpdateChatSessionTitle={onUpdateConversationTitle}></ChatHeader>
-			<MessageBubbleList messages={chatSession?.messages} />
+			<DialogueTimeline messages={chatSession?.messages} />
 			<InputArea
 				inputText={inputText}
 				setInputText={setInputText}

src/components/chat/MessageBubbleList.tsx → src/components/chat/DialogueTimeline.tsx

@@ -2,15 +2,15 @@ import React, { useEffect, useRef } from 'react';
 import { MessageBubble } from './MessageBouble';
 import { IChatMessage } from './ConversationDialogue';
 
-interface MessageBubbleListProps {
+interface DialogueTimelineProps {
 	messages: IChatMessage[] | undefined;
 }
 
-export const MessageBubbleList: React.FC<MessageBubbleListProps> = ({ messages }) => {
-	const messageBubbleListRef = useRef<HTMLDivElement>(null);
+export const DialogueTimeline: React.FC<DialogueTimelineProps> = ({ messages }) => {
+	const dialogueTimelineRef = useRef<HTMLDivElement>(null);
 
 	useEffect(() => {
-		const messageList = messageBubbleListRef.current;
+		const messageList = dialogueTimelineRef.current;
 
 		if (messageList) {
 			messageList.scrollTop = messageList.scrollHeight;
@@ -34,10 +34,10 @@ export const MessageBubbleList: React.FC<MessageBubbleListProps> = ({ messages }
 	};
 
 	return (
-		<div ref={messageBubbleListRef} className="conversation-history">
+		<div ref={dialogueTimelineRef} className="ow-dialogue-timeline">
 			{renderMessageBubbles()}
 		</div>
 	);
 };
 
-export default MessageBubbleList;
+export default DialogueTimeline;

src/components/chat/InputArea.tsx

@@ -55,7 +55,7 @@ export const InputArea: React.FC<InputAreaProps> = ({
 							className="btn-stop"
 						>
 							<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 x="3" y="3" width="18" height="18" rx="2" ry="2"></rect></svg>
-							STOP
+							<span>STOP</span>
 						</button>
 					) : (
 						<>
@@ -65,7 +65,7 @@ export const InputArea: React.FC<InputAreaProps> = ({
 			</div>
 			<form className="input-form" onSubmit={onSubmit}>
 				<button
-					className="btn-clean"
+					className="btn-new-chat"
 					type="button"
 					onClick={() => {
 						onNewChat();