➕ Copy and New Chat

bard-ai/Chats.ts

@@ -5,6 +5,7 @@ export type ChatsT = Array<queryBardValidRes | string>;
 export default class Chats {
 	chat: Chat;
 	chats: Array<queryBardValidRes | string> = [];
+
 	constructor() {
 		this.chat = new Bard.Chat();
 	}
@@ -21,4 +22,8 @@ export default class Chats {
 
 		return response;
 	}
+
+	newChat = () => {
+		this.chat = new Bard.Chat();
+	};
 }

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "obsidian-sample-plugin",
-	"version": "0.1.3",
+	"version": "0.3.0",
 	"description": "This is a sample plugin for Obsidian (https://obsidian.md)",
 	"main": "main.js",
 	"scripts": {

src/components/View/AppCommands/index.tsx

@@ -0,0 +1,34 @@
+import * as React from "react";
+import styled from "styled-components";
+
+import { LucideIconButton } from "../../LucideIconButton";
+import RefreshButton from "../AppCommands/Refresh";
+import { MessageCircle } from "lucide-react";
+import { ChatGlobalContext } from "src/machines/chat.context";
+
+const AppCommandButtonsContainer = styled.div`
+	width: 100%;
+	display: flex;
+	justify-content: center;
+	gap: 10px;
+`;
+export default function AppCommands() {
+	const globalContext = React.useContext(ChatGlobalContext);
+
+	return (
+		<AppCommandButtonsContainer>
+			<RefreshButton />
+			<LucideIconButton
+				onClick={() => {
+					globalContext.chatService.send({
+						type: "NEW_CHAT",
+					});
+				}}
+				aria-label="New Chat"
+				aria-labeldelay="300"
+			>
+				<MessageCircle width="15" height="15" />
+			</LucideIconButton>
+		</AppCommandButtonsContainer>
+	);
+}

src/components/View/app.tsx

@@ -1,15 +1,12 @@
 import * as React from "react";
 
 import styled from "styled-components";
-import { MessageCircle } from "lucide-react";
 
 import { useApp } from "../hooks/useApp";
 import ChatsSection from "./chats";
 
-import { LucideIconButton } from "../LucideIconButton";
-import RefreshButton from "./execButtons/Refresh";
-
 import ChatInput from "../chatInput";
+import AppCommands from "./AppCommands/index";
 
 const AppContainer = styled.div`
 	height: 100%;
@@ -26,13 +23,6 @@ const CommandsAppContainer = styled.div`
 	gap: 10px;
 `;
 
-const AppCommandButtonsContainer = styled.div`
-	width: 100%;
-	display: flex;
-	justify-content: center;
-	gap: 10px;
-`;
-
 export default function ReactView() {
 	const App = useApp();
 
@@ -47,15 +37,7 @@ export default function ReactView() {
 			<ChatsSection />
 
 			<CommandsAppContainer>
-				<AppCommandButtonsContainer>
-					<RefreshButton />
-					<LucideIconButton
-						aria-label="New Chat"
-						aria-labeldelay="300"
-					>
-						<MessageCircle width="15" height="15" />
-					</LucideIconButton>
-				</AppCommandButtonsContainer>
+				<AppCommands />
 				<ChatInput />
 			</CommandsAppContainer>
 		</AppContainer>

src/components/View/chats.tsx

@@ -1,4 +1,4 @@
-import { Copy, Sparkles, User } from "lucide-react";
+import { Check, Copy, Sparkles, User } from "lucide-react";
 import * as React from "react";
 import styled from "styled-components";
 import { LucideIconButton } from "../LucideIconButton";
@@ -8,6 +8,7 @@ import { useActor } from "@xstate/react";
 import { queryBardValidRes } from "bard-ai";
 
 import ReactMarkdown from "../memoizedMarkdownReact";
+import { Notice } from "obsidian";
 
 const ChatsContainer = styled.div`
 	display: flex;
@@ -23,6 +24,10 @@ const ChatCardStyled = styled.div`
 		flex-direction: column;
 		justify-content: center;
 		gap: 10px;
+
+		li {
+			margin-bottom: 15px;
+		}
 	}
 	p {
 		padding: 0;
@@ -75,6 +80,23 @@ function RenderChatCard({
 	maxLen: number;
 	idx: number;
 }) {
+	const [state, setState] = React.useState("idle");
+
+	const copyToClipboard = () => {
+		if (state == "idle") {
+			if (typeof chat == "string") navigator.clipboard.writeText(chat);
+			else {
+				navigator.clipboard.writeText(chat.content);
+			}
+
+			setState("copied");
+			new Notice("Copied to Clipboard!");
+			setTimeout(() => {
+				setState("idle");
+			}, 500);
+		}
+	};
+
 	if (typeof chat == "string") {
 		return (
 			<ChatCardStyled>
@@ -107,8 +129,16 @@ function RenderChatCard({
 				</div>
 
 				<div>
-					<ChatCardExeButton aria-label="Copy" aria-label-delay="300">
-						<Copy width="15" height="15" color="#5b99ef" />
+					<ChatCardExeButton
+						aria-label="Copy"
+						aria-label-delay="300"
+						onClick={copyToClipboard}
+					>
+						{state == "copied" ? (
+							<Check width="15" height="15" color="#5b99ef" />
+						) : (
+							<Copy width="15" height="15" color="#5b99ef" />
+						)}
 					</ChatCardExeButton>
 				</div>
 			</div>

src/machines/chat.context.tsx

@@ -1,4 +1,4 @@
-import { ActorRefFrom } from "xstate";
+import { ActorRefFrom, assign } from "xstate";
 import { chatMachine } from "./chat";
 import * as React from "react";
 import { useInterpret } from "@xstate/react";
@@ -34,6 +34,13 @@ export const ChatGlobalStateProvider = ({
 				};
 			},
 		},
+		actions: {
+			newChat: assign((ctx, event) => {
+				newChat();
+
+				return Object.assign({}, { ...ctx, chats: [] });
+			}),
+		},
 	});
 
 	return (

src/machines/chat.ts

@@ -23,6 +23,9 @@ export const chatMachine = createMachine(
 		states: {
 			inputting: {
 				on: {
+					NEW_CHAT: {
+						actions: "newChat",
+					},
 					SUBMIT: {
 						actions: assign<
 							chatMachineContextT,

src/plugin/view.tsx

@@ -80,7 +80,10 @@ export class BardObsidianView extends ItemView {
 		);
 	}
 
-	newChat() {}
+	newChat = () => {
+		console.log("new chat");
+		this.chats.newChat();
+	};
 
 	chatToBard = async (ask: string) => {
 		console.log(ask);