Prompts (#229)

2023-03-27 09:38:56 -06:00
parent 2269403806
commit 34c79c0d66
51 changed files with 1744 additions and 295 deletions
@@ -0,0 +1,163 @@
+import { Conversation } from '@/types/chat';
+import { KeyValuePair } from '@/types/data';
+import {
+  IconCheck,
+  IconMessage,
+  IconPencil,
+  IconTrash,
+  IconX,
+} from '@tabler/icons-react';
+import { DragEvent, FC, KeyboardEvent, useEffect, useState } from 'react';
+
+interface Props {
+  selectedConversation: Conversation;
+  conversation: Conversation;
+  loading: boolean;
+  onSelectConversation: (conversation: Conversation) => void;
+  onDeleteConversation: (conversation: Conversation) => void;
+  onUpdateConversation: (
+    conversation: Conversation,
+    data: KeyValuePair,
+  ) => void;
+}
+
+export const ConversationComponent: FC<Props> = ({
+  selectedConversation,
+  conversation,
+  loading,
+  onSelectConversation,
+  onDeleteConversation,
+  onUpdateConversation,
+}) => {
+  const [isDeleting, setIsDeleting] = useState(false);
+  const [isRenaming, setIsRenaming] = useState(false);
+  const [renameValue, setRenameValue] = useState('');
+
+  const handleEnterDown = (e: KeyboardEvent<HTMLDivElement>) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      handleRename(selectedConversation);
+    }
+  };
+
+  const handleDragStart = (
+    e: DragEvent<HTMLButtonElement>,
+    conversation: Conversation,
+  ) => {
+    if (e.dataTransfer) {
+      e.dataTransfer.setData('conversation', JSON.stringify(conversation));
+    }
+  };
+
+  const handleRename = (conversation: Conversation) => {
+    if (renameValue.trim().length > 0) {
+      onUpdateConversation(conversation, { key: 'name', value: renameValue });
+      setRenameValue('');
+      setIsRenaming(false);
+    }
+  };
+
+  useEffect(() => {
+    if (isRenaming) {
+      setIsDeleting(false);
+    } else if (isDeleting) {
+      setIsRenaming(false);
+    }
+  }, [isRenaming, isDeleting]);
+
+  return (
+    <div className="relative flex items-center">
+      {isRenaming && selectedConversation.id === conversation.id ? (
+        <div className="flex w-full items-center gap-3 bg-[#343541]/90 p-3">
+          <IconMessage size={18} />
+          <input
+            className="mr-12 flex-1 overflow-hidden overflow-ellipsis border-neutral-400 bg-transparent text-left text-[12.5px] leading-3 text-white outline-none focus:border-neutral-100"
+            type="text"
+            value={renameValue}
+            onChange={(e) => setRenameValue(e.target.value)}
+            onKeyDown={handleEnterDown}
+            autoFocus
+          />
+        </div>
+      ) : (
+        <button
+          className={`flex w-full cursor-pointer items-center gap-3 rounded-lg p-3 text-sm transition-colors duration-200 hover:bg-[#343541]/90 ${
+            loading ? 'disabled:cursor-not-allowed' : ''
+          } ${
+            selectedConversation.id === conversation.id ? 'bg-[#343541]/90' : ''
+          }`}
+          onClick={() => onSelectConversation(conversation)}
+          disabled={loading}
+          draggable="true"
+          onDragStart={(e) => handleDragStart(e, conversation)}
+        >
+          <IconMessage size={18} />
+          <div
+            className={`relative max-h-5 flex-1 overflow-hidden text-ellipsis whitespace-nowrap break-all text-left text-[12.5px] leading-3 ${
+              selectedConversation.id === conversation.id ? 'pr-12' : 'pr-1'
+            }`}
+          >
+            {conversation.name}
+          </div>
+        </button>
+      )}
+
+      {(isDeleting || isRenaming) &&
+        selectedConversation.id === conversation.id && (
+          <div className="visible absolute right-1 z-10 flex text-gray-300">
+            <button
+              className="min-w-[20px] p-1 text-neutral-400 hover:text-neutral-100"
+              onClick={(e) => {
+                e.stopPropagation();
+                if (isDeleting) {
+                  onDeleteConversation(conversation);
+                } else if (isRenaming) {
+                  handleRename(conversation);
+                }
+                setIsDeleting(false);
+                setIsRenaming(false);
+              }}
+            >
+              <IconCheck size={18} />
+            </button>
+            <button
+              className="min-w-[20px] p-1 text-neutral-400 hover:text-neutral-100"
+              onClick={(e) => {
+                e.stopPropagation();
+                setIsDeleting(false);
+                setIsRenaming(false);
+              }}
+            >
+              <IconX size={18} />
+            </button>
+          </div>
+        )}
+
+      {selectedConversation.id === conversation.id &&
+        !isDeleting &&
+        !isRenaming && (
+          <div className="visible absolute right-1 z-10 flex text-gray-300">
+            <button
+              className="min-w-[20px] p-1 text-neutral-400 hover:text-neutral-100"
+              onClick={(e) => {
+                e.stopPropagation();
+                setIsRenaming(true);
+                setRenameValue(selectedConversation.name);
+              }}
+            >
+              <IconPencil size={18} />
+            </button>
+            <button
+              className="min-w-[20px] p-1 text-neutral-400 hover:text-neutral-100"
+              onClick={(e) => {
+                e.stopPropagation();
+                setIsDeleting(true);
+              }}
+            >
+              <IconTrash size={18} />
+            </button>
+          </div>
+        )}
+    </div>
+  );
+};