Mise à jour du composant ChatInput avec fonctionnalité d'autocomplétion

README.md

@@ -45,11 +45,10 @@ Include `react`, `react-dom`, `@emotion-core`, `@emotion-styled`, `emotion-themi
 _React must be at least version 16.8 (must have hooks)_
 
 ```html
-<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
-<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
-<script crossorigin src="https://unpkg.com/@emotion/core@10/dist/core.umd.min.js"></script>
-<script crossorigin src="https://unpkg.com/@emotion/styled@10/dist/styled.umd.min.js"></script>
-<script crossorigin src="https://unpkg.com/emotion-theming@10/dist/emotion-theming.umd.min.js"></script>
+<script crossorigin  src="https://unpkg.com/react@18.2.0/umd/react.development.js"></script>
+<script crossorigin  src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.development.js"></script>:
+<script crossorigin  src="https://unpkg.com/@emotion/react@11.11.1/dist/emotion-react.umd.min.js"></script>
+<script crossorigin  src="https://unpkg.com/@emotion/styled@11.0.0/dist/emotion-styled.umd.min.js"></script>
 <script
   crossorigin
   src="https://unpkg.com/tock-react-kit@latest/build/tock-react-kit.umd.js"

package.json

@@ -50,7 +50,7 @@
     "@storybook/testing-library": "^0.2.0",
     "@types/node": "^14.0.26",
     "@types/react-color": "^3.0.4",
-    "@types/react-dom": "^16.9.8",
+    "@types/react-dom": "^18.2.17",
     "@types/storybook__react": "^5.2.1",
     "@typescript-eslint/eslint-plugin": "^3.9.1",
     "@typescript-eslint/parser": "^3.9.1",

src/TockContext.tsx

@@ -13,16 +13,14 @@ import { retrieveUserId } from './utils';
 import { QuickReply } from './model/buttons';
 import { Message } from './model/messages';
 
-export const TockSettingsContext: Context<
-  TockSettings | undefined
-> = createContext<TockSettings | undefined>(undefined);
+export const TockSettingsContext: Context<TockSettings | undefined> =
+  createContext<TockSettings | undefined>(undefined);
 
 export const TockStateContext: Context<TockState | undefined> = createContext<
   TockState | undefined
 >(undefined);
-export const TockStateDispatch: Context<
-  Dispatch<TockAction> | undefined
-> = createContext<Dispatch<TockAction> | undefined>(undefined);
+export const TockStateDispatch: Context<Dispatch<TockAction> | undefined> =
+  createContext<Dispatch<TockAction> | undefined>(undefined);
 
 export const useTockSettings: () => TockSettings = () => {
   const settings = useContext(TockSettingsContext);
@@ -41,9 +39,8 @@ export const useTockState: () => TockState = () => {
 };
 
 export const useTockDispatch: () => Dispatch<TockAction> = () => {
-  const dispatch: Dispatch<TockAction> | undefined = useContext(
-    TockStateDispatch,
-  );
+  const dispatch: Dispatch<TockAction> | undefined =
+    useContext(TockStateDispatch);
   if (!dispatch) {
     throw new Error('useTockDispatch must be used in a TockContext');
   }

src/TockOptions.ts

@@ -18,6 +18,7 @@ export interface TockOptions extends PartialDeep<TockSettings> {
   disableSse?: boolean;
   accessibility?: TockAccessibility;
   localStorageHistory?: TockLocalStorage;
+  provideHintList: [];
 }
 
 export default TockOptions;

src/components/Card/Card.tsx

@@ -12,19 +12,17 @@ import UrlButton from '../buttons/UrlButton';
 import PostBackButton from '../buttons/PostBackButton';
 import { css, Theme } from '@emotion/react';
 
-export const CardOuter: StyledComponent<DetailedHTMLProps<
-  HTMLAttributes<HTMLLIElement>,
-  HTMLLIElement
->> = styled.li`
+export const CardOuter: StyledComponent<
+  DetailedHTMLProps<HTMLAttributes<HTMLLIElement>, HTMLLIElement>
+> = styled.li`
   max-width: ${theme('sizing.conversation.width')};
   margin: 0.5em auto;
   list-style: none;
 `;
 
-export const CardContainer: StyledComponent<DetailedHTMLProps<
-  HTMLAttributes<HTMLDivElement>,
-  HTMLDivElement
->> = styled.div`
+export const CardContainer: StyledComponent<
+  DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>
+> = styled.div`
   padding: 0.5em;
   background: ${theme('palette.background.card')};
   color: ${theme('palette.text.card')};
@@ -35,10 +33,9 @@ export const CardContainer: StyledComponent<DetailedHTMLProps<
   ${theme('overrides.card.cardContainer')};
 `;
 
-const CardTitle: StyledComponent<DetailedHTMLProps<
-  HTMLAttributes<HTMLSpanElement>,
-  HTMLSpanElement
->> = styled.span`
+const CardTitle: StyledComponent<
+  DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>
+> = styled.span`
   margin: 0.5em 0;
   font-size: 1.5em;
   font-weight: bold;
@@ -47,10 +44,9 @@ const CardTitle: StyledComponent<DetailedHTMLProps<
   ${theme('overrides.card.cardTitle')};
 `;
 
-const CardSubTitle: StyledComponent<DetailedHTMLProps<
-  HTMLAttributes<HTMLSpanElement>,
-  HTMLSpanElement
->> = styled.span`
+const CardSubTitle: StyledComponent<
+  DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>
+> = styled.span`
   margin: 0.5em 0;
   font-size: 1em;
   font-weight: bold;
@@ -59,20 +55,18 @@ const CardSubTitle: StyledComponent<DetailedHTMLProps<
   ${theme('overrides.card.cardSubTitle')};
 `;
 
-const CardImage: StyledComponent<DetailedHTMLProps<
-  ImgHTMLAttributes<HTMLImageElement>,
-  HTMLImageElement
->> = styled.img`
+const CardImage: StyledComponent<
+  DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>
+> = styled.img`
   max-width: 100%;
   max-height: 100%;
 
   ${theme('overrides.card.cardImage')};
 `;
 
-const ButtonList: StyledComponent<DetailedHTMLProps<
-  HTMLAttributes<HTMLUListElement>,
-  HTMLUListElement
->> = styled.ul`
+const ButtonList: StyledComponent<
+  DetailedHTMLProps<HTMLAttributes<HTMLUListElement>, HTMLUListElement>
+> = styled.ul`
   margin: 0.5em 0;
   list-style: none;
   padding: 0.5em 0;

src/components/Carousel/Carousel.tsx

@@ -9,19 +9,17 @@ import useArrowVisibility from './hooks/useArrowVisibility';
 import TockAccessibility from 'TockAccessibility';
 import TockTheme from '../../styles/theme';
 
-const ButtonContainer: StyledComponent<DetailedHTMLProps<
-  HTMLAttributes<HTMLLIElement>,
-  HTMLLIElement
->> = styled.li`
+const ButtonContainer: StyledComponent<
+  DetailedHTMLProps<HTMLAttributes<HTMLLIElement>, HTMLLIElement>
+> = styled.li`
   margin: 0.4em 0;
   position: relative;
   list-style: none;
 `;
 
-const ItemContainer: StyledComponent<DetailedHTMLProps<
-  HTMLAttributes<HTMLUListElement>,
-  HTMLUListElement
->> = styled.ul`
+const ItemContainer: StyledComponent<
+  DetailedHTMLProps<HTMLAttributes<HTMLUListElement>, HTMLUListElement>
+> = styled.ul`
   display: flex;
   overflow: auto;
   -webkit-overflow-scrolling: touch;
@@ -44,10 +42,9 @@ const ItemContainer: StyledComponent<DetailedHTMLProps<
   }
 `;
 
-const Previous: StyledComponent<DetailedHTMLProps<
-  HTMLAttributes<HTMLButtonElement>,
-  HTMLButtonElement
->> = styled.button`
+const Previous: StyledComponent<
+  DetailedHTMLProps<HTMLAttributes<HTMLButtonElement>, HTMLButtonElement>
+> = styled.button`
   position: absolute;
   margin: auto;
   left: 0;
@@ -77,10 +74,9 @@ const Previous: StyledComponent<DetailedHTMLProps<
   ${prop('theme.overrides.carouselArrow', '')};
 `;
 
-const Next: StyledComponent<DetailedHTMLProps<
-  HTMLAttributes<HTMLButtonElement>,
-  HTMLButtonElement
->> = styled.button`
+const Next: StyledComponent<
+  DetailedHTMLProps<HTMLAttributes<HTMLButtonElement>, HTMLButtonElement>
+> = styled.button`
   position: absolute;
   margin: auto;
   right: 0;

src/components/Carousel/hooks/useCarousel.ts

@@ -98,9 +98,9 @@ export default function useCarousel<T>(itemCount = 0): CarouselReturn<T> {
   const containerRef = useRef(null);
   const itemRefs = useRefs(itemCount);
   const measures = useMeasures(itemRefs);
-  const carouselItems: CarouselItem[] = Array.from(Array(itemCount)).map<
-    CarouselItem
-  >((_, i) => {
+  const carouselItems: CarouselItem[] = Array.from(
+    Array(itemCount),
+  ).map<CarouselItem>((_, i) => {
     const [isHidden, setIsHidden] = useState(false);
     return Object.create({ refObject: itemRefs[i++], isHidden, setIsHidden });
   });

src/components/Chat/Chat.stories.tsx

@@ -52,6 +52,8 @@ export const DefaultFullScreen: Story = {
         <Chat
           endPoint=""
           referralParameter=""
+          provideHintList={[]}
+          minCharsHint={0}
           widgets={{
             ProductWidget,
           }}
@@ -67,7 +69,12 @@ export const DefaultModal: Story = {
   render: () => (
     <Wrapper>
       <ModalContainer>
-        <Chat endPoint="" referralParameter="" />
+        <Chat
+          endPoint=""
+          provideHintList={[]}
+          referralParameter=""
+          minCharsHint={0}
+        />
       </ModalContainer>
     </Wrapper>
   ),

src/components/Chat/Chat.tsx

@@ -24,6 +24,8 @@ export interface ChatProps {
   disableSse?: boolean;
   accessibility?: TockAccessibility;
   localStorageHistory?: TockLocalStorage;
+  provideHintList: string[] | null;
+  minCharsHint: number;
 }
 
 const Chat: (props: ChatProps) => JSX.Element = ({
@@ -37,6 +39,8 @@ const Chat: (props: ChatProps) => JSX.Element = ({
   disableSse = false,
   accessibility = {},
   localStorageHistory = {},
+  provideHintList = [],
+  minCharsHint = 0,
 }: ChatProps) => {
   const {
     messages,
@@ -100,6 +104,8 @@ const Chat: (props: ChatProps) => JSX.Element = ({
         onSubmit={sendMessage}
         accessibility={accessibility}
         clearMessages={clearMessages}
+        provideHintList={provideHintList}
+        minCharsHint={minCharsHint}
       />
     </Container>
   );

src/components/ChatInput/ChatInput.tsx

@@ -1,4 +1,5 @@
 import styled, { StyledComponent } from '@emotion/styled';
+import InputAutoCompletion from '../InputAutoCompletion';
 import React, {
   DetailedHTMLProps,
   FormEvent,
@@ -11,10 +12,9 @@ import { Send, Trash2 } from 'react-feather';
 import { prop } from 'styled-tools';
 import TockAccessibility from 'TockAccessibility';
 
-const InputOuterContainer: StyledComponent<DetailedHTMLProps<
-  FormHTMLAttributes<HTMLFormElement>,
-  HTMLFormElement
->> = styled.form`
+const InputOuterContainer: StyledComponent<
+  DetailedHTMLProps<FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>
+> = styled.form`
   max-width: ${prop<any>('theme.sizing.conversation.width')};
   width: 100%;
   position: relative;
@@ -24,10 +24,9 @@ const InputOuterContainer: StyledComponent<DetailedHTMLProps<
   ${prop<any>('theme.overrides.chatInput.container', '')}
 `;
 
-const Input: StyledComponent<DetailedHTMLProps<
-  InputHTMLAttributes<HTMLInputElement>,
-  HTMLInputElement
->> = styled.input`
+const Input: StyledComponent<
+  DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>
+> = styled.input`
   width: 100%;
   height: 2em;
   flex: 1;
@@ -50,10 +49,9 @@ const Input: StyledComponent<DetailedHTMLProps<
   ${prop<any>('theme.overrides.chatInput.input', '')}
 `;
 
-const SubmitIcon: StyledComponent<DetailedHTMLProps<
-  HTMLAttributes<HTMLButtonElement>,
-  HTMLButtonElement
->> = styled.button`
+const SubmitIcon: StyledComponent<
+  DetailedHTMLProps<HTMLAttributes<HTMLButtonElement>, HTMLButtonElement>
+> = styled.button`
   position: absolute;
   background: none;
   border: none;
@@ -83,10 +81,9 @@ const SubmitIcon: StyledComponent<DetailedHTMLProps<
   ${prop<any>('theme.overrides.chatInput.icon', '')}
 `;
 
-const ClearIcon: StyledComponent<DetailedHTMLProps<
-  HTMLAttributes<HTMLButtonElement>,
-  HTMLButtonElement
->> = styled.button`
+const ClearIcon: StyledComponent<
+  DetailedHTMLProps<HTMLAttributes<HTMLButtonElement>, HTMLButtonElement>
+> = styled.button`
   position: absolute;
   background: none;
   border: none;
@@ -120,13 +117,17 @@ export interface ChatInputProps {
   onSubmit: (message: string) => void;
   accessibility?: TockAccessibility;
   clearMessages: () => void;
+  provideHintList: string[] | null;
+  minCharsHint: number;
 }
 
 const ChatInput: (props: ChatInputProps) => JSX.Element = ({
   disabled,
   onSubmit,
   accessibility,
   clearMessages,
+  provideHintList,
+  minCharsHint,
 }: ChatInputProps): JSX.Element => {
   const [value, setValue] = useState('');
   const submit = (event: FormEvent<HTMLFormElement>) => {
@@ -137,13 +138,29 @@ const ChatInput: (props: ChatInputProps) => JSX.Element = ({
     }
   };
 
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(e.target.value);
+  };
+
+  const onSuggestionSelected = (suggestion: string) => {
+    setValue(suggestion);
+  };
+
   return (
     <InputOuterContainer onSubmit={submit}>
+      {value.length > minCharsHint && (
+        <InputAutoCompletion
+          provideHintList={provideHintList}
+          minCharsHint={minCharsHint}
+          inputValue={value}
+          onSuggestionSelected={onSuggestionSelected}
+        />
+      )}
       <Input
         disabled={disabled}
         className={disabled ? 'disabled-input' : undefined}
         value={value}
-        onChange={({ target: { value } }) => setValue(value)}
+        onChange={handleInputChange}
       />
       <SubmitIcon>
         <Send

src/components/Container/Container.tsx

@@ -2,10 +2,9 @@ import styled, { StyledComponent } from '@emotion/styled';
 import { DetailedHTMLProps, HTMLAttributes } from 'react';
 import { prop } from 'styled-tools';
 
-const Container: StyledComponent<DetailedHTMLProps<
-  HTMLAttributes<HTMLDivElement>,
-  HTMLDivElement
->> = styled.div`
+const Container: StyledComponent<
+  DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>
+> = styled.div`
   width: 100%;
   height: 100%;
   display: flex;