Skip to content

Commit

Permalink
adjusted horizontal scroll bar style, changed input box to textarea t…
Browse files Browse the repository at this point in the history
…o support multiple lines, refactored menu buttons, fixed deleteConversation method, and added deleteAllConversations method
  • Loading branch information
lorem-ipsumm committed Feb 9, 2024
1 parent b715d0d commit 894e883
Show file tree
Hide file tree
Showing 4 changed files with 74 additions and 43 deletions.
1 change: 1 addition & 0 deletions src/renderer/App.css
Original file line number Diff line number Diff line change
Expand Up @@ -86,6 +86,7 @@
/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
width: 3px;
height: 4px;
position: absolute;
}

Expand Down
7 changes: 4 additions & 3 deletions src/renderer/components/Chat.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -187,6 +187,7 @@ export default function Chat() {

const keyDown = (e: any) => {
if (e.key === 'Enter' && !pending) {
e.preventDefault();
sendMessage();
setTimeout(() => {
scrollToBottom();
Expand All @@ -196,9 +197,9 @@ export default function Chat() {

const renderInput = () => {
return (
<div className="relative w-full">
<input
className="w-full h-12 border-[1px] border-zinc-700 min-h-10 px-3 rounded-md bg-zinc-800 text-white outline-zinc-900"
<div className="relative w-full h-auto flex">
<textarea
className="w-full h-12 border-[1px] border-zinc-700 min-h-10 px-3 rounded-md bg-zinc-800 text-white outline-zinc-900 pt-[10px] pr-10"
disabled={!currentModelName}
placeholder={`${!currentModelName ? "No model selected" : "Type a message..."}`}
value={input}
Expand Down
102 changes: 63 additions & 39 deletions src/renderer/components/ConversationsMenu.tsx
Original file line number Diff line number Diff line change
@@ -1,18 +1,26 @@
import { PlusCircle, Trash, Trash2, X } from 'react-feather';
import { Plus, PlusCircle, Trash2, X } from 'react-feather';
import { useAtom } from 'jotai';
import { currentConversationAtom, isConversationsMenuOpenAtom } from '../utils/atoms';
import {
currentConversationAtom,
isConversationsMenuOpenAtom,
} from '../utils/atoms';
import { useEffect, useState } from 'react';
import { deleteConversation, loadConversations } from '../utils/conversationManager';
import {
deleteAllConversations,
deleteConversation,
loadConversations,
} from '../utils/conversationManager';
import { CONVERSATION } from '../utils/interfaces';
import { useInterval } from 'usehooks-ts';

export default function ConversationsMenu() {

const [isConversationsMenuOpen, setIsConversationsMenuOpen] = useAtom(
isConversationsMenuOpenAtom,
);
const [conversations, setConversations] = useState<CONVERSATION[]>([]);
const [currentConversation, setCurrentConversation] = useAtom(currentConversationAtom);
const [currentConversation, setCurrentConversation] = useAtom(
currentConversationAtom,
);

useEffect(() => {
fetchConversations();
Expand All @@ -27,7 +35,7 @@ export default function ConversationsMenu() {
const fetchConversations = async () => {
const conversations = await loadConversations();
setConversations(conversations);
}
};

const getMenuSize = () => {
if (isConversationsMenuOpen) {
Expand All @@ -37,68 +45,84 @@ export default function ConversationsMenu() {
}
};

const renderNewConversationButton = () => {

const onClick = () => {
setCurrentConversation(null);
setIsConversationsMenuOpen(false);
}

const renderMenuButton = (label: string, icon: any, onClick: () => void) => {
return (
<div
className={`flex justify-between w-full h-10 cursor-pointer items-center hover:bg-zinc-900 px-2 transition all rounded-md text-white border border-zinc-800`}
<div
className={`flex justify-between w-full h-10 cursor-pointer items-center hover:bg-zinc-900 transition all rounded-md text-white border border-zinc-800`}
onClick={onClick}
>
<span className="text-nowrap">New Conversation</span>
<PlusCircle
size={15}
/>
<span className="block h-full flex-1 text-white text-nowrap flex items-center px-2">
{label}
</span>
<div className="h-full w-1/5 flex justify-center items-center">
{icon}
</div>
</div>
)
}
);
};

const renderConversations = () => {
// on click listener for deleting all conversations
const deleteAllConversationsClicked = () => {
deleteAllConversations();
fetchConversations();
};

// on click listener for starting new conversations
const newConversationClicked = () => {
setCurrentConversation(null);
setIsConversationsMenuOpen(false);
};

const renderConversations = () => {
const conversationClicked = (conversation: CONVERSATION) => {
setCurrentConversation(conversation);
setIsConversationsMenuOpen(false);
}
};

const deleteClicked = (conversation: CONVERSATION) => {
deleteConversation(conversation.uid);
fetchConversations();
}
};

return (
<>
{conversations.map((conversation: CONVERSATION) => {
const messages = conversation.messages;
const firstMessage = messages[0];
const title = firstMessage.content.substring(0, 15);
const isActiveConversation = conversation.uid === currentConversation?.uid;
const isActiveStyle = `${isActiveConversation ? "bg-zinc-900" : ""}`
const isActiveConversation =
conversation.uid === currentConversation?.uid;
const isActiveStyle = `${isActiveConversation ? 'bg-zinc-900' : ''}`;
return (
<div
className={`${isActiveStyle} flex justify-between w-full h-10 cursor-pointer items-center hover:bg-zinc-900 px-2 transition all rounded-md`}
<div
className={`${isActiveStyle} flex justify-between w-full h-10 cursor-pointer items-center hover:bg-zinc-900 transition all rounded-md overflow-hidden`}
onClick={() => conversationClicked(conversation)}
>
<span
className="text-white text-nowrap"
>
<span className="block h-full flex-1 text-white text-nowrap flex items-center px-2">
{title}
</span>
<Trash2
className="text-red-500 cursor-pointer"
size={15}
<div
className="h-full w-1/5 flex justify-center items-center hover:bg-zinc-800"
onClick={() => deleteClicked(conversation)}
/>
>
<Trash2 className="text-red-500 cursor-pointer" size={15} />
</div>
</div>
)
);
})}
{renderNewConversationButton()}
{renderMenuButton(
'New Conversation',
<PlusCircle size={15} />,
newConversationClicked,
)}
{renderMenuButton(
'Delete Conversations',
<Trash2 size={15} className="text-red-500" />,
deleteAllConversationsClicked,
)}
</>
)
}
);
};

return (
<>
Expand Down
7 changes: 6 additions & 1 deletion src/renderer/utils/conversationManager.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
import { CONVERSATION, MESSAGE } from "./interfaces";

export const deleteAllConversations = () => {
localStorage.removeItem('conversations');
}

export const deleteConversation = (uid: string) => {
const conversations = [...loadConversations()];
// if the user is deleting the last conversation, remove the conversations key from local storage
Expand All @@ -10,8 +14,9 @@ export const deleteConversation = (uid: string) => {
// find the conversation with the passed in uid
const index = conversations.findIndex((c: any) => c.uid === uid);
// if the conversation exists delete it from the array
if (index) {
if (index !== -1) {
conversations.splice(index, 1);
console.log(conversations);

Check warning on line 19 in src/renderer/utils/conversationManager.ts

View workflow job for this annotation

GitHub Actions / test (ubuntu-latest)

Unexpected console statement
localStorage.setItem('conversations', JSON.stringify(conversations));
}
}
Expand Down

0 comments on commit 894e883

Please sign in to comment.