Professional Documents
Culture Documents
import {
chatApi,
configApi,
RetrievalMode,
ChatAppResponse,
ChatAppResponseOrError,
ChatAppRequest,
ResponseMessage,
VectorFieldOptions,
GPT4VInput
} from "../../api";
import { Answer, AnswerError, AnswerLoading } from "../../components/Answer";
import { QuestionInput } from "../../components/QuestionInput";
import { ExampleList } from "../../components/Example";
import { UserChatMessage } from "../../components/UserChatMessage";
import { AnalysisPanel, AnalysisPanelTabs } from "../../components/AnalysisPanel";
import { SettingsButton } from "../../components/SettingsButton";
import { ClearChatButton } from "../../components/ClearChatButton";
import { useLogin, getToken, isLoggedIn, requireAccessControl } from
"../../authConfig";
import { VectorSettings } from "../../components/VectorSettings";
import { useMsal } from "@azure/msal-react";
import { TokenClaimsDisplay } from "../../components/TokenClaimsDisplay";
import { GPT4VSettings } from "../../components/GPT4VSettings";
configApi(token).then(config => {
setShowGPT4VOptions(config.showGPT4VOptions);
});
};
try {
const messages: ResponseMessage[] = answers.flatMap(a => [
{ content: a[0], role: "user" },
{ content: a[1].choices[0].message.content, role: "assistant" }
]);
setSelectedAnswer(index);
};
setSelectedAnswer(index);
};
return (
<div className={styles.container}>
<div className={styles.commandsContainer}>
<ClearChatButton className={styles.commandButton}
onClick={clearChat} disabled={!lastQuestionRef.current || isLoading} />
<SettingsButton className={styles.commandButton} onClick={() =>
setIsConfigPanelOpen(!isConfigPanelOpen)} />
</div>
<div className={styles.chatRoot}>
<div className={styles.chatContainer}>
{!lastQuestionRef.current ? (
<div className={styles.chatEmptyState}>
<SparkleFilled fontSize={"120px"}
primaryFill={"rgba(115, 118, 225, 1)"} aria-hidden="true" aria-label="Chat logo" />
<h1 className={styles.chatEmptyStateTitle}>Chat with
your data</h1>
<h2 className={styles.chatEmptyStateSubtitle}>Ask
anything or try an example</h2>
<ExampleList onExampleClicked={onExampleClicked}
useGPT4V={useGPT4V} />
</div>
) : (
<div className={styles.chatMessageStream}>
{isStreaming &&
answer={answerContent}
isSelected={false}
onThoughtProcessClicked={() =>
onToggleTab(AnalysisPanelTabs.ThoughtProcessTab, index)}
onSupportingContentClicked={() =>
onToggleTab(AnalysisPanelTabs.SupportingContentTab, index)}
{!isStreaming &&
answers.map((answer, index) => {
const userChatMessageContent =
answer[0]; // Content of UserChatMessage
const answerContent = answer[1]; //
Content of Answer
return (
<div key={index}>
<UserChatMessage
message={userChatMessageContent} />
<div
className={styles.chatMessageGpt}>
<Answer
isStreaming={false}
key={index}
answer={answerContent}
onThoughtProcessClicked={() =>
onToggleTab(AnalysisPanelTabs.ThoughtProcessTab, index)}
onSupportingContentClicked={() =>
onToggleTab(AnalysisPanelTabs.SupportingContentTab, index)}
{isLoading && (
<>
<UserChatMessage
message={lastQuestionRef.current} />
<div className={styles.chatMessageGptMinWidth}>
<AnswerLoading />
</div>
</>
)}
{error ? (
<>
<UserChatMessage
message={lastQuestionRef.current} />
<div className={styles.chatMessageGptMinWidth}>
<AnswerError error={error.toString()}
onRetry={() => makeApiRequest(lastQuestionRef.current)} />
</div>
</>
) : null}
<div ref={chatMessageStreamEnd} />
</div>
)}
<div className={styles.chatInput}>
<QuestionInput
clearOnSend
placeholder="Type a new question (e.g. does my plan
cover annual eye exams?)"
disabled={isLoading}
onSend={question => makeApiRequest(question)}
/>
</div>
</div>
<Panel
headerText="Configure answer generation"
isOpen={isConfigPanelOpen}
isBlocking={false}
onDismiss={() => setIsConfigPanelOpen(false)}
closeButtonAriaLabel="Close"
onRenderFooterContent={() => <DefaultButton onClick={() =>
setIsConfigPanelOpen(false)}>Close</DefaultButton>}
isFooterAtBottom={true}
>
<TextField
className={styles.chatSettingsSeparator}
defaultValue={promptTemplate}
label="Override prompt template"
multiline
autoAdjustHeight
onChange={onPromptTemplateChange}
/>
<SpinButton
className={styles.chatSettingsSeparator}
label="Retrieve this many search results:"
min={1}
max={50}
defaultValue={retrieveCount.toString()}
onChange={onRetrieveCountChange}
/>
<TextField className={styles.chatSettingsSeparator}
label="Exclude category" onChange={onExcludeCategoryChanged} />
<Checkbox
className={styles.chatSettingsSeparator}
checked={useSemanticRanker}
label="Use semantic ranker for retrieval"
onChange={onUseSemanticRankerChange}
/>
<Checkbox
className={styles.chatSettingsSeparator}
checked={useSemanticCaptions}
label="Use query-contextual summaries instead of whole
documents"
onChange={onUseSemanticCaptionsChange}
disabled={!useSemanticRanker}
/>
<Checkbox
className={styles.chatSettingsSeparator}
checked={useSuggestFollowupQuestions}
label="Suggest follow-up questions"
onChange={onUseSuggestFollowupQuestionsChange}
/>
{showGPT4VOptions && (
<GPT4VSettings
gpt4vInputs={gpt4vInput}
isUseGPT4V={useGPT4V}
updateUseGPT4V={useGPT4V => {
setUseGPT4V(useGPT4V);
}}
updateGPT4VInputs={inputs => setGPT4VInput(inputs)}
/>
)}
<VectorSettings
showImageOptions={useGPT4V && showGPT4VOptions}
updateVectorFields={(options: VectorFieldOptions[]) =>
setVectorFieldList(options)}
updateRetrievalMode={(retrievalMode: RetrievalMode) =>
setRetrievalMode(retrievalMode)}
/>
{useLogin && (
<Checkbox
className={styles.chatSettingsSeparator}
checked={useOidSecurityFilter || requireAccessControl}
label="Use oid security filter"
disabled={!isLoggedIn(client) || requireAccessControl}
onChange={onUseOidSecurityFilterChange}
/>
)}
{useLogin && (
<Checkbox
className={styles.chatSettingsSeparator}
checked={useGroupsSecurityFilter ||
requireAccessControl}
label="Use groups security filter"
disabled={!isLoggedIn(client) || requireAccessControl}
onChange={onUseGroupsSecurityFilterChange}
/>
)}
<Checkbox
className={styles.chatSettingsSeparator}
checked={shouldStream}
label="Stream chat completion responses"
onChange={onShouldStreamChange}
/>
{useLogin && <TokenClaimsDisplay />}
</Panel>
</div>
</div>
);
};