[v13] [Assist] New UI & rewrite (#27791)

* [Assist] New UI & rewrite (#27629)

* Rewrite Assist & implement a new UI

* Use the node name from the API

* Code review comments

* Address UI code review comments

* Add some tests for the service

* Rename "MiniAssit" to "Assist"

* Impose a max height for the floating assist for small windows

* Add missing license header

* Update web/packages/teleport/src/Assist/Conversation/ExecuteRemoteCommandEntry.tsx

Co-authored-by: Lisa Kim <lisa@goteleport.com>

* Code review improvements

* Only use stopPropagation so links still work and assist does not close

* Make errors only show when error message isn't null

* Add websocket refresh to avoid session expirations

* Mark the conversation as not streaming when assist returns a full message

* Improvements to error handling and icon spacing

* Use encodeChallengeResponse to match the MFA backend changes

* Run prettier

* Usability improvements

---------

Co-authored-by: Lisa Kim <lisa@goteleport.com>

* Update the proto encoding for MFA

---------

Co-authored-by: Lisa Kim <lisa@goteleport.com>

web/packages/design/src/SVGIcon/Brain.tsx

@@ -0,0 +1,31 @@
+/*
+Copyright 2023 Gravitational, Inc.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+
+import { SVGIcon } from './SVGIcon';
+
+import type { SVGIconProps } from './common';
+
+export function BrainIcon({ size = 22, fill }: SVGIconProps) {
+  return (
+    <SVGIcon fill={fill} size={size} viewBox="0 0 20 20">
+      <path d="M12.5 7a.5.5 0 0 1 0-1c.276 0 .5-.224.5-.5a.5.5 0 0 1 1 0c0 .827-.673 1.5-1.5 1.5zM12.585 15a.499.499 0 0 1-.471-.333 2.002 2.002 0 0 1 2.553-2.553.5.5 0 0 1-.333.943 1.002 1.002 0 0 0-1.276 1.276.5.5 0 0 1-.472.667z" />
+      <path d="M19 10.5c0-2.459-.764-4.801-2.21-6.779a3.998 3.998 0 0 0-2.339-2.45 3 3 0 0 0-4.951.072 3 3 0 0 0-4.951-.072 3.993 3.993 0 0 0-2.339 2.45A11.406 11.406 0 0 0 0 10.5c0 .655.056 1.312.166 1.953A7.175 7.175 0 0 0 0 14c0 1.584.508 3.078 1.431 4.206C2.378 19.363 3.645 20 5 20c.263 0 .527-.025.785-.073A3.501 3.501 0 0 0 9.5 18.301a3.501 3.501 0 0 0 3.715 1.626c.259.049.522.073.785.073 1.355 0 2.622-.637 3.569-1.794C18.492 17.078 19 15.584 19 14c0-.531-.056-1.049-.166-1.547.11-.641.166-1.297.166-1.953zM6.5 19A2.503 2.503 0 0 1 4 16.5a.5.5 0 0 0-1 0c0 .876.323 1.677.857 2.292C2.207 18.176 1 16.261 1 14c0-1.158.326-2.288.917-3.181a.5.5 0 0 0-.834-.552l-.082.127a10.429 10.429 0 0 1 1.087-4.557 3.976 3.976 0 0 0 1.055 1.962.499.499 0 1 0 .714-.7 2.998 2.998 0 0 1 .153-4.345 3.015 3.015 0 0 0 .05.846.5.5 0 0 0 .98-.198A2.002 2.002 0 0 1 7 1.001c1.103 0 2 .897 2 2v6.766a2.987 2.987 0 0 0-2.604-.705.5.5 0 0 0 .2.98A2.002 2.002 0 0 1 9 12.001v4.5c0 1.378-1.122 2.5-2.5 2.5zm8.643-.209A3.486 3.486 0 0 0 16 16.5a.5.5 0 0 0-1 0c0 1.378-1.122 2.5-2.5 2.5S10 17.878 10 16.5V12a2.002 2.002 0 0 1 2.404-1.959.5.5 0 0 0 .2-.98A2.987 2.987 0 0 0 10 9.766V3c0-1.103.897-2 2-2a2.002 2.002 0 0 1 1.96 2.401.499.499 0 1 0 .98.198 3.005 3.005 0 0 0 .05-.845 3 3 0 0 1 .153 4.345.5.5 0 0 0 .714.7 3.972 3.972 0 0 0 1.055-1.962 10.425 10.425 0 0 1 1.087 4.557 5.51 5.51 0 0 0-.082-.127.5.5 0 0 0-.834.552c.591.893.917 2.023.917 3.181 0 2.26-1.206 4.175-2.857 4.791z" />
+      <path d="M6.5 7C5.673 7 5 6.327 5 5.5a.5.5 0 0 1 1 0c0 .276.224.5.5.5a.5.5 0 0 1 0 1zM6.415 15a.5.5 0 0 1-.472-.667 1.002 1.002 0 0 0-1.276-1.276.5.5 0 1 1-.333-.943 2.002 2.002 0 0 1 2.553 2.553.5.5 0 0 1-.471.333z" />
+    </SVGIcon>
+  );
+}

web/packages/teleport/src/Assist/Chat/ChatItem/utils.ts → web/packages/design/src/SVGIcon/Check.tsx

@@ -14,14 +14,16 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-export function getBorderRadius(
-  isTeleport: boolean,
-  isFirst: boolean,
-  isLast: boolean
-) {
-  if (isTeleport) {
-    return `${isFirst ? '14px' : '5px'} 14px 14px ${isLast ? '14px' : '5px'}`;
-  }
+import React from 'react';
 
-  return `14px ${isFirst ? '14px' : '5px'} ${isLast ? '14px' : '5px'} 14px`;
+import { SVGIcon } from './SVGIcon';
+
+import type { SVGIconProps } from './common';
+
+export function CheckIcon({ size = 32, fill }: SVGIconProps) {
+  return (
+    <SVGIcon fill={fill} size={size} viewBox="0 0 32 32">
+      <path d="M27 4 12 19l-7-7-5 5 12 12L32 9z" />
+    </SVGIcon>
+  );
 }

web/packages/teleport/src/Assist/ConversationTitle.tsx → web/packages/design/src/SVGIcon/Expand.tsx

@@ -15,23 +15,15 @@ limitations under the License.
 */
 
 import React from 'react';
-import { useParams } from 'react-router';
 
-import { useConversations } from 'teleport/Assist/contexts/conversations';
+import { SVGIcon } from './SVGIcon';
 
-export function ConversationTitle() {
-  const { conversations } = useConversations();
-  const params = useParams<{ conversationId: string }>();
+import type { SVGIconProps } from './common';
 
-  if (params.conversationId) {
-    const conversation = conversations.find(
-      conversation => conversation.id === params.conversationId
-    );
-
-    if (conversation) {
-      return <>{conversation.title}</>;
-    }
-  }
-
-  return null;
+export function ExpandIcon({ size = 16, fill }: SVGIconProps) {
+  return (
+    <SVGIcon fill={fill} size={size} viewBox="0 0 16 16">
+      <path d="m15 5-1.284-1.284-3.29 3.29-1.432-1.432 3.29-3.29L11 1a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1zM5 15a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1v-3a1 1 0 0 1 1-1l1.284 1.284 3.29-3.29 1.432 1.432-3.29 3.291L5 15z" />
+    </SVGIcon>
+  );
 }

web/packages/teleport/src/Assist/Chat/ChatItem/index.ts → web/packages/design/src/SVGIcon/Popup.tsx

@@ -14,4 +14,16 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-export { ChatItem } from './ChatItem';
+import React from 'react';
+
+import { SVGIcon } from './SVGIcon';
+
+import type { SVGIconProps } from './common';
+
+export function PopupIcon({ size = 20, fill }: SVGIconProps) {
+  return (
+    <SVGIcon fill={fill} size={size} viewBox="0 0 20 20">
+      <path d="M16 2H7.979C6.88 2 6 2.88 6 3.98V12c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 10H8V4h8v8zM4 10H2v6c0 1.1.9 2 2 2h6v-2H4v-6z" />
+    </SVGIcon>
+  );
+}

web/packages/design/src/SVGIcon/Sidebar.tsx

@@ -0,0 +1,29 @@
+/*
+Copyright 2023 Gravitational, Inc.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+
+import { SVGIcon } from './SVGIcon';
+
+import type { SVGIconProps } from './common';
+
+export function SidebarIcon({ size = 24, fill }: SVGIconProps) {
+  return (
+    <SVGIcon fill={fill} size={size} viewBox="0 0 24 24">
+      <path d="M5 2a2.997 2.997 0 0 0-3 3v14a2.997 2.997 0 0 0 3 3h14a2.997 2.997 0 0 0 3-3V5a2.997 2.997 0 0 0-3-3zm5 18V4h9c.276 0 .525.111.707.293S20 4.724 20 5v14c0 .276-.111.525-.293.707S19.276 20 19 20zM8 4v16H5c-.276 0-.525-.111-.707-.293S4 19.276 4 19V5c0-.276.111-.525.293-.707S4.724 4 5 4z" />
+    </SVGIcon>
+  );
+}

web/packages/design/src/SVGIcon/index.ts

@@ -21,7 +21,9 @@ export { ApplicationsIcon } from './Applications';
 export { AuditLogIcon } from './AuditLog';
 export { AuthConnectorsIcon } from './AuthConnectors';
 export { AWSIcon } from './AWS';
+export { BrainIcon } from './Brain';
 export { ChatIcon } from './Chat';
+export { CheckIcon } from './Check';
 export { ChevronDownIcon } from './ChevronDown';
 export { ChevronRightIcon } from './ChevronRight';
 export { CloseIcon } from './Close';
@@ -30,6 +32,7 @@ export { DesktopsIcon } from './Desktops';
 export { DevicesIcon } from './Devices';
 export { DownloadsIcon } from './Downloads';
 export { EditIcon } from './Edit';
+export { ExpandIcon } from './Expand';
 export { ExternalLinkIcon } from './ExternalLink';
 export { IntegrationsIcon } from './Integrations';
 export { KubernetesIcon } from './Kubernetes';
@@ -39,13 +42,15 @@ export { LogoutIcon } from './Logout';
 export { ManageClustersIcon } from './ManageClusters';
 export { OpenAIIcon } from './OpenAI';
 export { PlusIcon } from './Plus';
+export { PopupIcon } from './Popup';
 export { RemoteCommandIcon } from './RemoteCommand';
 export { RolesIcon } from './Roles';
 export { RunIcon } from './Run';
 export { SearchIcon } from './Search';
 export { ServerIcon } from './Server';
 export { ServersIcon } from './Servers';
 export { SessionRecordingsIcon } from './SessionRecordings';
+export { SidebarIcon } from './Sidebar';
 export { SupportIcon } from './Support';
 export { TrustedClustersIcon } from './TrustedClusters';
 export { UpgradeIcon } from './Upgrade';

web/packages/shared/package.json

@@ -21,9 +21,11 @@
     "react": "^16.8.4",
     "react-day-picker": "7.3.2",
     "react-dom": "^16.8.4",
+    "react-markdown": "^8.0.7",
     "react-router": "5.1.1",
     "react-router-dom": "5.1.1",
     "react-select": "^3.0.8",
+    "remark-gfm": "^3.0.1",
     "tslib": "^2.4.0",
     "whatwg-fetch": "^3.0.0",
     "@gravitational/design": "1.0.0"