@stack-spot/ai-chat-widget 1.5.2 → 1.7.0-beta.0

package/src/components/Selector/styled.ts

@@ -0,0 +1,145 @@
+import { theme } from '@stack-spot/portal-theme'
+import { styled } from 'styled-components'
+
+
+export const SelectorBox = styled.div`
+  .box-selector  {
+    position: absolute;
+    border-radius: 4px;
+    border: 1px solid ${theme.color.light[600]};
+    background-color: ${theme.color.light[400]};
+    box-shadow: 0px 2px 16px 0px #0000005C;
+    display: flex;
+    flex-direction: column;
+    width: 480px;
+    bottom: 74px;
+
+    .loading, .error {
+      padding-bottom: 26px;
+      p {
+        width: 200px;
+        text-align: center;
+        line-height: 20px;
+      }
+    }
+
+    .empty {
+      padding-bottom: 26px;
+      width: 200px;
+      text-align: center;
+      line-height: 20px;
+      margin: auto;
+    }
+
+    header {
+      display: flex;
+      flex-direction: row;
+      gap: 8px;
+      align-items: center;
+      padding: 8px;
+      margin-bottom: 4px;
+      font-family: 'San Francisco';
+      text-transform: uppercase;
+      font-weight: 500;
+      font-size: 11px;
+      background-color: ${theme.color.light[500]};
+    }
+
+    .body {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+    }
+
+    ul {
+      margin: 0;
+      padding: 0;
+      list-style: none;
+    }
+
+    ul.tabs {
+      display: flex;
+      flex-direction: column;
+
+      li {
+        display: flex;
+        flex-direction: column;
+      }
+
+      button {
+        box-sizing: border-box;
+        color: ${theme.color.light[700]};
+        text-align: left;
+        padding: 10px;
+        font-weight: 600;
+        font-size: 12px;
+        transition: background-color 0.3s;
+        border-left: 1px solid transparent;
+        border-top-right-radius: 4px;
+        border-bottom-right-radius: 4px;
+        background-color: transparent;
+        border: none;
+        cursor: pointer;
+        outline: none;
+
+        &:hover, &.active, &:focus {
+          background-color: ${theme.color.light[600]};
+        }
+
+        &.active {
+          border-left: 1px solid ${theme.color.light.contrastText};
+          color: ${theme.color.light.contrastText};
+        }
+      }
+    }
+
+    ul.selector-list {
+      align-self: stretch;
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+      overflow-y: auto;
+      flex: 1;
+      max-height: 170px;
+
+      li {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: 8px;
+        padding: 8px;
+        border-radius: 4px;
+
+        &:hover, &.focus {
+          background-color: ${theme.color.light[600]};
+        }
+
+        button.selector {
+          flex: 1;
+          border: none;
+          text-align: left;
+          background-color: transparent;
+          text-align: left;
+          outline: none;
+          overflow: hidden;
+          cursor: pointer;
+          
+        .selector-title {
+            font-size: 11px;
+            margin: 0 0 4px 0;
+            color: ${theme.color.light.contrastText};
+            text-transform: uppercase;
+            text-overflow: ellipsis;
+            overflow: hidden;
+          }
+
+         .selector-description {
+            color: ${theme.color.light[700]};
+            font-size: 12px;
+            margin: 0;
+          }
+        }
+      }
+    }
+  }
+`

package/src/regex.ts

@@ -1 +1,2 @@
 export const quickCommandRegex = /^\/[\w\d-_]+$/
+export const agentRegex = /^@[\w\d-_]+$/

package/src/views/Agents/AgentsTab.tsx

@@ -1,5 +1,5 @@
-import { Button, Text } from '@citric/core'
-import { Search } from '@citric/icons'
+import { Button, IconBox, Text } from '@citric/core'
+import { Agent, Search } from '@citric/icons'
 import { Placeholder } from '@stack-spot/portal-components/Placeholder'
 import { MiniLogo } from '@stack-spot/portal-components/svg'
 import { agentClient } from '@stack-spot/portal-network'
@@ -20,7 +20,7 @@ export const AgentsTab = ({ visibility }: { visibility: VisibilityLevel | 'BUILT
   const [filter, setFilter] = useState('')
   const defaultAgent = useMemo(() => ({
     id: '',
-    name: 'Stackspot AI',
+    name: 'StackSpot AI',
     description: t.defaultAgentDescription,
     llm_config: { model_slug: 'gpt4o' },
   } as AgentResponse), [])
@@ -54,7 +54,7 @@ export const AgentsTab = ({ visibility }: { visibility: VisibilityLevel | 'BUILT
           onChange={setValue}
           renderLabel={({ name, avatar, id }) => (
             <AgentLabel>
-              {id ? (avatar && <img src={avatar} />) : <MiniLogo />}
+              {id ? (avatar ? <img src={avatar} /> :  <IconBox size="xs"><Agent /></IconBox>) : <MiniLogo />}
               <Text>{name}</Text>
             </AgentLabel>
           )}

package/src/views/Chat/AgentInfo.tsx

@@ -15,6 +15,6 @@ export const AgentInfo = ({ agent }: Props) => (
       ? <img src={agent.image} className="custom-agent-image" />
       : <div className="default-image-wrapper"><MiniLogo className="agent-image" /></div>
     }
-    <Text appearance="body2">{agent?.label || 'Stackspot AI'}</Text>
+    <Text appearance="body2">{agent?.label || 'StackSpot AI'}</Text>
   </>
 )

package/src/views/Home/CustomAgent.tsx

@@ -1,5 +1,5 @@
-import { Text } from '@citric/core'
-import { MiniLogo } from '@stack-spot/portal-components/svg'
+import { IconBox, Text } from '@citric/core'
+import { Agent } from '@citric/icons'
 import { agentClient } from '@stack-spot/portal-network'
 import { theme } from '@stack-spot/portal-theme'
 import { useMemo } from 'react'
@@ -31,7 +31,7 @@ export const CustomAgent = () => {
 
   return (
     <HomeBox className="home-page custom-agent">
-      {image ? <img src={image} className="avatar" /> : <MiniLogo className="avatar" />}
+      {image ? <img src={image} className="avatar" /> : <IconBox className="avatar"><Agent /></IconBox>}
       <Text appearance="h3">{label}</Text>
       <div className="shortcuts">{suggestions?.length ? suggestions : null}</div>
     </HomeBox>

package/src/views/Home/styled.ts

@@ -32,7 +32,7 @@ export const HomeBox = styled.div`
     }
   }
 
-  .avatar {
+  .avatar, .avatar svg {
     width: 74px;
     height: 74px;
     border-radius: 50%;

package/src/views/MessageInput/AgentSelector.tsx

@@ -0,0 +1,35 @@
+import { Agent } from '@citric/icons'
+import { agentClient } from '@stack-spot/portal-network'
+import { AgentResponse } from '@stack-spot/portal-network/api/agent'
+import { useCallback } from 'react'
+import { Selector } from '../../components/Selector'
+import { useCurrentChat, useCurrentChatState } from '../../context/hooks'
+import { agentRegex } from '../../regex'
+
+export const AgentSelector = ({ inputRef }: { inputRef: React.RefObject<HTMLTextAreaElement | HTMLInputElement> }) => {
+  const chat = useCurrentChat()
+  const onSelectItem = useCallback((agent: AgentResponse) => {
+    const newValue = `@${agent.slug}`
+    chat.set('nextMessage', undefined)
+    chat.set('agent', { id: agent.id, label: agent.slug, image: agent.avatar, builtIn: false })
+
+    if (!inputRef.current) return
+    inputRef.current.value = newValue
+    inputRef.current.focus()
+  }, [])
+
+  return <Selector
+    inputRef={inputRef}
+    selectorConfig={{
+      resourceName: 'Agent',
+      shortcut: '@',
+      icon: <Agent />,   
+      imageProp: 'avatar',
+      regex: agentRegex,
+      url: '/agent/',
+      data: () =>  agentClient.agents.useQuery({}),
+      isEnabled: useCurrentChatState('features').agent,
+      onSelect: onSelectItem,
+    }}
+  />
+}

package/src/views/MessageInput/ButtonAgent.tsx

@@ -0,0 +1,36 @@
+import { Flex, IconBox } from '@citric/core'
+import { Agent, TimesMini } from '@citric/icons'
+import { IconButton, Tooltip } from '@citric/ui'
+import { MiniLogo } from '@stack-spot/portal-components/svg'
+import { useCurrentChat, useCurrentChatState, useWidget } from '../../context/hooks'
+import { useMessageInputDictionary } from './dictionary'
+
+export const ButtonAgent = () => {
+  const t = useMessageInputDictionary()
+  const widget = useWidget()
+  const chat = useCurrentChat()
+  const agent = useCurrentChatState('agent')
+  const features = useCurrentChatState('features')
+
+  return (
+    <div className="button-group">
+      {features.agent && (
+        <div className="group-agent">
+          <IconButton aria-label={t.agent} title={t.agent} className="agent" onClick={() => widget.set('panel', 'agent')}>
+            <MiniLogo />
+          </IconButton>
+          {agent?.id &&
+            <Tooltip text={t.remove} >
+              <IconButton aria-label={t.remove} className="agent agent-selected" onClick={() => chat.set('agent', undefined)}>
+                {agent?.image ? <img src={agent.image} className="image" /> : <IconBox className="image" size="xs"><Agent /></IconBox>}
+                <Flex className="icon-remove" alignContent="center" justifyContent="center">
+                  <TimesMini />
+                </Flex>
+              </IconButton>
+            </Tooltip>
+          }
+        </div>
+      )}
+    </div>
+  )
+}

package/src/views/MessageInput/ButtonGroup.tsx

@@ -1,6 +1,5 @@
 import { ChevronRight, Code, KnowledgeSource, Send, Stack, Times, Workspace } from '@citric/icons'
 import { IconButton } from '@citric/ui'
-import { MiniLogo } from '@stack-spot/portal-components/svg'
 import { listToClass } from '@stack-spot/portal-theme'
 import { useEffect, useRef } from 'react'
 import { useCurrentChatState, useWidget } from '../../context/hooks'
@@ -31,16 +30,15 @@ interface ButtonGroupProps {
 
 /**
  * Renders the button group at right bottom side of the message input. This includes the send button as well as the buttons to open the
- * editor, change the agent, the stack, etc.
+ * editor, change the stack, etc.
  */
 export const ButtonGroup = ({ onSend, onCancel, expanded, setExpanded, isLoading }: ButtonGroupProps) => {
   const t = useMessageInputDictionary()
   const widget = useWidget()
   const featureButtonsWidth = useRef<number | undefined>()
   const featureButtons = useRef<HTMLDivElement>(null)
-  const agent = useCurrentChatState('agent')
   const features = useCurrentChatState('features')
-  const hasFeatureButtons = features.agent || features.workspace || features.knowledgeSource || features.stack || features.editor
+  const hasFeatureButtons = features.workspace || features.knowledgeSource || features.stack || features.editor
 
   useEffect(
     () => {
@@ -52,7 +50,7 @@ export const ButtonGroup = ({ onSend, onCancel, expanded, setExpanded, isLoading
       else featureButtons.current.style.width = `${featureButtonsWidth.current}px`
     },
     // don't use the whole features object here, it would make every chat tab change rerun this effect.
-    [features.agent, features.workspace, features.knowledgeSource, features.stack, features.editor],
+    [features.workspace, features.knowledgeSource, features.stack, features.editor],
   )
 
   return (
@@ -63,11 +61,6 @@ export const ButtonGroup = ({ onSend, onCancel, expanded, setExpanded, isLoading
           className={listToClass(['feature-buttons', expanded && 'expanded'])}
           style={{ width: expanded ? featureButtonsWidth.current : 0 }}
         >
-          {features.agent && (
-            <IconButton aria-label={t.agent} title={t.agent} className="agent" onClick={() => widget.set('panel', 'agent')}>
-              {agent?.image ? <img src={agent.image} /> : <MiniLogo />}
-            </IconButton>
-          )}
           {features.workspace && (
             <IconButton aria-label={t.workspace} title={t.workspace} onClick={() => widget.set('panel', 'workspace')}>
               <Workspace />

package/src/views/MessageInput/QuickCommandSelector.tsx

@@ -1,218 +1,34 @@
-import { IconBox, Text } from '@citric/core'
-import { ExternalLink, QuickCommand } from '@citric/icons'
-import { IconButton } from '@citric/ui'
-import { useKeyboardControls } from '@stack-spot/portal-components'
+import { QuickCommand } from '@citric/icons'
 import { aiClient } from '@stack-spot/portal-network'
-import { QuickCommandListResponse, VisibilityLevelEnum } from '@stack-spot/portal-network/api/ai'
-import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { Fading } from '../../components/Fading'
-import { FallbackBoundary } from '../../components/FallbackBoundary'
+import { QuickCommandListResponse } from '@stack-spot/portal-network/api/ai'
+import { useCallback } from 'react'
+import { Selector } from '../../components/Selector'
 import { useCurrentChat, useCurrentChatState } from '../../context/hooks'
 import { quickCommandRegex } from '../../regex'
-import { getUrlToStackSpotAI } from '../../utils/url'
 
-interface Props {
-  /**
-   * A reference to the input this quick commands panel is attached to.
-   */
-  inputRef: React.RefObject<HTMLTextAreaElement | HTMLInputElement>,
-}
-
-interface ContentProps extends Props {
-  filter?: string,
-  onClose: () => void,
-}
-
-interface ListProps {
-  filter?: string,
-  visibility?: VisibilityLevelEnum,
-  onSelect: (slug: string) => void,
-}
-
-interface ItemProps {
-  qc: QuickCommandListResponse,
-  onSelect: (slug: string) => void,
-}
-
-const sections = [undefined, 'personal', 'workspace', 'account', 'shared'] as const
-
-const CommandListItem = ({ qc, onSelect }: ItemProps) => {
-  const t = useTranslate(dictionary)
-  return (
-    <li>
-      <button
-        className="qc"
-        onClick={() => onSelect(qc.slug)}
-        // the following line prevents a new line character in the message when the user presses enter to select a qc.
-        onKeyDown={e => e.key === 'Enter' && e.preventDefault()}
-        onFocus={e => e.target.closest('li')?.classList.add('focus')}
-        onBlur={e => e.target.closest('li')?.classList.remove('focus')}
-      >
-        <p className="qc-title">/{qc.slug}</p>
-        <p className="qc-description">{qc.description}</p>
-      </button>
-      <IconButton as="a" title={t.openQC} aria-label={t.openQC} href={`${getUrlToStackSpotAI()}/quick-command/${qc.slug}`} target="_blank">
-        <ExternalLink />
-      </IconButton>
-    </li>
-  )
-}
-
-const CommandList = ({ filter, visibility, onSelect }: ListProps) => {
-  const t = useTranslate(dictionary)
-  const quickCommands = aiClient.quickCommands.useQuery({ order: 'a-to-z' })
-  let filtered = quickCommands
-
-  if (visibility || filter) {
-    const lowerFilter = filter?.toLocaleLowerCase()
-    filtered = quickCommands.filter(
-      qc => (!lowerFilter || qc.slug.toLocaleLowerCase().startsWith(lowerFilter)) && (!visibility || qc.visibility_level === visibility),
-    )
-  }
-  if (!quickCommands.length) return <Text className="empty" colorScheme="light.700">{t.noData}</Text>
-  if (!filtered.length) return <Text className="empty" colorScheme="light.700">{t.noResults}</Text>
-  return (
-    <ul className="command-list">
-      {filtered.map(qc => <CommandListItem key={qc.id} qc={qc} onSelect={onSelect} />)}
-    </ul>
-  )
-}
-
-const SelectorContent = ({ filter, onClose, inputRef }: ContentProps) => {
-  const t = useTranslate(dictionary)
-  const ref = useRef<HTMLDivElement>(null)
+export const QuickCommandSelector = ({ inputRef }: { inputRef: React.RefObject<HTMLTextAreaElement | HTMLInputElement> }) => {
   const chat = useCurrentChat()
-  const [visibility, setVisibility] = useState<VisibilityLevelEnum | undefined>()
 
-  const onSelectQC = useCallback((slug: string) => {
-    const newValue = `/${slug}`
+  const onSelectItem = useCallback((qc: QuickCommandListResponse) => {
+    const newValue = `/${qc.slug}`
     chat.set('nextMessage', newValue)
-    onClose()
+
     if (!inputRef.current) return
-    // the following line prevents bugs by setting the text area value before react gets the chance to.
     inputRef.current.value = newValue
     inputRef.current.focus()
   }, [])
 
-  useKeyboardControls({
-    querySelectors: '.tabs button, button.qc',
-    disableTabBehavior: true,
-    onPressEscape: onClose,
-    onPressArrowLeft: () => (ref.current?.querySelector('.tabs button.active') as HTMLElement)?.focus(),
-    onPressArrowRight: () => (ref.current?.querySelector('button.qc') as HTMLElement)?.focus(),
-    ref,
-  }, [])
-
-  function createSectionItem(action: VisibilityLevelEnum | undefined) {
-    return (
-      <li key={action ?? 'all'}>
-        <button className={visibility === action ? 'active' : ''} onFocus={() => setVisibility(action)}>
-          {t[action || 'all']}
-        </button>
-      </li>
-    )
-  }
-  
-  return (
-    <div ref={ref}>
-      <header>
-        <IconBox><QuickCommand /></IconBox>
-        <Text as="h3">QUICK COMMANDS</Text>
-      </header>
-      <div className="body">
-        <ul className="tabs">{sections.map(createSectionItem)}</ul>
-        <FallbackBoundary message={t.error} mini>
-          <CommandList onSelect={onSelectQC} filter={filter} visibility={visibility} />
-        </FallbackBoundary>
-      </div>
-    </div>
-  )
+  return <Selector
+    inputRef={inputRef}
+    selectorConfig={{
+      resourceName: 'Quick Command',
+      shortcut: '/',
+      icon: <QuickCommand />,
+      url: '/quick-command/',
+      regex: quickCommandRegex,
+      data: () => aiClient.quickCommands.useQuery({ order: 'a-to-z' }),
+      isEnabled: useCurrentChatState('features').quickCommands,
+      onSelect: onSelectItem,
+    }}
+  />
 }
-
-/**
- * This renders the floating Quick Commands panel that allows the user to select a quick command. This appears whenever the user types "/"
- * in the textarea.
- */
-export const QuickCommandSelector = ({ inputRef }: Props) => {
-  const value = useCurrentChatState('nextMessage') ?? ''
-  const filter = useMemo(() => value === '/' || quickCommandRegex.test(value) ? value.substring(1) : undefined, [value])
-  const [isClosed, setClosed] = useState(false)
-  const selectorRef = useRef<HTMLDivElement>(null)
-  const isEnabled = useCurrentChatState('features').quickCommands
-  const shouldRender = isEnabled && filter !== undefined && !isClosed
-
-  // Resets the closed state whenever the message input is cleared
-  useEffect(() => {
-    if (!value) setClosed(false)
-  }, [value])
-
-  // Creates the following behavior while the user types in the message input:
-  // auto-complete on tab; move focus to the qc panel on press up or down; and close the qc panel on esc.
-  useEffect(() => {
-    function getFirst() {
-      return selectorRef.current?.querySelector('.qc') as HTMLElement | null
-    }
-
-    function onKeyDown(event: Event) {
-      const key = (event as KeyboardEvent).key
-      if (!selectorRef.current) return
-      if (key === 'Tab') {
-        getFirst()?.click()
-        event.preventDefault()
-      }
-      else if (key === 'ArrowDown' || key === 'ArrowUp') {
-        getFirst()?.focus()
-        event.preventDefault()
-      }
-      if (key === 'Escape') {
-        setClosed(true)
-      }
-    }
-
-    inputRef.current?.addEventListener('keydown', onKeyDown)
-    return () => inputRef.current?.removeEventListener('keydown', onKeyDown)
-  }, [])
-
-  // Closes the panel when the user clicks outside the qc panel or the message input.
-  useEffect(() => {
-    if (!shouldRender) return
-    function onClickOut(e: Event) {
-      const target = e.target as HTMLElement | null
-      if (!selectorRef.current?.contains(target) && !inputRef.current?.contains(target)) setClosed(true)
-    }
-    document.addEventListener('click', onClickOut)
-    return () => document.removeEventListener('click', onClickOut)
-  }, [shouldRender])
-
-  return (
-    <Fading visible={shouldRender} ref={selectorRef} className="quick-command-selector">
-      <SelectorContent filter={filter} onClose={() => setClosed(true)} inputRef={inputRef} />
-    </Fading>
-  )
-}
-
-const dictionary = {
-  en: {
-    all: 'All',
-    personal: 'Personal',
-    account: 'Account',
-    shared: 'Shared',
-    workspace: 'Workspace',
-    error: 'Could not load the quick commands.',
-    noData: 'You don\'t have any quick command yet.',
-    noResults: 'There are no quick commands to show here.',
-    openQC: 'Open this quick command\'s settings in a new tab.',
-  },
-  pt: {
-    all: 'Todos',
-    personal: 'Pessoal',
-    account: 'Conta',
-    shared: 'Compartilhado',
-    workspace: 'Workspace',
-    error: 'Não foi possível carregar os quick commands.',
-    noData: 'Você ainda não possui quick commands.',
-    noResults: 'Não há quick commands para mostrar aqui.',
-    openQC: 'Abra as configurações deste quick command em uma nova aba.',
-  },
-} satisfies Dictionary

package/src/views/MessageInput/dictionary.ts

@@ -10,7 +10,7 @@ const dictionary = {
     collapse: 'Hide buttons',
     expand: 'Show buttons',
     send: 'Send message',
-    placeholder: 'Type your prompt',
+    placeholder: 'Message to %s',
     cancel: 'Cancel',
     removeConfig: 'Remove all the configuration',
     removeStack: 'Stop using the current stack',
@@ -18,6 +18,7 @@ const dictionary = {
     removeKS: 'Stop using this knowledge source',
     selected: 'Selected',
     removeSelection: 'Remove current code selection',
+    remove: 'Remove',
   },
   pt: {
     stack: 'Selecionar stack',
@@ -28,7 +29,7 @@ const dictionary = {
     collapse: 'Esconder botões',
     expand: 'Mostrar botões',
     send: 'Enviar mensagem',
-    placeholder: 'Digite sua pergunta',
+    placeholder: 'Mensagem para %s',
     cancel: 'Cancelar',
     removeConfig: 'Remover todas as configurações',
     removeStack: 'Parar de usar a stack atual',
@@ -36,6 +37,7 @@ const dictionary = {
     removeKS: 'Parar de usar este knowledge source',
     selected: 'Selecionado',
     removeSelection: 'Desfazer seleção de código',
+    remove: 'Remover',
   },
 } satisfies Dictionary
 

package/src/views/MessageInput/index.tsx

@@ -5,6 +5,8 @@ import { ProgressBar } from '../../components/ProgressBar'
 import { useCurrentChat, useCurrentChatState, useWidgetState } from '../../context/hooks'
 import { quickCommandRegex } from '../../regex'
 import { ChatEntry } from '../../state/ChatEntry'
+import { AgentSelector } from './AgentSelector'
+import { ButtonAgent } from './ButtonAgent'
 import { ButtonGroup } from './ButtonGroup'
 import { useMessageInputDictionary } from './dictionary'
 import { InfoBar } from './InfoBar'
@@ -26,7 +28,8 @@ export const MessageInput = () => {
   const value = useCurrentChatState('nextMessage') ?? ''
   const isMinimized = useWidgetState('isMinimized')
   const textAreaRef = useRef<HTMLTextAreaElement>(null)
-
+  const agentLabel = useCurrentChatState('agent')?.label ?? 'Stackspot AI'
+  
   const onSend = useCallback(async () => {
     const message = chat.get('nextMessage')
     if (!message) return
@@ -53,12 +56,14 @@ export const MessageInput = () => {
     <MessageInputBox aria-busy={isLoading} className="message-input">
       <ProgressBar visible={isLoading} shimmer />
       <InfoBar />
+      <QuickCommandSelector inputRef={textAreaRef} />
+      <AgentSelector inputRef={textAreaRef} />
       <div className={listToClass(['action-box', focused && 'focused', isLoading && 'disabled'])}>
-        <QuickCommandSelector inputRef={textAreaRef} />
+        <ButtonAgent />
         <AdaptiveTextArea
           ref={textAreaRef}
           disabled={isLoading}
-          placeholder={t.placeholder}
+          placeholder={t.placeholder.replace('%s', agentLabel)}
           onChange={e => chat.set('nextMessage', e.target.value)}
           value={value}
           onFocus={() => setFocused(true)}