Feat/integrate llm front (#150)

* fix: fix ScrolledContainer component

* fix: fix icon

* fix: fix ConfirmationModal component

* feat: add llm api functions

* feat: add LLMToken component

* refactor: rewrite Settings page

* feat: add LlmContext

* feat: add useDebouncedCallback hook

* feat: add Llms tab to Settings page

* fix

* fix: fix EditPen icon

* fix: fix llmContext and api

* fix: update LLMToken

* feat: add LLMConfig

* feat: add PromptRedactor

* fix: small fixes

* fix-test

* test

* fix: update functionality according to the new API (add IDs to tokens)

* fix: update useDebounce hook

* add test

* feat: Provide id for LLMs tokens & configs

* fix: Patch token value correctly

* feat: Add default config model endpoint

* fix: fix llm settings page

* style: add scrollbar styles

* hideButtons

* feat: Add GET `llms/default/` & fix PATCH tokens

* fix: Append tokens to the llms file properly

* fix

* fix: update types

* fix: fix utils

* fix: update routing

* feat: add helper hook

* feat: update llm context

* feat: update response modal

* feat: update condition modal

* feat: add LLM-related API functions

* fix: fix llms tab

* chore: fix linter error

* fix: update code to pass e2e tests

* test: add unit tests for multiple components

* stash

* fix: bug with keyboard events (copy, paste, undo, redo)

* fix: restore ability to change condition type

* fix: Correct condition&response conversion

* refactor(llm config): renamed field config_name to name

* test: fix E2E tests

* fix: cypress config

* test: fix llm tests

* fix: correct config name field

* fix: Lock poetry

* style up

* fix: buttons bug

Author: artem-mar

backend/chatsky_ui/api/api_v1/endpoints/config.py

@@ -289,7 +289,7 @@ async def patch_llm_model(
     llms_conf["config_models"].update(
         {
             config_id: {
-                "name": new_config_name if new_config_name else config_models[config_id]["config_name"],
+                "name": new_config_name if new_config_name else config_models[config_id]["name"],
                 "model_name": model_name if model_name else config_models[config_id]["model_name"],
                 "token_id": llm_token_id if llm_token_id else config_models[config_id]["token_id"],
                 "system_prompt": system_prompt if system_prompt else config_models[config_id]["system_prompt"],

backend/chatsky_ui/cli.py

@@ -282,6 +282,7 @@ def init(
             "https://github.com/deeppavlov/chatsky-ui-template.git",
             no_input=no_input,
             overwrite_if_exists=overwrite_if_exists,
+            checkout="feat/llm2",
         )
     finally:
         os.chdir(original_dir)

backend/chatsky_ui/services/json_converter/logic_component_converter/buttons_converter.py

@@ -30,7 +30,7 @@ def determine_button_type(self, buttons_list: list) -> Optional[str]:
 
         Raises: `KeyError`, if `buttons_dict` is a dictionary of the wrong structure.
         """
-        if buttons_list[0][0].get("type", None) == "exactMatch":
+        if buttons_list and buttons_list[0][0].get("type", None) == "exactMatch":
             return "reply"
         else:
             return "inline"

frontend/cypress.config.ts

@@ -2,6 +2,10 @@ import { defineConfig } from 'cypress'
 
 export default defineConfig({
   e2e: {
+    retries: {
+      runMode: 2,
+      openMode: 0,
+    },
     setupNodeEvents() {
       // implement node event listeners here
     },

frontend/cypress/e2e/spec.cy.ts

@@ -184,6 +184,7 @@ describe('Flow creation and editing process', () => {
       cy.get('[data-testid=condition-modal]')
         .find('[data-testid=tab-slot]')
         .click()
+      cy.wait(600)
       cy.get('input[data-testid=condition-name]')
         .clear()
         .type('Test_slots_condition')
@@ -201,6 +202,7 @@ describe('Flow creation and editing process', () => {
       cy.get('[data-testid=condition-modal]')
         .find('[data-testid=tab-basic]')
         .click()
+      cy.wait(600)
       cy.get('input[data-testid=condition-name]')
         .clear()
         .type('Basic_condition_P-1')
@@ -217,6 +219,7 @@ describe('Flow creation and editing process', () => {
       cy.get('[data-testid=condition-modal]')
         .find('[data-testid=tab-basic]')
         .click()
+      cy.wait(600)
       cy.get('input[data-testid=condition-name]')
         .clear()
         .type('Basic_condition_P-2')
@@ -239,6 +242,7 @@ describe('Flow creation and editing process', () => {
       cy.get('[data-testid=condition-modal]')
         .find('[data-testid=tab-basic]')
         .click()
+      cy.wait(600)
       cy.get('input[data-testid=condition-name]')
         .clear()
         .type('All_of_condition')
@@ -267,6 +271,7 @@ describe('Flow creation and editing process', () => {
       cy.get('[data-testid=condition-modal]')
         .find('[data-testid=tab-basic]')
         .click()
+      cy.wait(600)
       cy.get('input[data-testid=condition-name]')
         .clear()
         .type('Any_of_condition')
@@ -308,6 +313,7 @@ describe('Flow creation and editing process', () => {
       cy.get('[data-testid=condition-modal]')
         .find('[data-testid=tab-basic]')
         .click()
+      cy.wait(600)
       cy.get('input[data-testid=condition-name]')
         .clear()
         .type('Exact_match_condition')
@@ -326,6 +332,7 @@ describe('Flow creation and editing process', () => {
       cy.get('[data-testid=condition-modal]')
         .find('[data-testid=tab-basic]')
         .click()
+      cy.wait(600)
       cy.get('input[data-testid=condition-name]')
         .clear()
         .type('Regexp_condition')
@@ -344,6 +351,7 @@ describe('Flow creation and editing process', () => {
       cy.get('[data-testid=condition-modal]')
         .find('[data-testid=tab-basic]')
         .click()
+      cy.wait(600)
       cy.get('input[data-testid=condition-name]')
         .clear()
         .type('Not_has_text_condition')
@@ -361,6 +369,7 @@ describe('Flow creation and editing process', () => {
         .should('exist')
         .find('button[data-testid=add-condition-btn]')
         .click()
+      cy.wait(600)
       cy.get('input[data-testid=condition-name]')
         .clear()
         .type('Python_condition')

frontend/cypress/support/commands.ts

@@ -38,7 +38,7 @@
 
 Cypress.Commands.add('saveFlow', () => {
   cy.get('body').trigger('keydown', {
-    key: 's',
+    code: 'KeyS',
     ctrlKey: true,
     bubbles: true,
   })

frontend/src/UI/ScrolledContainer/ScrolledContainer.css

@@ -1,6 +1,6 @@
 .hasScrollbar {
-  margin-right: -18px;
-  padding-right: 6px;
+  margin-right: var(--scrollbar-margin);
+  padding-right: var(--scrollbar-padding);
 }
 .scrolled_container::-webkit-scrollbar {
   height: 12px;

frontend/src/UI/ScrolledContainer/ScrolledContainer.tsx

@@ -11,10 +11,11 @@ import cn from 'classnames'
 interface ScrolledContainerProps extends React.PropsWithChildren {
   children: ReactNode
   className?: string
+  scrollbarOffset?: number
 }
 
 const ScrolledContainer = forwardRef<HTMLDivElement, ScrolledContainerProps>(
-  ({ children, className }, ref) => {
+  ({ children, className, scrollbarOffset = 0 }, ref) => {
     const innerRef = useRef<HTMLDivElement>(null)
     const containerRef = (ref || innerRef) as RefObject<HTMLDivElement>
     const hasScrollbarRef = useRef(false)
@@ -61,11 +62,23 @@ const ScrolledContainer = forwardRef<HTMLDivElement, ScrolledContainerProps>(
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [children])
 
+    const mr = `-${12 + scrollbarOffset}px`
+    const pr = `${scrollbarOffset}px`
+
     return (
       <div className={cn('flex max-h-full w-full', className)}>
         <div
           ref={containerRef}
-          className='scrolled_container flex-grow overflow-y-auto'
+          className={cn(
+            'scrolled_container flex-grow overflow-y-auto',
+            hasScrollbarRef.current && `mr-[${mr}] pr-[${pr}]`,
+          )}
+          style={
+            {
+              '--scrollbar-margin': mr,
+              '--scrollbar-padding': pr,
+            } as React.CSSProperties
+          }
         >
           {children}
         </div>

frontend/src/api/llm.tsx

@@ -0,0 +1,166 @@
+import {
+  ILlmConfig,
+  ILlmConfigs,
+  IToken,
+  ITokenFormData,
+  ITokens,
+  LlmProviders,
+} from '@/types/llmTypes'
+import { $v1 } from '.'
+
+export const getLlmProviders = async (): Promise<LlmProviders> => {
+  try {
+    const { data } = await $v1.get('/config/providers')
+    return data
+  } catch (error) {
+    console.log(error)
+    throw error
+  }
+}
+
+export const getLLMTokens = async (): Promise<ITokens> => {
+  try {
+    const {
+      data: { data },
+    } = await $v1.get('/config/llms/tokens')
+
+    return data
+  } catch (error) {
+    console.log(error)
+    throw error
+  }
+}
+
+export const createLLMToken = async (
+  token: ITokenFormData,
+): Promise<string> => {
+  try {
+    const {
+      data: { token_id },
+    } = await $v1.post(
+      `/config/llms/token?provider=${token.provider}&token_name=${token.name}&token_value=${token.value}`,
+    )
+    return token_id
+  } catch (error) {
+    console.log(error)
+    throw error
+  }
+}
+
+export const updateLLMToken = async (
+  token_id: string,
+  newToken: Partial<IToken>,
+) => {
+  try {
+    const params = new URLSearchParams({ token_id })
+
+    if (newToken.name) params.append('new_token_name', newToken.name)
+    if (newToken.value) params.append('new_token_value', newToken.value)
+    if (newToken.provider) params.append('new_provider', newToken.provider)
+
+    const { data } = await $v1.patch(`/config/llms/token?${params.toString()}`)
+
+    return data
+  } catch (error) {
+    console.log(error)
+    throw error
+  }
+}
+
+export const deleteLLMToken = async (token_id: string) => {
+  try {
+    const { data } = await $v1.delete(`/config/llms/token?&id=${token_id}`)
+    return data
+  } catch (error) {
+    console.log(error)
+    throw error
+  }
+}
+
+export const getLlmConfigs = async (): Promise<ILlmConfigs> => {
+  try {
+    const {
+      data: { data },
+    } = await $v1.get('/config/llms')
+    return data
+  } catch (error) {
+    console.log(error)
+    throw error
+  }
+}
+
+export const createLlmConfig = async (config: Omit<ILlmConfig, 'id'>) => {
+  try {
+    const systemPromptString = config?.system_prompt
+      ? `&system_prompt=${config.system_prompt}`
+      : ''
+    const {
+      data: { config_id },
+    } = await $v1.post(
+      `/config/llms?config_name=${config.name}&model_name=${config.model_name}&llm_token_id=${config.token_id}${systemPromptString}`,
+    )
+    return config_id
+  } catch (error) {
+    console.log(error)
+    throw error
+  }
+}
+
+export const updateLlmConfig = async (
+  config_id: string,
+  newConfig: Partial<ILlmConfig>,
+) => {
+  try {
+    const params = new URLSearchParams({ config_id })
+    if (newConfig.name) {
+      params.append('new_config_name', newConfig.name)
+    }
+    if (newConfig.model_name) {
+      params.append('model_name', newConfig.model_name)
+    }
+    if (newConfig.token_id) {
+      params.append('llm_token_id', newConfig.token_id.toString())
+    }
+    if (newConfig.system_prompt) {
+      params.append('system_prompt', newConfig.system_prompt)
+    }
+
+    const { data } = await $v1.patch(`/config/llms?${params.toString()}`)
+    return data
+  } catch (error) {
+    console.log(error)
+    throw error
+  }
+}
+
+export const deleteLlmConfig = async (config_id: string) => {
+  try {
+    const { data } = await $v1.delete(`config/llms?config_id=${config_id}`)
+    return data
+  } catch (error) {
+    console.log(error)
+    throw error
+  }
+}
+
+export const getDefaultConfigId = async (): Promise<string> => {
+  try {
+    const {
+      data: { data },
+    } = await $v1.get(`config/llms/default`)
+    return data
+  } catch (error) {
+    console.log(error)
+    throw error
+  }
+}
+
+export const setDefaultConfigId = async (id: string) => {
+  try {
+    const { data } = await $v1.post(`config/llms/default/?config_id=${id}`)
+    return data
+  } catch (error) {
+    console.log(error)
+    throw error
+  }
+}

frontend/src/components/footbar/FootBar.tsx

@@ -17,7 +17,6 @@ import MonitorIcon from '../../icons/buildmenu/MonitorIcon'
 import LocalStorageIcon from '../../icons/footbar/LocalStorageIcon'
 import { Logo } from '../../icons/Logo'
 import LocalStorage from '../../modals/LocalStorage/LocalStorage'
-import { parseSearchParams } from '../../utils'
 import { NotificationsWindow } from '../notifications/NotificationsWindow'
 
 const FootBar = memo(() => {
@@ -41,11 +40,10 @@ const FootBar = memo(() => {
     (key: Key) => {
       const pageKey = key as PageType
       setSearchParams({
-        ...parseSearchParams(searchParams),
         page: pageKey,
       })
     },
-    [searchParams, setSearchParams],
+    [setSearchParams],
   )
 
   return (