Merge branch 'main' into error-state-#484

frontend/src/conversation/ConversationBubble.tsx

@@ -74,7 +74,7 @@ const ConversationBubble = forwardRef<
         <div className="flex self-start">
           <Avatar className="mt-2 text-2xl" avatar="🦖"></Avatar>
           <div
-            className={`ml-2 mr-5 flex items-center  bg-gray-1000 p-3.5 ${
+            className={`ml-2 mr-5 flex flex-col items-center rounded-3xl bg-gray-1000 p-3.5 ${
               type === 'ERROR'
                 ? 'flex-row rounded-full border border-transparent bg-[#FFE7E7] p-2 py-5 text-sm font-normal text-red-3000  dark:border-red-2000 dark:text-white'
                 : 'flex-col rounded-3xl'
@@ -84,7 +84,7 @@ const ConversationBubble = forwardRef<
               <img src={Alert} alt="alert" className="mr-2 inline" />
             )}
             <ReactMarkdown
-              className="whitespace-pre-wrap break-words"
+              className="max-w-screen-md whitespace-pre-wrap break-words"
               components={{
                 code({ node, inline, className, children, ...props }) {
                   const match = /language-(\w+)/.exec(className || '');

frontend/src/conversation/ConversationTile.tsx

@@ -0,0 +1,128 @@
+import { useEffect, useRef, useState } from 'react';
+import { useSelector } from 'react-redux';
+import Edit from '../assets/edit.svg';
+import Exit from '../assets/exit.svg';
+import Message from '../assets/message.svg';
+import CheckMark from '../assets/checkmark.svg';
+import Trash from '../assets/trash.svg';
+
+import { selectConversationId } from '../preferences/preferenceSlice';
+import { useOutsideAlerter } from '../hooks';
+
+interface ConversationProps {
+  name: string;
+  id: string;
+}
+interface ConversationTileProps {
+  conversation: ConversationProps;
+  selectConversation: (arg1: string) => void;
+  onDeleteConversation: (arg1: string) => void;
+  onSave: ({ name, id }: ConversationProps) => void;
+}
+
+export default function ConversationTile({
+  conversation,
+  selectConversation,
+  onDeleteConversation,
+  onSave,
+}: ConversationTileProps) {
+  const conversationId = useSelector(selectConversationId);
+  const tileRef = useRef<HTMLInputElement>(null);
+
+  const [isEdit, setIsEdit] = useState(false);
+  const [conversationName, setConversationsName] = useState('');
+  useOutsideAlerter(
+    tileRef,
+    () =>
+      handleSaveConversation({
+        id: conversationId || conversation.id,
+        name: conversationName,
+      }),
+    [conversationName],
+  );
+
+  useEffect(() => {
+    setConversationsName(conversation.name);
+  }, [conversation.name]);
+
+  function handleEditConversation() {
+    setIsEdit(true);
+  }
+
+  function handleSaveConversation(changedConversation: ConversationProps) {
+    if (changedConversation.name.trim().length) {
+      onSave(changedConversation);
+      setIsEdit(false);
+    } else {
+      onClear();
+    }
+  }
+
+  function onClear() {
+    setConversationsName(conversation.name);
+    setIsEdit(false);
+  }
+  return (
+    <div
+      ref={tileRef}
+      onClick={() => {
+        selectConversation(conversation.id);
+      }}
+      className={`my-auto mx-4 mt-4 flex h-12 cursor-pointer items-center justify-between gap-4 rounded-3xl hover:bg-gray-100 ${
+        conversationId === conversation.id ? 'bg-gray-100' : ''
+      }`}
+    >
+      <div
+        className={`flex ${
+          conversationId === conversation.id ? 'w-[75%]' : 'w-[95%]'
+        } gap-4`}
+      >
+        <img src={Message} className="ml-2 w-5"></img>
+        {isEdit ? (
+          <input
+            autoFocus
+            type="text"
+            className="h-6 w-full px-1 text-sm font-normal leading-6 outline-[#0075FF] focus:outline-1"
+            value={conversationName}
+            onChange={(e) => setConversationsName(e.target.value)}
+          />
+        ) : (
+          <p className="my-auto overflow-hidden overflow-ellipsis whitespace-nowrap text-sm font-normal leading-6 text-eerie-black">
+            {conversationName}
+          </p>
+        )}
+      </div>
+      {conversationId === conversation.id ? (
+        <div className="flex">
+          <img
+            src={isEdit ? CheckMark : Edit}
+            alt="Edit"
+            className="mr-2 h-4 w-4 cursor-pointer hover:opacity-50"
+            id={`img-${conversation.id}`}
+            onClick={(event) => {
+              event.stopPropagation();
+              isEdit
+                ? handleSaveConversation({
+                    id: conversationId,
+                    name: conversationName,
+                  })
+                : handleEditConversation();
+            }}
+          />
+          <img
+            src={isEdit ? Exit : Trash}
+            alt="Exit"
+            className={`mr-4 ${
+              isEdit ? 'h-3 w-3' : 'h-4 w-4'
+            }mt-px  cursor-pointer hover:opacity-50`}
+            id={`img-${conversation.id}`}
+            onClick={(event) => {
+              event.stopPropagation();
+              isEdit ? onClear() : onDeleteConversation(conversation.id);
+            }}
+          />
+        </div>
+      ) : null}
+    </div>
+  );
+}