From aeafc0f410cccb3fa29f2223c62b6b52a5d913c9 Mon Sep 17 00:00:00 2001 From: Teresa Hoang Date: Thu, 16 Mar 2023 18:49:39 -0700 Subject: [PATCH 1/3] ui fit and finish --- .../apps/github-qna-webapp-react/package.json | 1 - .../src/assets/icons8-github-512.png | Bin 0 -> 11553 bytes .../src/components/GitHubRepoSelection.tsx | 113 +++++++++++------- .../src/components/QnA.tsx | 28 ++++- .../src/components/chat/ChatHistoryItem.tsx | 17 ++- .../src/components/setup/ModelConfig.tsx | 2 +- .../src/model/KeyConfig.ts | 2 +- .../apps/github-qna-webapp-react/yarn.lock | 26 +--- 8 files changed, 111 insertions(+), 78 deletions(-) create mode 100644 samples/apps/github-qna-webapp-react/src/assets/icons8-github-512.png diff --git a/samples/apps/github-qna-webapp-react/package.json b/samples/apps/github-qna-webapp-react/package.json index 8425c6ff389a..f531b8506be3 100644 --- a/samples/apps/github-qna-webapp-react/package.json +++ b/samples/apps/github-qna-webapp-react/package.json @@ -11,7 +11,6 @@ "@types/node": "^16.7.13", "@types/react": "^18.0.0", "@types/react-dom": "^18.0.0", - "openai": "^3.2.1", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", diff --git a/samples/apps/github-qna-webapp-react/src/assets/icons8-github-512.png b/samples/apps/github-qna-webapp-react/src/assets/icons8-github-512.png new file mode 100644 index 0000000000000000000000000000000000000000..49d0d273eb6a0322a23fa0bee317734b0cfe4290 GIT binary patch literal 11553 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 void; } +const enum DownloadState { + Setup = 0, + Loading = 1, + Loaded = 2, + Error = 3, +} + const GitHubProjectSelection: FC = ({ uri, keyConfig, onLoadProject, onBack }) => { const [project, setProject] = useState(); const [branch, setBranch] = useState(); - const [isLoading, setIsLoading] = useState(false); - const [isLoaded, setIsLoaded] = useState(false); - const [isLoadError, setIsLoadError] = useState(false); + const [downloadState, setDownloadState] = useState(DownloadState.Setup); const sk = useSemanticKernel(uri); const download = async () => { try { - setIsLoading(true); - setIsLoaded(false); - setIsLoadError(false); + setDownloadState(DownloadState.Loading); var result = await sk.invokeAsync( keyConfig, { @@ -38,16 +41,49 @@ const GitHubProjectSelection: FC = ({ uri, keyConfig, onLoadProject, onBa 'GitHubSkill', 'SummarizeRepository', ); - setIsLoaded(true); + setDownloadState(DownloadState.Loaded); console.log(result); } catch (e) { - setIsLoadError(true); + setDownloadState(DownloadState.Error); alert('Something went wrong.\n\nDetails:\n' + e); - } finally { - setIsLoading(false); } }; + let DownloadStatus = <>; + useEffect(() => { + switch (downloadState) { + case DownloadState.Loading: + DownloadStatus = ( + <> + + + Summarizing repository markdown files. Please wait, this can take several minutes depending + on the number of files. + + + ); + break; + case DownloadState.Loaded: + DownloadStatus = ( + <> + + + Repository markdown files summarized. You can ask questions about it on the next page. + + + ); + break; + case DownloadState.Error: + DownloadStatus = ( + <> + + There was an error summarizing the repository. Please try again. + + ); + break; + } + }, [downloadState]); + return (
Enter in the GitHub Project URL @@ -80,46 +116,39 @@ const GitHubProjectSelection: FC = ({ uri, keyConfig, onLoadProject, onBa placeholder="main" />
- {isLoading ? ( -
- - - Summarizing repository markdown files. Please wait, this can take several minutes depending on - the number of files. - -
- ) : ( - <> - )} - {isLoaded ? ( -
- - - Repository markdown files summarized. You can ask questions about it on the next page. - -
- ) : ( - <> - )} - {isLoadError ? ( -
- There was an error summarizing the repository. Please try again. -
- ) : ( - <> - )} +
+ {downloadState === DownloadState.Loading ? ( + <> + + + Downloading repository. Please wait, this can take several minutes depending on the number + of files. + + + ) : downloadState === DownloadState.Loaded ? ( + <> + + Repository downloaded. You can learn more about it on the next page. + + ) : downloadState === DownloadState.Error ? ( + <> + + There was an error downloading the repository. Please try again. + + ) : null} +