From fca9071d5233da93b10ee4c4a82c861b62b5780a Mon Sep 17 00:00:00 2001 From: Jacky Wong Date: Tue, 19 Sep 2023 12:15:48 -0400 Subject: [PATCH 01/10] [DOCSP-32954] feat(devcenter-chatbot): Fix merge issues --- chat-ui/src/App.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/chat-ui/src/App.tsx b/chat-ui/src/App.tsx index fc846549d..3342dc160 100644 --- a/chat-ui/src/App.tsx +++ b/chat-ui/src/App.tsx @@ -10,9 +10,6 @@ import { Overline, Link } from "@leafygreen-ui/typography"; import Toggle from "@leafygreen-ui/toggle"; import { Chatbot as DevCenterChatbot } from "./DevCenterChatbot"; -const prefersDarkMode = () => - window.matchMedia?.("(prefers-color-scheme: dark)").matches ?? false; - const prefersDarkMode = () => window.matchMedia?.("(prefers-color-scheme: dark)").matches ?? false; From 9b83d1cc4413a9e0583f09fef50869fc9cf2a0a7 Mon Sep 17 00:00:00 2001 From: Jacky Wong Date: Wed, 20 Sep 2023 12:01:16 -0400 Subject: [PATCH 02/10] [DOCSP-32954] feat(devcenter-chatbot): Enable Rating and Add Disclaimer --- chat-ui/package.json | 9 +- chat-ui/src/DevCenterChatbot.tsx | 80 ++++++++++++------ package-lock.json | 139 ++++++++++++++++--------------- 3 files changed, 129 insertions(+), 99 deletions(-) diff --git a/chat-ui/package.json b/chat-ui/package.json index 2913e0967..88c683514 100644 --- a/chat-ui/package.json +++ b/chat-ui/package.json @@ -90,14 +90,15 @@ "@leafygreen-ui/text-input": "^12.1.18", "@leafygreen-ui/toggle": "^10.0.15", "@leafygreen-ui/typography": "^16.5.4", - "@lg-chat/chat-disclaimer": "^1.0.1", - "@lg-chat/fixed-chat-window": "^1.1.1", - "@lg-chat/message-prompts": "^1.0.1", "@lg-chat/avatar": "^2.0.6", - "@lg-chat/chat-window": "^1.0.4", "@lg-chat/input-bar": "^3.1.3", "@lg-chat/message": "^2.0.8", "@lg-chat/message-feed": "^2.0.7", + "@lg-chat/chat-disclaimer": "^2.0.0", + "@lg-chat/chat-window": "^1.0.4", + "@lg-chat/fixed-chat-window": "^1.1.1", + "@lg-chat/leafygreen-chat-provider": "^1.0.2", + "@lg-chat/message-prompts": "^1.0.2", "@lg-chat/message-rating": "^1.1.3", "@microsoft/fetch-event-source": "^2.0.1", "buffer": "^6.0.3", diff --git a/chat-ui/src/DevCenterChatbot.tsx b/chat-ui/src/DevCenterChatbot.tsx index 47d047b9d..200320d37 100644 --- a/chat-ui/src/DevCenterChatbot.tsx +++ b/chat-ui/src/DevCenterChatbot.tsx @@ -11,10 +11,11 @@ import { LeafyGreenChatProvider } from "@lg-chat/leafygreen-chat-provider"; import { Message as LGMessage, MessageSourceType } from "@lg-chat/message"; import { MessageFeed } from "@lg-chat/message-feed"; import { MessagePrompt, MessagePrompts } from "@lg-chat/message-prompts"; +import { MessageRatingProps } from "@lg-chat/message-rating"; import { Fragment, useEffect, useState } from "react"; import { MessageData } from "./services/conversations"; import { Conversation, useConversation } from "./useConversation"; -// import { DisclaimerText } from "@lg-chat/chat-disclaimer"; +import { DisclaimerText as LGDisclaimerText } from "@lg-chat/chat-disclaimer"; const styles = { chat_trigger: css` @@ -60,13 +61,10 @@ const styles = { } } `, - disclaimer_text_container: css` - display: flex; - `, disclaimer_text: css` - & p { - text-align: center; - } + text-align: center; + margin-top: 24px; + margin-bottom: 32px; `, chatbot_input: css` padding-bottom: 1rem; @@ -203,17 +201,6 @@ export function InnerChatbot({ ); } -// const DisclaimerTextDescription = () => { -// return ( -//
-// This is a -// -// Terms of Use -// -//
-// ); -// }; - const SUGGESTED_PROMPTS = [ "How do you deploy a free cluster in Atlas?", "How do you import or migrate data into MongoDB Atlas?", @@ -293,12 +280,7 @@ function ChatbotModal({ className={styles.chat_window} > - {/* - {DisclaimerTextDescription()} - */} + {messages.map((messageData, idx) => { return ( ); })} @@ -336,12 +320,39 @@ function ChatbotModal({ ); } +const DisclaimerText = () => { + return ( + + This is a generative AI Chatbot. By interacting with it, you agree to + MongoDB's{" "} + + Terms of Use + {" "} + and{" "} + + Acceptable Use Policy. + + + ); +}; + type MessageProp = { messageData: MessageData; suggestedPrompts?: string[]; displaySuggestedPrompts: boolean; suggestedPromptOnClick: (prompt: string) => void; isLoading: boolean; + renderRating: boolean; + conversation: Conversation; }; const Message = ({ @@ -350,6 +361,8 @@ const Message = ({ displaySuggestedPrompts, suggestedPromptOnClick, isLoading, + renderRating, + conversation, }: MessageProp) => { const [suggestedPromptIdx, setSuggestedPromptIdx] = useState(-1); @@ -359,11 +372,26 @@ const Message = ({ baseFontSize={13} isSender={messageData.role === "user"} messageRatingProps={ - messageData.role === "assistant" + renderRating ? { className: styles.message_rating, description: "How was the response?", - onChange: (e) => console.log(e), + onChange: (e) => { + const value = e.target.value as MessageRatingProps["value"]; + if (!value) { + return; + } + conversation.rateMessage( + messageData.id, + value === "liked" ? true : false + ); + }, + value: + messageData.rating === undefined + ? undefined + : messageData.rating + ? "liked" + : "disliked", } : undefined } diff --git a/package-lock.json b/package-lock.json index c5d44fc14..8925dec32 100644 --- a/package-lock.json +++ b/package-lock.json @@ -721,13 +721,14 @@ "@leafygreen-ui/toggle": "^10.0.15", "@leafygreen-ui/typography": "^16.5.4", "@lg-chat/avatar": "^2.0.6", - "@lg-chat/chat-disclaimer": "^1.0.1", + "@lg-chat/chat-disclaimer": "^2.0.0", "@lg-chat/chat-window": "^1.0.4", "@lg-chat/fixed-chat-window": "^1.1.1", "@lg-chat/input-bar": "^3.1.3", + "@lg-chat/leafygreen-chat-provider": "^1.0.2", "@lg-chat/message": "^2.0.8", "@lg-chat/message-feed": "^2.0.7", - "@lg-chat/message-prompts": "^1.0.1", + "@lg-chat/message-prompts": "^1.0.2", "@lg-chat/message-rating": "^1.1.3", "@microsoft/fetch-event-source": "^2.0.1", "buffer": "^6.0.3", @@ -822,73 +823,6 @@ "node": ">=12" } }, - "chat-ui/node_modules/@lg-chat/chat-disclaimer": { - "version": "1.0.1", - "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/leafygreen-ui/@lg-chat/chat-disclaimer/-/@lg-chat/chat-disclaimer-1.0.1.tgz", - "integrity": "sha512-4vRUytAAEX8gsFL2NWe5wVRj68rym8tdt9B8CjfRKiEoII1cg1sh0G4NaZ+4aOJXdGrQWXVTWTOwEb06lza8+w==", - "dependencies": { - "@leafygreen-ui/emotion": "^4.0.4", - "@leafygreen-ui/lib": "^10.4.0", - "@leafygreen-ui/marketing-modal": "^4.1.0", - "@leafygreen-ui/tokens": "^2.2.0", - "@leafygreen-ui/typography": "^17.0.0" - } - }, - "chat-ui/node_modules/@lg-chat/chat-disclaimer/node_modules/@leafygreen-ui/lib": { - "version": "10.4.3", - "resolved": "https://registry.npmjs.org/@leafygreen-ui/lib/-/lib-10.4.3.tgz", - "integrity": "sha512-p5BtXHeQsvLnnrN0eunPFZeaMtW9z7Mbvm2WOS9lvnAySj8xZp5Vn9Y3XjyYLbPhpGVBhhOAJFP3YMxbP9DKgg==", - "dependencies": { - "@storybook/csf": "^0.1.0", - "lodash": "^4.17.21", - "prop-types": "^15.7.2" - }, - "peerDependencies": { - "react": "^17.0.0" - } - }, - "chat-ui/node_modules/@lg-chat/chat-disclaimer/node_modules/@leafygreen-ui/typography": { - "version": "17.0.1", - "resolved": "https://registry.npmjs.org/@leafygreen-ui/typography/-/typography-17.0.1.tgz", - "integrity": "sha512-hsj92VPWODCSzajFDfM5kBTD5wXAQVt7ERnUX8DfdUal8h3XsWJYvluA3QdehvDv2xS2pQeBmcCS1vWFlB+rTA==", - "dependencies": { - "@leafygreen-ui/emotion": "^4.0.7", - "@leafygreen-ui/icon": "^11.22.2", - "@leafygreen-ui/lib": "^12.0.0", - "@leafygreen-ui/palette": "^4.0.7", - "@leafygreen-ui/polymorphic": "^1.3.6", - "@leafygreen-ui/tokens": "^2.1.4" - }, - "peerDependencies": { - "@leafygreen-ui/leafygreen-provider": "^3.1.9" - } - }, - "chat-ui/node_modules/@lg-chat/chat-disclaimer/node_modules/@leafygreen-ui/typography/node_modules/@leafygreen-ui/lib": { - "version": "12.0.0", - "resolved": "https://registry.npmjs.org/@leafygreen-ui/lib/-/lib-12.0.0.tgz", - "integrity": "sha512-nhaxi4oBesnizxO0YK7XwcmiLL9U5QuN7lkZdWGDdmoJgNNL+aRju4W5vmZc7vcazSHfr3gAL+NFAGaAuopyRA==", - "dependencies": { - "@storybook/csf": "^0.1.0", - "lodash": "^4.17.21", - "prop-types": "^15.7.2" - }, - "peerDependencies": { - "react": "^17.0.0 || ^18.0.0" - } - }, - "chat-ui/node_modules/@lg-chat/chat-disclaimer/node_modules/react": { - "version": "17.0.2", - "resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz", - "integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==", - "peer": true, - "dependencies": { - "loose-envify": "^1.1.0", - "object-assign": "^4.1.1" - }, - "engines": { - "node": ">=0.10.0" - } - }, "chat-ui/node_modules/@storybook/builder-vite": { "version": "7.1.1", "dev": true, @@ -7523,6 +7457,73 @@ "react": "^17.0.0 || ^18.0.0" } }, + "node_modules/@lg-chat/chat-disclaimer": { + "version": "2.0.2", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/leafygreen-ui/@lg-chat/chat-disclaimer/-/@lg-chat/chat-disclaimer-2.0.2.tgz", + "integrity": "sha512-b0maTHMDYSPi2xDGI97J7259LpEQgsvi31luHJL1FPFqCTVB3FYcv6cegf/+t2BTQ8TBlzsubvtymQ/j7ERBHg==", + "dependencies": { + "@leafygreen-ui/emotion": "^4.0.4", + "@leafygreen-ui/lib": "^10.4.0", + "@leafygreen-ui/marketing-modal": "^4.1.0", + "@leafygreen-ui/tokens": "^2.2.0", + "@leafygreen-ui/typography": "^17.0.0" + } + }, + "node_modules/@lg-chat/chat-disclaimer/node_modules/@leafygreen-ui/lib": { + "version": "10.4.3", + "resolved": "https://registry.npmjs.org/@leafygreen-ui/lib/-/lib-10.4.3.tgz", + "integrity": "sha512-p5BtXHeQsvLnnrN0eunPFZeaMtW9z7Mbvm2WOS9lvnAySj8xZp5Vn9Y3XjyYLbPhpGVBhhOAJFP3YMxbP9DKgg==", + "dependencies": { + "@storybook/csf": "^0.1.0", + "lodash": "^4.17.21", + "prop-types": "^15.7.2" + }, + "peerDependencies": { + "react": "^17.0.0" + } + }, + "node_modules/@lg-chat/chat-disclaimer/node_modules/@leafygreen-ui/typography": { + "version": "17.0.1", + "resolved": "https://registry.npmjs.org/@leafygreen-ui/typography/-/typography-17.0.1.tgz", + "integrity": "sha512-hsj92VPWODCSzajFDfM5kBTD5wXAQVt7ERnUX8DfdUal8h3XsWJYvluA3QdehvDv2xS2pQeBmcCS1vWFlB+rTA==", + "dependencies": { + "@leafygreen-ui/emotion": "^4.0.7", + "@leafygreen-ui/icon": "^11.22.2", + "@leafygreen-ui/lib": "^12.0.0", + "@leafygreen-ui/palette": "^4.0.7", + "@leafygreen-ui/polymorphic": "^1.3.6", + "@leafygreen-ui/tokens": "^2.1.4" + }, + "peerDependencies": { + "@leafygreen-ui/leafygreen-provider": "^3.1.9" + } + }, + "node_modules/@lg-chat/chat-disclaimer/node_modules/@leafygreen-ui/typography/node_modules/@leafygreen-ui/lib": { + "version": "12.0.0", + "resolved": "https://registry.npmjs.org/@leafygreen-ui/lib/-/lib-12.0.0.tgz", + "integrity": "sha512-nhaxi4oBesnizxO0YK7XwcmiLL9U5QuN7lkZdWGDdmoJgNNL+aRju4W5vmZc7vcazSHfr3gAL+NFAGaAuopyRA==", + "dependencies": { + "@storybook/csf": "^0.1.0", + "lodash": "^4.17.21", + "prop-types": "^15.7.2" + }, + "peerDependencies": { + "react": "^17.0.0 || ^18.0.0" + } + }, + "node_modules/@lg-chat/chat-disclaimer/node_modules/react": { + "version": "17.0.2", + "resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz", + "integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==", + "peer": true, + "dependencies": { + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1" + }, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/@lg-chat/chat-window": { "version": "1.0.4", "license": "Apache-2.0", From 5b5facb01697adcd7d6b7e6b37c22c1405d444d9 Mon Sep 17 00:00:00 2001 From: Jacky Wong Date: Wed, 20 Sep 2023 12:52:35 -0400 Subject: [PATCH 03/10] [DOCSP-32954] feat(devcenter-chatbot): Add Character Count --- chat-ui/src/DevCenterChatbot.tsx | 114 +++++++++++++++++++++++++------ 1 file changed, 94 insertions(+), 20 deletions(-) diff --git a/chat-ui/src/DevCenterChatbot.tsx b/chat-ui/src/DevCenterChatbot.tsx index 200320d37..768a6c06e 100644 --- a/chat-ui/src/DevCenterChatbot.tsx +++ b/chat-ui/src/DevCenterChatbot.tsx @@ -1,21 +1,28 @@ import { css } from "@emotion/css"; -import LeafyGreenProvider from "@leafygreen-ui/leafygreen-provider"; +import LeafyGreenProvider, { + useDarkMode, +} from "@leafygreen-ui/leafygreen-provider"; import Modal from "@leafygreen-ui/modal"; +import { palette } from "@leafygreen-ui/palette"; import { ParagraphSkeleton } from "@leafygreen-ui/skeleton-loader"; import { Body, Link } from "@leafygreen-ui/typography"; import { Avatar } from "@lg-chat/avatar"; +import { DisclaimerText as LGDisclaimerText } from "@lg-chat/chat-disclaimer"; import { ChatWindow } from "@lg-chat/chat-window"; import { ChatTrigger } from "@lg-chat/fixed-chat-window"; -import { InputBar } from "@lg-chat/input-bar"; +import { + InputBar as LGInputBar, + InputBarProps as LGInputBarProps, +} from "@lg-chat/input-bar"; import { LeafyGreenChatProvider } from "@lg-chat/leafygreen-chat-provider"; import { Message as LGMessage, MessageSourceType } from "@lg-chat/message"; import { MessageFeed } from "@lg-chat/message-feed"; import { MessagePrompt, MessagePrompts } from "@lg-chat/message-prompts"; import { MessageRatingProps } from "@lg-chat/message-rating"; import { Fragment, useEffect, useState } from "react"; +import { CharacterCount } from "./InputBar"; import { MessageData } from "./services/conversations"; import { Conversation, useConversation } from "./useConversation"; -import { DisclaimerText as LGDisclaimerText } from "@lg-chat/chat-disclaimer"; const styles = { chat_trigger: css` @@ -63,7 +70,7 @@ const styles = { `, disclaimer_text: css` text-align: center; - margin-top: 24px; + margin-top: 16px; margin-bottom: 32px; `, chatbot_input: css` @@ -102,6 +109,26 @@ const styles = { transition: 'opacity 300ms ease-in', opacity: 1, `, + chatbot_input_area: css` + position: relative; + width: 100%; + display: flex; + flex-direction: column; + gap: 0.5rem; + margin-top: 1rem; + padding-left: 32px; + padding-right: 32px; + padding-top: 0.5rem; + padding-bottom: 1rem; + `, + chatbot_input_error_border: css` + > div { + > div { + border-color: ${palette.red.base} !important; + border-width: 2px !important; + } + } + `, }; export type ChatbotProps = { @@ -266,6 +293,10 @@ function ChatbotModal({ ); }; + const promptIsTooLong = () => { + return inputBarValue.length > MAX_INPUT_CHARACTERS; + }; + return ( handleSubmit(inputBarValue)} + hasError={promptIsTooLong()} disabled={!!conversation.error} - disableSend={awaitingReply} + disableSend={awaitingReply || promptIsTooLong()} textareaProps={{ value: inputBarValue, onChange: (e) => { @@ -320,27 +353,68 @@ function ChatbotModal({ ); } +const MAX_INPUT_CHARACTERS = 300; +interface InputBarProps extends LGInputBarProps { + inputBarValue: string; + hasError: boolean; +} + +const InputBar = (props: InputBarProps) => { + const { inputBarValue, hasError, ...LGInputBarProps } = props; + const { darkMode } = useDarkMode(); + + return ( +
+ +
+ + This is an experimental generative AI chatbot. All information should + be verified prior to use. + + +
+
+ ); +}; + const DisclaimerText = () => { return ( - This is a generative AI Chatbot. By interacting with it, you agree to - MongoDB's{" "} - - Terms of Use - {" "} - and{" "} - - Acceptable Use Policy. - + + This is a generative AI Chatbot. By interacting with it, you agree to + MongoDB's{" "} + + Terms of Use + {" "} + and{" "} + + Acceptable Use Policy. + + ); }; From 3684a92d3b77d8e0f6781e1e9cb446e97bc47263 Mon Sep 17 00:00:00 2001 From: Jacky Wong Date: Wed, 20 Sep 2023 13:33:29 -0400 Subject: [PATCH 04/10] [DOCSP-32954] feat(devcenter-chatbot): Pass user as prop --- chat-ui/src/DevCenterChatbot.tsx | 17 ++++++++++++++--- chat-ui/src/UserContext.tsx | 20 ++++++++++++++++++++ 2 files changed, 34 insertions(+), 3 deletions(-) create mode 100644 chat-ui/src/UserContext.tsx diff --git a/chat-ui/src/DevCenterChatbot.tsx b/chat-ui/src/DevCenterChatbot.tsx index 768a6c06e..5b42fa90c 100644 --- a/chat-ui/src/DevCenterChatbot.tsx +++ b/chat-ui/src/DevCenterChatbot.tsx @@ -23,6 +23,7 @@ import { Fragment, useEffect, useState } from "react"; import { CharacterCount } from "./InputBar"; import { MessageData } from "./services/conversations"; import { Conversation, useConversation } from "./useConversation"; +import { UserProvider, User, useUser } from "./UserContext"; const styles = { chat_trigger: css` @@ -137,14 +138,18 @@ export type ChatbotProps = { shouldStream?: boolean; suggestedPrompts?: string[]; startingMessage?: string; + user?: User; }; export function Chatbot(props: ChatbotProps) { - const { darkMode, ...InnerChatbotProps } = props; + const { darkMode, user, ...InnerChatbotProps } = props; // TODO: Use ConversationProvider + // TODO: Add UserProvider when we have more substantial data in future return ( - + + + ); } @@ -439,6 +444,7 @@ const Message = ({ conversation, }: MessageProp) => { const [suggestedPromptIdx, setSuggestedPromptIdx] = useState(-1); + const user = useUser(); return ( @@ -470,7 +476,12 @@ const Message = ({ : undefined } avatar={ - + } sourceType={isLoading ? undefined : MessageSourceType.Markdown} markdownProps={{ diff --git a/chat-ui/src/UserContext.tsx b/chat-ui/src/UserContext.tsx new file mode 100644 index 000000000..e1987a484 --- /dev/null +++ b/chat-ui/src/UserContext.tsx @@ -0,0 +1,20 @@ +import { useContext, createContext, ReactNode } from "react"; + +export type User = { + name: string; +}; + +const UserContext = createContext(undefined); + +type UserProviderProps = { + children: ReactNode; + user?: User; +}; + +export function UserProvider({ children, user }: UserProviderProps) { + return {children}; +} + +export function useUser() { + return useContext(UserContext); +} From 99619e9500ea467d1593a3efca4195fd983fc658 Mon Sep 17 00:00:00 2001 From: Jacky Wong Date: Wed, 20 Sep 2023 14:06:49 -0400 Subject: [PATCH 05/10] [DOCSP-32954] feat(devcenter-chatbot): Remove comment --- chat-ui/src/DevCenterChatbot.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/chat-ui/src/DevCenterChatbot.tsx b/chat-ui/src/DevCenterChatbot.tsx index 5b42fa90c..1d3df6ab1 100644 --- a/chat-ui/src/DevCenterChatbot.tsx +++ b/chat-ui/src/DevCenterChatbot.tsx @@ -144,7 +144,6 @@ export type ChatbotProps = { export function Chatbot(props: ChatbotProps) { const { darkMode, user, ...InnerChatbotProps } = props; // TODO: Use ConversationProvider - // TODO: Add UserProvider when we have more substantial data in future return ( From 102f28ba49e82e0dcc845e44cc0cb96075a558f1 Mon Sep 17 00:00:00 2001 From: Jacky Wong Date: Wed, 20 Sep 2023 14:59:44 -0400 Subject: [PATCH 06/10] [DOCSP-32954] feat(devcenter-chatbot): Fix Test Issue --- chat-ui/src/DevCenterChatbot.tsx | 3 ++- chat-ui/src/UserContext.tsx | 5 +---- chat-ui/src/types.ts | 3 +++ 3 files changed, 6 insertions(+), 5 deletions(-) create mode 100644 chat-ui/src/types.ts diff --git a/chat-ui/src/DevCenterChatbot.tsx b/chat-ui/src/DevCenterChatbot.tsx index 1d3df6ab1..5f3be3613 100644 --- a/chat-ui/src/DevCenterChatbot.tsx +++ b/chat-ui/src/DevCenterChatbot.tsx @@ -21,9 +21,10 @@ import { MessagePrompt, MessagePrompts } from "@lg-chat/message-prompts"; import { MessageRatingProps } from "@lg-chat/message-rating"; import { Fragment, useEffect, useState } from "react"; import { CharacterCount } from "./InputBar"; +import { UserProvider, useUser } from "./UserContext"; import { MessageData } from "./services/conversations"; +import { User } from "./types"; import { Conversation, useConversation } from "./useConversation"; -import { UserProvider, User, useUser } from "./UserContext"; const styles = { chat_trigger: css` diff --git a/chat-ui/src/UserContext.tsx b/chat-ui/src/UserContext.tsx index e1987a484..533140170 100644 --- a/chat-ui/src/UserContext.tsx +++ b/chat-ui/src/UserContext.tsx @@ -1,8 +1,5 @@ import { useContext, createContext, ReactNode } from "react"; - -export type User = { - name: string; -}; +import { User } from "./types"; const UserContext = createContext(undefined); diff --git a/chat-ui/src/types.ts b/chat-ui/src/types.ts new file mode 100644 index 000000000..a5c0aafed --- /dev/null +++ b/chat-ui/src/types.ts @@ -0,0 +1,3 @@ +export type User = { + name: string; +}; From 9243c1f6a998c760ace4007b57920568b369b083 Mon Sep 17 00:00:00 2001 From: Jacky Wong Date: Wed, 20 Sep 2023 15:12:36 -0400 Subject: [PATCH 07/10] [DOCSP-32954] feat(devcenter-chatbot): Fix Test Issue --- chat-ui/src/DevCenterChatbot.tsx | 3 ++- chat-ui/src/UserContext.tsx | 17 ----------------- chat-ui/src/UserProvider.tsx | 13 +++++++++++++ chat-ui/src/useUser.ts | 10 ++++++++++ 4 files changed, 25 insertions(+), 18 deletions(-) delete mode 100644 chat-ui/src/UserContext.tsx create mode 100644 chat-ui/src/UserProvider.tsx create mode 100644 chat-ui/src/useUser.ts diff --git a/chat-ui/src/DevCenterChatbot.tsx b/chat-ui/src/DevCenterChatbot.tsx index 5f3be3613..cfb6297ca 100644 --- a/chat-ui/src/DevCenterChatbot.tsx +++ b/chat-ui/src/DevCenterChatbot.tsx @@ -21,7 +21,8 @@ import { MessagePrompt, MessagePrompts } from "@lg-chat/message-prompts"; import { MessageRatingProps } from "@lg-chat/message-rating"; import { Fragment, useEffect, useState } from "react"; import { CharacterCount } from "./InputBar"; -import { UserProvider, useUser } from "./UserContext"; +import { UserProvider } from "./UserProvider"; +import { useUser } from "./useUser"; import { MessageData } from "./services/conversations"; import { User } from "./types"; import { Conversation, useConversation } from "./useConversation"; diff --git a/chat-ui/src/UserContext.tsx b/chat-ui/src/UserContext.tsx deleted file mode 100644 index 533140170..000000000 --- a/chat-ui/src/UserContext.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import { useContext, createContext, ReactNode } from "react"; -import { User } from "./types"; - -const UserContext = createContext(undefined); - -type UserProviderProps = { - children: ReactNode; - user?: User; -}; - -export function UserProvider({ children, user }: UserProviderProps) { - return {children}; -} - -export function useUser() { - return useContext(UserContext); -} diff --git a/chat-ui/src/UserProvider.tsx b/chat-ui/src/UserProvider.tsx new file mode 100644 index 000000000..e4315076a --- /dev/null +++ b/chat-ui/src/UserProvider.tsx @@ -0,0 +1,13 @@ +import { createContext, ReactNode } from "react"; +import { User } from "./useUser"; + +export const UserContext = createContext(undefined); + +type UserProviderProps = { + children: ReactNode; + user?: User; +}; + +export function UserProvider({ children, user }: UserProviderProps) { + return {children}; +} diff --git a/chat-ui/src/useUser.ts b/chat-ui/src/useUser.ts new file mode 100644 index 000000000..cfa99d7ef --- /dev/null +++ b/chat-ui/src/useUser.ts @@ -0,0 +1,10 @@ +import { useContext } from "react"; +import { UserContext } from "./UserProvider"; + +export type User = { + name: string; +}; + +export function useUser() { + return useContext(UserContext); +} From 42852014314b422aa6a30fd82085bd9411232f7d Mon Sep 17 00:00:00 2001 From: Jacky Wong Date: Thu, 21 Sep 2023 10:56:29 -0400 Subject: [PATCH 08/10] [DOCSP-32954] feat(devcenter-chatbot): Remove unnecessary files --- chat-ui/src/types.ts | 3 --- 1 file changed, 3 deletions(-) delete mode 100644 chat-ui/src/types.ts diff --git a/chat-ui/src/types.ts b/chat-ui/src/types.ts deleted file mode 100644 index a5c0aafed..000000000 --- a/chat-ui/src/types.ts +++ /dev/null @@ -1,3 +0,0 @@ -export type User = { - name: string; -}; From b7e1d62700fa15e4b7d875df066fafe5e8165017 Mon Sep 17 00:00:00 2001 From: Jacky Wong Date: Thu, 21 Sep 2023 11:03:17 -0400 Subject: [PATCH 09/10] [DOCSP-32954] feat(devcenter-chatbot): Fix Test Issue --- chat-ui/src/DevCenterChatbot.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/chat-ui/src/DevCenterChatbot.tsx b/chat-ui/src/DevCenterChatbot.tsx index cfb6297ca..1ef1dee93 100644 --- a/chat-ui/src/DevCenterChatbot.tsx +++ b/chat-ui/src/DevCenterChatbot.tsx @@ -22,10 +22,9 @@ import { MessageRatingProps } from "@lg-chat/message-rating"; import { Fragment, useEffect, useState } from "react"; import { CharacterCount } from "./InputBar"; import { UserProvider } from "./UserProvider"; -import { useUser } from "./useUser"; import { MessageData } from "./services/conversations"; -import { User } from "./types"; import { Conversation, useConversation } from "./useConversation"; +import { User, useUser } from "./useUser"; const styles = { chat_trigger: css` From c4e09747921a08605be6df27f1557d8ce7be8ad0 Mon Sep 17 00:00:00 2001 From: Jacky Wong Date: Thu, 21 Sep 2023 15:31:47 -0400 Subject: [PATCH 10/10] Resolve merge issue --- chat-ui/src/Chatbot.tsx | 11 ++--------- 1 file changed, 2 insertions(+), 9 deletions(-) diff --git a/chat-ui/src/Chatbot.tsx b/chat-ui/src/Chatbot.tsx index 8d26a498b..e635d7025 100644 --- a/chat-ui/src/Chatbot.tsx +++ b/chat-ui/src/Chatbot.tsx @@ -49,17 +49,13 @@ const styles = { box-sizing: border-box; } }`, - chatbot_input_area: css` + chatbot_input: css` position: relative; width: 100%; display: flex; flex-direction: column; gap: 0.5rem; margin-top: 1rem; - padding-left: 32px; - padding-right: 32px; - padding-top: 0.5rem; - padding-bottom: 1rem; `, chatbot_input_error_border: css` > div { @@ -535,10 +531,7 @@ function ChatbotModal({ })} ) : null} -
+
{conversation.error ? ( ) : null}