Minor UI fixes (#813)

* reset panels width on double click

* increase bottom padding to avoid chat overlap

* reset conversation cache on new messages

* use lodash instead of polyfills to fix issue with file-icons-js using for...in construction

* fix SSE protocol

apps/desktop/src/global.d.ts

@@ -1,10 +1 @@
 export {};
-
-declare global {
-  interface Array<T> {
-    findLastIndex(
-      predicate: (value: T, index: number, obj: T[]) => unknown,
-      thisArg?: any,
-    ): number;
-  }
-}

apps/desktop/src/main.tsx

@@ -1,8 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import polyfills from '../../../client/src/utils/polyfills';
 import App from './App';
-polyfills();
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>

client/src/components/Chat/index.tsx

@@ -57,7 +57,6 @@ const Chat = () => {
     setShowTooltip,
   } = useContext(ChatContext.Setters);
   const {
-    navigateConversationResults,
     navigateRepoPath,
     navigatedItem,
     navigateArticleResponse,
@@ -91,7 +90,7 @@ const Chat = () => {
       setLoading(true);
       setQueryIdToEdit('');
       setHideMessagesFrom(null);
-      const url = `${apiUrl.replace(/http(s)*:/, '')}/answer${
+      const url = `${apiUrl}/answer${
         options
           ? `/explain?relative_path=${encodeURIComponent(
               options.filePath,
@@ -200,6 +199,7 @@ const Chat = () => {
               setChatOpen(true);
               conclusionCame = true;
             }
+            conversationsCache[thread_id] = undefined; // clear cache on new answer
             setConversation((prev) => {
               const newConversation = prev?.slice(0, -1) || [];
               const lastMessage = prev?.slice(-1)[0];

client/src/components/CodeBlock/CodeFull/CodeContainerFull.tsx

@@ -122,7 +122,7 @@ const CodeContainerFull = ({
   }, [scrollToIndex, tokens.length]);
 
   return (
-    <div ref={ref} className="relative pb-44">
+    <div ref={ref} className="relative pb-60">
       {tokens.map((line, index) => {
         let highlightForLine = highlights
           ?.sort((a, b) =>

client/src/components/IdeNavigation/NavigationPanel/index.tsx

@@ -12,7 +12,7 @@ type Props = {
 
 const NavigationPanel = ({ repoName, children }: Props) => {
   const { navigateRepoPath } = useAppNavigation();
-  const { width, handleResize } = useResizeableWidth(
+  const { width, handleResize, handleReset } = useResizeableWidth(
     LEFT_SIDEBAR_WIDTH_KEY,
     360,
     false,
@@ -37,6 +37,7 @@ const NavigationPanel = ({ repoName, children }: Props) => {
       <div
         className="absolute top-0 bottom-0 right-0 w-2 border-r border-bg-border hover:border-bg-main cursor-col-resize"
         onMouseDown={handleResize}
+        onDoubleClick={handleReset}
       />
     </div>
   );

client/src/components/IpynbRenderer/index.tsx

@@ -12,7 +12,7 @@ const IpynbRenderer = ({ data }: Props) => {
     return ipynb.cells || ipynb.worksheets?.[0]?.cells || [];
   }, [data]);
   return (
-    <div className="pb-44 overflow-auto flex flex-col gap-4">
+    <div className="pb-60 overflow-auto flex flex-col gap-4">
       {cells.map((cell: IpynbCellType, i: number) => {
         return <Cell key={i} cell={cell} seq={i + 1} />;
       })}

client/src/components/PageTemplate/Subheader.tsx

@@ -1,5 +1,6 @@
 import React, { useCallback, useContext, useMemo } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
+import findLastIndex from 'lodash.findlastindex';
 import SearchInput from '../SearchInput';
 import { AppNavigationContext } from '../../context/appNavigationContext';
 import { splitPath } from '../../utils';
@@ -34,7 +35,8 @@ const Subheader = () => {
   } = useContext(AppNavigationContext);
 
   const resultsBackIndex = useMemo(() => {
-    const index = navigationHistory.findLastIndex(
+    const index = findLastIndex(
+      navigationHistory,
       (item) =>
         item.type === 'conversation-result' || item.type === 'article-response',
     );

client/src/context/providers/AppNavigationProvider.tsx

@@ -1,4 +1,5 @@
 import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import findLastIndex from 'lodash.findlastindex';
 import { buildRepoQuery } from '../../utils';
 import { NavigationItem, SearchType, UITabType } from '../../types/general';
 import { AppNavigationContext } from '../appNavigationContext';
@@ -205,7 +206,8 @@ export const AppNavigationProvider = ({
         let index = delta as number;
         if (delta === 'auto') {
           const currentItem = prevState[prevState.length - 1];
-          const lastIndex = prevState.findLastIndex(
+          const lastIndex = findLastIndex(
+            prevState,
             (item) =>
               item.type !== currentItem.type ||
               item.path !== currentItem.path ||

client/src/global.d.ts

@@ -1,10 +1 @@
 export {};
-
-declare global {
-  interface Array<T> {
-    findLastIndex(
-      predicate: (value: T, index: number, obj: T[]) => unknown,
-      thisArg?: any,
-    ): number;
-  }
-}

client/src/hooks/useResizeableWidth.ts

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import { getPlainFromStorage, savePlainToStorage } from '../services/storage';
 
 const useResizeableWidth = (
@@ -43,7 +43,14 @@ const useResizeableWidth = (
     document.body.addEventListener('mouseup', onMouseUp, true);
   };
 
-  return { width, handleResize };
+  const handleReset = useCallback((e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setWidth(defaultWidth);
+    savePlainToStorage(localStorageKey, defaultWidth);
+  }, []);
+
+  return { width, handleResize, handleReset };
 };
 
 export default useResizeableWidth;

client/src/main.tsx

@@ -1,8 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import CloudApp from './CloudApp';
-import polyfills from './utils/polyfills';
-polyfills();
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>

client/src/mappers/conversation.ts

@@ -1,26 +1,27 @@
+import flatten from 'lodash.flatten';
 import { SearchStepType } from '../types/api';
+import { ChatLoadingStep } from '../types/general';
 
 export const mapLoadingSteps = (
   searchSteps: SearchStepType[],
   t: (key: string) => string,
 ) => {
-  return searchSteps
-    .map((s) => {
-      if (s.type === 'proc') {
-        return s.content.paths.map((pa) => ({
-          ...s,
-          path: pa || '',
-          displayText:
-            t(`Reading`) +
-            ' ' +
-            `${pa?.length > 20 ? '...' : ''}${pa?.slice(-20)}`,
-        }));
-      }
-      return {
+  const arr: (ChatLoadingStep | ChatLoadingStep[])[] = searchSteps.map((s) => {
+    if (s.type === 'proc') {
+      return s.content.paths.map((pa) => ({
         ...s,
-        path: s.content.query,
-        displayText: s.content.query,
-      };
-    })
-    .flat();
+        path: pa || '',
+        displayText:
+          t(`Reading`) +
+          ' ' +
+          `${pa?.length > 20 ? '...' : ''}${pa?.slice(-20)}`,
+      }));
+    }
+    return {
+      ...s,
+      path: s.content.query,
+      displayText: s.content.query,
+    };
+  });
+  return flatten(arr);
 };

client/src/pages/ArticleResponse/index.tsx

@@ -19,7 +19,7 @@ const ArticleResponse = ({ recordId, threadId }: Props) => {
 
   return (
     <div className="overflow-auto p-8 w-screen">
-      <div className="flex-1 mx-auto max-w-3xl box-content article-response body-m text-label-base pb-44 break-word relative group-custom">
+      <div className="flex-1 mx-auto max-w-3xl box-content article-response body-m text-label-base pb-60 break-word relative group-custom">
         <MarkdownWithCode
           openFileModal={openFileModal}
           repoName={tab.repoName}

client/src/pages/ResultFull/FileExplanation.tsx

@@ -14,15 +14,15 @@ type Props = {
 
 const FileExplanation = ({ repoName, markdown }: Props) => {
   const { openFileModal } = useContext(FileModalContext);
-  const { width, handleResize } = useResizeableWidth(
+  const { width, handleResize, handleReset } = useResizeableWidth(
     RIGHT_SIDEBAR_WIDTH_KEY,
     384,
     true,
   );
 
   return (
     <div className="min-h-full w-full relative" style={{ width }}>
-      <div className="w-full p-5 body-m text-label-base pb-44 break-word overflow-auto h-full">
+      <div className="w-full p-5 body-m text-label-base pb-60 break-word overflow-auto h-full">
         <div className="article-response relative padding-start group-custom">
           <MarkdownWithCode
             openFileModal={openFileModal}
@@ -43,6 +43,7 @@ const FileExplanation = ({ repoName, markdown }: Props) => {
       <div
         className="absolute top-0 bottom-0 left-0 w-2 border-l border-bg-border hover:border-bg-main cursor-col-resize"
         onMouseDown={handleResize}
+        onDoubleClick={handleReset}
       />
     </div>
   );

client/src/pages/Results/index.tsx

@@ -84,7 +84,7 @@ const ResultsPage = ({ resultsData, loading }: Props) => {
 
   return (
     <div
-      className="p-8 flex-1 overflow-x-auto mx-auto max-w-6.5xl box-content pb-44"
+      className="p-8 flex-1 overflow-x-auto mx-auto max-w-6.5xl box-content pb-60"
       ref={ref}
     >
       <PageHeader

package.json

@@ -25,6 +25,8 @@
     "@testing-library/react": "^14.0.0",
     "@types/jest": "^29.5.3",
     "@types/lodash.debounce": "^4.0.7",
+    "@types/lodash.findlastindex": "^4.6.7",
+    "@types/lodash.flatten": "^4.4.7",
     "@types/lodash.isequal": "^4.5.6",
     "@types/lodash.throttle": "^4.1.7",
     "@types/node": "^18.11.18",
@@ -79,6 +81,8 @@
     "i18next": "^23.3.0",
     "i18next-http-backend": "^2.2.1",
     "lodash.debounce": "^4.0.8",
+    "lodash.findlastindex": "^4.6.0",
+    "lodash.flatten": "^4.4.0",
     "lodash.isequal": "^4.5.0",
     "lodash.throttle": "^4.1.1",
     "npm-run-all": "^4.1.5",