fix: minor UX issues for Chat (opensearch-project#11408)

* fix: minor UX issues for Chat

Signed-off-by: SuZhou-Joe <suzhou@amazon.com>

* Changeset file for PR opensearch-project#11408 created/updated

* fix: UT

Signed-off-by: SuZhou-Joe <suzhou@amazon.com>

* feat: address comment

Signed-off-by: SuZhou-Joe <suzhou@amazon.com>

---------

Signed-off-by: SuZhou-Joe <suzhou@amazon.com>
Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>

Author: SuZhou-Joe

changelogs/fragments/11408.yml

@@ -0,0 +1,2 @@
+fix:
+- Minor UX issues for Chat ([#11408](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/11408))

src/plugins/chat/public/components/chat_container.scss

@@ -17,3 +17,7 @@
     margin: 0 auto;
   }
 }
+
+.chat-sidecar {
+  border-left: 1px solid $euiBorderColor;
+}

src/plugins/chat/public/components/error_row.tsx

@@ -21,7 +21,7 @@ export const ErrorRow: React.FC<ErrorRowProps> = ({ error }) => {
       <div className="errorRow__content">
         <div className="errorRow__info">
           <EuiText size="s" style={{ fontWeight: 600, color: '#BD271E' }}>
-            System Error
+            Something went wrong
           </EuiText>
         </div>
         <div className="errorRow__message">

src/plugins/chat/public/services/ag_ui_agent.test.ts

@@ -87,6 +87,7 @@ describe('AgUiAgent', () => {
       const mockResponse = {
         ok: false,
         status: 500,
+        text: jest.fn().mockResolvedValue(''),
       };
 
       mockFetch.mockResolvedValue(mockResponse as any);
@@ -96,10 +97,10 @@ describe('AgUiAgent', () => {
       observable.subscribe({
         next: (event) => {
           expect(event.type).toBe(EventType.RUN_ERROR);
-          expect(event.message).toBe('HTTP error! status: 500');
+          expect(event.message).toBe('Request failed with status 500');
         },
         error: (error) => {
-          expect(error.message).toBe('HTTP error! status: 500');
+          expect(error.message).toBe('Request failed with status 500');
           done();
         },
       });

src/plugins/chat/public/services/ag_ui_agent.ts

@@ -62,7 +62,18 @@ export class AgUiAgent {
       })
         .then(async (response) => {
           if (!response.ok) {
-            throw new Error(`HTTP error! status: ${response.status}`);
+            const errorText = await response.text();
+            let errorMessage = `Request failed with status ${response.status}`;
+
+            try {
+              const errorBody = JSON.parse(errorText);
+              const reason = errorBody.error?.reason || errorBody.message || errorText;
+              errorMessage = reason ? `${reason} (Status: ${response.status})` : errorMessage;
+            } catch {
+              errorMessage = errorText ? `${errorText} (Status: ${response.status})` : errorMessage;
+            }
+
+            throw new Error(errorMessage);
           }
 
           const reader = response.body?.getReader();

src/plugins/data/public/ui/query_string_input/_query_bar.scss

@@ -84,6 +84,10 @@
     flex-grow: 0 !important;
     flex-basis: auto !important;
 
+    > div {
+      width: auto;
+    }
+
     &.osdQueryBar__datePickerWrapper-isHidden {
       width: 0;
       overflow: hidden;

src/plugins/dev_tools/public/dev_tools_icon.tsx

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useRef, useCallback, useState, useEffect } from 'react';
+import React, { useRef, useCallback, useState, useEffect, useMemo } from 'react';
 import {
   EuiButtonIcon,
   EuiFlexGroup,
@@ -37,6 +37,14 @@ export function DevToolsIcon({
 }) {
   const [modalVisible, setModalVisible] = useState(false);
   const [devToolTab, setDevToolTab] = useState('');
+  const [sidecarPaddingRight, setSidecarPaddingRight] = useState('0px');
+
+  useEffect(() => {
+    const subscription = core.overlays.sidecar.getSidecarConfig$().subscribe((config) => {
+      setSidecarPaddingRight(config?.dockedMode === 'right' ? `${config.paddingSize}px` : '0px');
+    });
+    return () => subscription.unsubscribe();
+  }, [core.overlays.sidecar]);
 
   // Use refs to avoid closure issues
   const modalVisibleRef = useRef(modalVisible);
@@ -103,9 +111,36 @@ export function DevToolsIcon({
     };
   }, [modalVisible, core.keyboardShortcut, closeModal]);
 
-  const closeModalVisible = () => {
+  const closeModalVisible = useCallback(() => {
     setModalVisible(false);
-  };
+  }, []);
+
+  const memoizedMainApp = useMemo(
+    () => (
+      <MainApp
+        devTools={devTools}
+        savedObjects={core.savedObjects}
+        notifications={core.notifications}
+        dataSourceEnabled={!!deps.dataSource}
+        dataSourceManagement={deps.dataSourceManagement}
+        useUpdatedUX
+        setMenuMountPoint={setMountPoint}
+        RouterComponent={MemoryRouter}
+        defaultRoute={devToolTab}
+        onManageDataSource={closeModalVisible}
+      />
+    ),
+    [
+      devTools,
+      core.savedObjects,
+      core.notifications,
+      deps.dataSource,
+      deps.dataSourceManagement,
+      setMountPoint,
+      devToolTab,
+      closeModalVisible,
+    ]
+  );
 
   return (
     <>
@@ -130,7 +165,15 @@ export function DevToolsIcon({
          * but overlay mask has a default padding bottom that prevent the modal from covering the whole page.
          */
         <EuiOverlayMask className="devToolsOverlayMask" headerZindexLocation="below">
-          <div style={{ width: '100vw', height: '100vh', maxWidth: '100vw' }}>
+          <div
+            style={{
+              width: '100vw',
+              height: '100vh',
+              maxWidth: '100vw',
+              marginRight: sidecarPaddingRight,
+              position: 'relative',
+            }}
+          >
             <EuiButtonIcon
               iconType="cross"
               onClick={() => setModalVisible(false)}
@@ -159,18 +202,7 @@ export function DevToolsIcon({
                   </EuiFlexGroup>
                 </EuiFlexItem>
                 <EuiFlexItem className="devAppWrapper">
-                  <MainApp
-                    devTools={devTools}
-                    savedObjects={core.savedObjects}
-                    notifications={core.notifications}
-                    dataSourceEnabled={!!deps.dataSource}
-                    dataSourceManagement={deps.dataSourceManagement}
-                    useUpdatedUX
-                    setMenuMountPoint={setMountPoint}
-                    RouterComponent={MemoryRouter}
-                    defaultRoute={devToolTab}
-                    onManageDataSource={closeModalVisible}
-                  />
+                  {memoizedMainApp}
                   <EuiSpacer size="s" />
                   <EuiSmallButton
                     iconType="cross"