[v12] Assist UI improvements

web/packages/teleport/src/Assist/Assist.tsx

@@ -22,10 +22,11 @@ import { createPortal } from 'react-dom';
 import { useParams } from 'react-router';
 
 import { MessagesContextProvider } from 'teleport/Assist/contexts/messages';
-import { Chat } from 'teleport/Assist/Chat';
 import { ConversationsContextProvider } from 'teleport/Assist/contexts/conversations';
-import { NewChat } from 'teleport/Assist/Chat/Chat';
-import Sidebar from 'teleport/Assist/Sidebar';
+import { ConversationTitle } from 'teleport/Assist/ConversationTitle';
+import { LandingPage } from 'teleport/Assist/LandingPage';
+import { Chat } from 'teleport/Assist/Chat';
+import { Sidebar } from 'teleport/Assist/Sidebar';
 
 const Container = styled.div`
   display: flex;
@@ -55,10 +56,14 @@ export function Assist() {
           </Container>
         </MessagesContextProvider>
       ) : (
-        <NewChat />
+        <LandingPage />
       )}
 
       {createPortal(<Sidebar />, document.getElementById('assist-sidebar'))}
+      {createPortal(
+        <ConversationTitle />,
+        document.getElementById('topbar-portal')
+      )}
     </ConversationsContextProvider>
   );
 }

web/packages/teleport/src/Assist/Chat/Chat.tsx

@@ -45,7 +45,6 @@ import {
 
 import { ChatBox } from './ChatBox';
 import { ChatItem } from './ChatItem';
-import { ExampleChatItem } from './ChatItem/ChatItem';
 
 const Container = styled.div`
   flex: 1;
@@ -210,15 +209,3 @@ export function Chat(props: ChatProps) {
     </Container>
   );
 }
-
-export function NewChat() {
-  return (
-    <Container>
-      <Content>
-        <Padding>
-          <ExampleChatItem />
-        </Padding>
-      </Content>
-    </Container>
-  );
-}

web/packages/teleport/src/Assist/Chat/ChatItem/ChatItem.tsx

@@ -28,8 +28,6 @@ import { useTeleport } from 'teleport';
 
 import { getBorderRadius } from 'teleport/Assist/Chat/ChatItem/utils';
 
-import { ExampleList } from '../Examples/ExampleList';
-
 import { Author, Message, Type } from '../../services/messages';
 
 import { Timestamp } from '../Timestamp';
@@ -172,6 +170,12 @@ const Output = styled.div`
     monospace;
 `;
 
+const ErrorMessage = styled.div`
+  color: #ff6257;
+  font-size: 15px;
+  font-weight: 500;
+`;
+
 marked.setOptions({
   renderer: new marked.Renderer(),
   highlight: function (code, lang) {
@@ -239,7 +243,11 @@ export function ChatItem(props: ChatItemProps) {
                 Command ran on node{' '}
                 <strong>{props.message.content.nodeId}</strong>
               </MachineName>
-              <Output>{props.message.content.payload}</Output>
+              {props.message.content.errorMsg ? (
+                <ErrorMessage>{props.message.content.errorMsg}</ErrorMessage>
+              ) : (
+                <Output>{props.message.content.payload}</Output>
+              )}
             </CommandOutput>
           </Content>
         </Container>
@@ -286,28 +294,3 @@ export function ChatItem(props: ChatItemProps) {
     </Container>
   );
 }
-
-export function ExampleChatItem() {
-  const ctx = useTeleport();
-
-  return (
-    <Container teleport={true} isNew={false}>
-      <Content isFirstFromUser={true} isLastFromUser={true}>
-        Hey {ctx.storeUser.state.username}, I'm Teleport - a powerful tool that
-        can assist you in managing your Teleport cluster via OpenAI GPT-4.
-        <br />
-        <br />
-        Start a new chat with me on the left to get started! Here's some of the
-        things I can do:
-        <ExampleList />
-      </Content>
-      <TeleportAvatarContainer>
-        <ChatItemAvatarTeleport>
-          <ChatItemAvatarImage backgroundImage={teleport} />
-        </ChatItemAvatarTeleport>
-
-        <strong>Teleport</strong>
-      </TeleportAvatarContainer>
-    </Container>
-  );
-}

web/packages/teleport/src/Assist/Chat/Examples/ExampleItem.tsx → web/packages/teleport/src/Assist/ConversationTitle.tsx

@@ -14,33 +14,24 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import styled, { keyframes } from 'styled-components';
+import React from 'react';
+import { useParams } from 'react-router';
 
-const appear = keyframes`
-  0% {
-    opacity: 0;
-  }
+import { useConversations } from 'teleport/Assist/contexts/conversations';
 
-  100% {
-    opacity: 1;
-  }
-`;
-
-export const ExampleItem = styled.div`
-  border: 1px solid white;
-  margin-right: 20px;
-  padding: 10px 15px;
-  border-radius: 5px;
-  display: flex;
-  align-items: center;
-  font-size: 14px;
-  opacity: 0;
-  animation: ${appear} linear 0.6s forwards;
-
-  svg {
-    margin-right: 15px;
-    path {
-      fill: white;
+export function ConversationTitle() {
+  const { conversations } = useConversations();
+  const params = useParams<{ conversationId: string }>();
+
+  if (params.conversationId) {
+    const conversation = conversations.find(
+      conversation => conversation.id === params.conversationId
+    );
+
+    if (conversation) {
+      return <> - {conversation.title}</>;
     }
   }
-`;
+
+  return null;
+}