Skip to content

Commit

Permalink
Minor UI fixes (#813)
Browse files Browse the repository at this point in the history
* 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
  • Loading branch information
anastasiya1155 authored Aug 4, 2023
1 parent 17c872f commit 96cf8a5
Show file tree
Hide file tree
Showing 18 changed files with 81 additions and 97 deletions.
9 changes: 0 additions & 9 deletions apps/desktop/src/global.d.ts
Original file line number Diff line number Diff line change
@@ -1,10 +1 @@
export {};

declare global {
interface Array<T> {
findLastIndex(
predicate: (value: T, index: number, obj: T[]) => unknown,
thisArg?: any,
): number;
}
}
2 changes: 0 additions & 2 deletions apps/desktop/src/main.tsx
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
4 changes: 2 additions & 2 deletions client/src/components/Chat/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,6 @@ const Chat = () => {
setShowTooltip,
} = useContext(ChatContext.Setters);
const {
navigateConversationResults,
navigateRepoPath,
navigatedItem,
navigateArticleResponse,
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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];
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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) =>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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>
);
Expand Down
2 changes: 1 addition & 1 deletion client/src/components/IpynbRenderer/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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} />;
})}
Expand Down
4 changes: 3 additions & 1 deletion client/src/components/PageTemplate/Subheader.tsx
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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',
);
Expand Down
4 changes: 3 additions & 1 deletion client/src/context/providers/AppNavigationProvider.tsx
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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 ||
Expand Down
9 changes: 0 additions & 9 deletions client/src/global.d.ts
Original file line number Diff line number Diff line change
@@ -1,10 +1 @@
export {};

declare global {
interface Array<T> {
findLastIndex(
predicate: (value: T, index: number, obj: T[]) => unknown,
thisArg?: any,
): number;
}
}
11 changes: 9 additions & 2 deletions client/src/hooks/useResizeableWidth.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useState } from 'react';
import React, { useCallback, useState } from 'react';
import { getPlainFromStorage, savePlainToStorage } from '../services/storage';

const useResizeableWidth = (
Expand Down Expand Up @@ -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;
2 changes: 0 additions & 2 deletions client/src/main.tsx
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
37 changes: 19 additions & 18 deletions client/src/mappers/conversation.ts
Original file line number Diff line number Diff line change
@@ -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);
};
2 changes: 1 addition & 1 deletion client/src/pages/ArticleResponse/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
5 changes: 3 additions & 2 deletions client/src/pages/ResultFull/FileExplanation.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand All @@ -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>
);
Expand Down
2 changes: 1 addition & 1 deletion client/src/pages/Results/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
44 changes: 0 additions & 44 deletions client/src/utils/polyfills.ts

This file was deleted.

32 changes: 32 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 4 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand Down

0 comments on commit 96cf8a5

Please sign in to comment.