diff --git a/src/components/ConversationTabsView.tsx b/src/components/ConversationTabsView.tsx
new file mode 100644
index 0000000..eec3333
--- /dev/null
+++ b/src/components/ConversationTabsView.tsx
@@ -0,0 +1,131 @@
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useConnectionStore, useConversationStore, useLayoutStore } from "@/store";
+import { Conversation } from "@/types";
+import Icon from "./Icon";
+import Dropdown, { DropdownItem } from "./kit/Dropdown";
+import UpdateConversationModal from "./UpdateConversationModal";
+
+interface ConversationTabProps {
+ conversation: Conversation;
+ selected: boolean;
+ onClick: (conversation: Conversation) => void;
+ onEdit: (conversation: Conversation) => void;
+ onDelete: (conversation: Conversation) => void;
+}
+
+const ConversationTab = (props: ConversationTabProps) => {
+ const { conversation, selected, onClick, onEdit, onDelete } = props;
+ const { t } = useTranslation();
+
+ return (
+
onClick(conversation)}
+ >
+
{conversation.title}
+
+
+
+ }
+ >
+
+ onEdit(conversation)}
+ >
+
+ {t("common.edit")}
+
+ onDelete(conversation)}
+ >
+
+ {t("common.delete")}
+
+
+
+
+ );
+};
+
+const ConversationTabsView = () => {
+ const { t } = useTranslation();
+ const layoutStore = useLayoutStore();
+ const connectionStore = useConnectionStore();
+ const conversationStore = useConversationStore();
+ const [updateConversationModalContext, setUpdateConversationModalContext] = useState
(undefined);
+ const currentConnectionCtx = connectionStore.currentConnectionCtx;
+ const conversationList = conversationStore.conversationList.filter(
+ (conversation) =>
+ conversation.connectionId === currentConnectionCtx?.connection.id &&
+ conversation.databaseName === currentConnectionCtx?.database?.name
+ );
+
+ const handleCreateConversation = () => {
+ if (!currentConnectionCtx) {
+ conversationStore.createConversation();
+ } else {
+ conversationStore.createConversation(currentConnectionCtx.connection.id, currentConnectionCtx.database?.name);
+ }
+ };
+
+ const handleConversationClick = (conversation: Conversation) => {
+ conversationStore.setCurrentConversationId(conversation.id);
+ if (layoutStore.isMobileView) {
+ layoutStore.toggleSidebar(false);
+ }
+ };
+
+ const handleEditConversation = (conversation: Conversation) => {
+ setUpdateConversationModalContext(conversation);
+ };
+
+ const handleDeleteConversation = (conversation: Conversation) => {
+ conversationStore.clearConversation((item) => item.id !== conversation.id);
+ if (conversationStore.currentConversationId === conversation.id) {
+ conversationStore.setCurrentConversationId(undefined);
+ }
+ };
+
+ return (
+ <>
+
+
+ {conversationList.map((conversation) => {
+ return (
+
+ );
+ })}
+
+
0 && "ml-2"}`}>
+
+
+
-
-
- {title}
-
-
-
{title}
-
-
- 
-
- {hasFeature("debug") && (
-