Feat: Transliteration support added

README.md

@@ -6,7 +6,7 @@
 
 <div align="center">
 
-[![LICENSE](https://img.shields.io/npm/l/samagra-chatui?style=flat-square)](https://github.com/Samagra-Development/ChatUI/blob/next/LICENSE) [![NPM version](https://img.shields.io/npm/v/samagra-chatui?style=flat-square)](https://www.npmjs.com/package/samagra-chatui)
+[![LICENSE](https://img.shields.io/npm/l/@samagra-x/chatui?style=flat-square)](https://github.com/Samagra-Development/ChatUI/blob/next/LICENSE) [![NPM version](https://img.shields.io/npm/v/@samagra-x/chatui?style=flat-square)](https://www.npmjs.com/package/@samagra-x/chatui)
 
 </div>
 
@@ -31,18 +31,18 @@
 ## Install
 
 ```bash
-npm install samagra-chatui --save
+npm install @samagra-x/chatui
 ```
 
 ```bash
-yarn add samagra-chatui
+yarn add @samagra-x/chatui
 ```
 
 ## Usage
 
 ```jsx
-import Chat, { Bubble, useMessages } from 'samagra-chatui';
-import 'samagra-chatui/dist/index.css';
+import Chat, { Bubble, useMessages } from '@samagra-x/chatui';
+import '@samagra-x/chatui/dist/index.css';
 
 const App = () => {
   const { messages, appendMsg, setTyping } = useMessages([]);

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@samagra-x/chatui",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "The React library for Chatbot UI",
   "main": "lib/index.js",
   "module": "es/index.js",

src/components/Chat/index.tsx

@@ -10,6 +10,14 @@ import { QuickReplies, QuickReplyItemProps } from '../QuickReplies';
 import { Composer as DComposer, ComposerProps, ComposerHandle } from '../Composer';
 import { isSafari, getIOSMajorVersion } from '../../utils/ua';
 
+export type TransliterationConfig = {
+  transliterationApi:string;
+  transliterationSuggestions?:number;
+  transliterationInputLanguage:string;
+  transliterationOutputLanguage:string;
+  transliterationProvider?:string;
+}
+
 export type ChatProps = Omit<ComposerProps, 'onFocus' | 'onChange' | 'onBlur'> &
   MessageContainerProps & {
     /**
@@ -145,6 +153,8 @@ export type ChatProps = Omit<ComposerProps, 'onFocus' | 'onChange' | 'onBlur'> &
     disableSend?:boolean
     btnColor?:string
     background?:string
+    showTransliteration?:boolean
+    transliterationConfig?:TransliterationConfig
   };
 
 export const Chat = React.forwardRef<HTMLDivElement, ChatProps>((props, ref) => {
@@ -178,6 +188,8 @@ export const Chat = React.forwardRef<HTMLDivElement, ChatProps>((props, ref) =>
     onInputBlur,
     onSend,
     disableSend,
+    showTransliteration,
+    transliterationConfig,
     btnColor,
     background,
     onImageSend,
@@ -262,6 +274,8 @@ export const Chat = React.forwardRef<HTMLDivElement, ChatProps>((props, ref) =>
             onBlur={onInputBlur}
             onSend={onSend}
             disableSend={disableSend}
+            showTransliteration={showTransliteration}
+            transliterationConfig={transliterationConfig}
             btnColor={btnColor}
             onImageSend={onImageSend}
             rightAction={rightAction}

src/components/Composer/ComposerInput.tsx

@@ -5,23 +5,37 @@ import { SendConfirm } from '../SendConfirm';
 import riseInput from './riseInput';
 import parseDataTransfer from '../../utils/parseDataTransfer';
 import canUse from '../../utils/canUse';
+import { TransliterationConfig } from '../Chat';
 
 const canTouch = canUse('touch');
 
 interface ComposerInputProps extends InputProps {
   invisible: boolean;
   inputRef: React.MutableRefObject<HTMLTextAreaElement>;
   onImageSend?: (file: File) => Promise<any>;
+  showTransliteration: boolean;
+  transliterationConfig: TransliterationConfig | null;
+  cursorPosition: number;
+  setCursorPosition: any;
 }
 
 export const ComposerInput = ({
   inputRef,
   invisible,
   onImageSend,
   disabled,
+  showTransliteration,
+  transliterationConfig,
+  value,
+  onChange,
+  cursorPosition,
+  setCursorPosition,
   ...rest
 }: ComposerInputProps) => {
   const [pastedImage, setPastedImage] = useState<File | null>(null);
+  const [suggestions, setSuggestions] = useState([]);
+  const [suggestionClicked, setSuggestionClicked] = useState(false);
+  const [activeSuggestion, setActiveSuggestion] = useState<number>(0);
 
   const handlePaste = useCallback((e: React.ClipboardEvent<any>) => {
     parseDataTransfer(e, setPastedImage);
@@ -46,16 +60,172 @@ export const ComposerInput = ({
     }
   }, [inputRef]);
 
+  useEffect(() => {
+    if (
+      value &&
+      //@ts-ignore
+      value.length > 0 &&
+      showTransliteration && transliterationConfig
+    ) {
+      if (suggestionClicked) {
+        setSuggestionClicked(false);
+        return;
+      }
+
+      setSuggestions([]);
+
+      //@ts-ignore
+      const words = value.split(' ');
+      const wordUnderCursor = words.find(
+        (word: any) =>
+          //@ts-ignore
+          cursorPosition >= value.indexOf(word) &&
+          //@ts-ignore
+          cursorPosition <= value.indexOf(word) + word.length,
+      );
+      if (!wordUnderCursor) return;
+      fetch(transliterationConfig.transliterationApi, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          "inputLanguage": transliterationConfig.transliterationInputLanguage,
+          "outputLanguage": transliterationConfig.transliterationOutputLanguage,
+          "input": wordUnderCursor,
+          "provider": transliterationConfig?.transliterationProvider || "bhashini",
+          "numSuggestions": transliterationConfig?.transliterationSuggestions || 3
+        }),
+      })
+        .then((response) => response.json())
+        .then((data) => {
+          setSuggestions(data?.suggestions);
+        })
+        .catch((error) => {
+          console.error('Error fetching transliteration:', error);
+        });
+    } else {
+      setSuggestions([]);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value, cursorPosition]);
+
+  const suggestionClickHandler = useCallback(
+    (e: any) => {
+      //@ts-ignore
+      const words = value.split(' ');
+
+      // Find the word at the cursor position
+      const selectedWord = words.find(
+        (word: any) =>
+        //@ts-ignore
+        cursorPosition >= value.indexOf(word) &&
+        //@ts-ignore
+          cursorPosition <= value.indexOf(word) + word.length,
+      );
+
+      if (selectedWord) {
+        // Replace the selected word with the transliterated suggestion
+        //@ts-ignore
+        const newInputMsg = value.replace(
+          selectedWord,
+          //@ts-ignore
+          cursorPosition === value.length ? e + ' ' : e,
+        );
+
+        setSuggestions([]);
+        setSuggestionClicked(true);
+        setActiveSuggestion(0);
+
+        // Save and restore the cursor position
+        const restoredCursorPosition =
+          //@ts-ignore
+          cursorPosition - value.indexOf(selectedWord) + value.indexOf(e);
+        //@ts-ignore
+        onChange(newInputMsg, e);
+        setCursorPosition(restoredCursorPosition);
+        //@ts-ignore
+        inputRef.current && inputRef.current.focus();
+      }
+    },
+    [value, cursorPosition, onChange],
+  );
+
+  // @ts-ignore
+  const suggestionHandler = (e: any, index: number) => {
+    setActiveSuggestion(index);
+  };
+
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      if (suggestions.length > 0) {
+        if (e.key === 'ArrowUp') {
+          e.preventDefault();
+          setActiveSuggestion((prevActiveSuggestion) =>
+            prevActiveSuggestion > 0 ? prevActiveSuggestion - 1 : prevActiveSuggestion,
+          );
+        } else if (e.key === 'ArrowDown') {
+          e.preventDefault();
+          setActiveSuggestion((prevActiveSuggestion) =>
+            prevActiveSuggestion < suggestions.length - 1
+              ? prevActiveSuggestion + 1
+              : prevActiveSuggestion,
+          );
+        } else if (e.key === ' ') {
+          e.preventDefault();
+          if (activeSuggestion >= 0 && activeSuggestion < suggestions?.length) {
+            suggestionClickHandler(suggestions[activeSuggestion]);
+            setSuggestions([]);
+          } else {
+            //@ts-ignore
+            onChange(prevInputMsg + ' ');
+          }
+        }
+      }
+    },
+    [activeSuggestion, suggestionClickHandler, suggestions],
+  );
+
+  useEffect(() => {
+    if (suggestions.length === 1) {
+      setSuggestions([]);
+    }
+  }, [suggestions]);
+
+  useEffect(() => {
+    document.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [handleKeyDown]);
+
   return (
     <div className={clsx({ 'S--invisible': invisible })}>
-     <Input
+      <div className={'suggestions'}>
+        {suggestions.map((elem, index) => {
+          return (
+            <div
+              key={index}
+              onClick={() => suggestionClickHandler(elem)}
+              className={`suggestion ${activeSuggestion === index ? 'active' : ''}`}
+              onMouseEnter={(e) => suggestionHandler(e, index)}
+            >
+              {elem}
+            </div>
+          );
+        })}
+      </div>
+      <Input
         className="Composer-input"
         rows={1}
         autoSize
         enterKeyHint="send"
         onPaste={onImageSend ? handlePaste : undefined}
         ref={inputRef}
         disabled={disabled}
+        value={value}
+        onChange={onChange}
         {...rest}
       />
       {pastedImage && (