@stack-spot/ai-chat-widget 0.11.0 → 1.0.0-dev.1768324407795

package/src/views/Chat/ChatMessage.tsx

@@ -1,58 +1,263 @@
-import { Button, IconBox, Text } from '@citric/core'
-import { Copy, Dislike, DislikeFill, Like, LikeFill, TimesCircle } from '@citric/icons'
-import { Avatar, Badge, IconButton } from '@citric/ui'
-import { aiClient } from '@stack-spot/portal-network'
-import { listToClass } from '@stack-spot/portal-theme'
+import { Icon } from '@stack-spot/citric-icons'
+import { Alert, Badge, Button, CheckboxGroup, Column, IconButton, ImageBox, ImageWithFallback, Input, RadioGroup, Row, Text, Tooltip } from '@stack-spot/citric-react'
+import { agentToolsClient } from '@stack-spot/portal-network'
+import { listToClass, theme } from '@stack-spot/portal-theme'
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
-import { useCallback, useMemo, useRef, useState } from 'react'
+import { groupBy } from 'lodash'
+import { createElement, Dispatch, useCallback, useMemo, useRef, useState } from 'react'
+import { PhoneInput } from 'react-international-phone'
+import 'react-international-phone/style.css'
+import { FileDescription } from '../../components/FileDescription'
 import { Markdown } from '../../components/Markdown'
-import { useChatEntry, useCurrentChat, useWidget } from '../../context/hooks'
+import { useChatEntry, useCurrentChat, useCurrentChatState, useWidget } from '../../context/hooks'
+import { useMidnightUpdateView } from '../../hooks/midnight-update-view'
 import { ChatEntry, SerializableAction, TextChatEntry } from '../../state/ChatEntry'
 import { useDateFormatter } from '../../utils/date'
+import { toolById } from '../../utils/tools'
 import { AgentInfo } from './AgentInfo'
+import { ButtonExecutionDetail } from './ButtonExecutionDetail'
 import { useChatScrollToBottomEffect } from './chat-scroll'
+import { onCopyAll, onCopyCode, onLikeOrDislike } from './events'
+import { StepsList, StepsPlaceholder, ViewToolsDetails } from './StepsList'
 
-export const ChatMessage = ({ message, username, isLast }: { message: ChatEntry, username: string, isLast: boolean }) => {
+export interface CustomRenderResult {
+  /**
+   * The React Element to render.
+   */
+  content: React.ReactElement,
+  /**
+   * If set to "prepend" or "append", instead of replacing the default rendering of the message, it will complement it, by rendering this
+   * custom content in addition to the default rendering.
+   * 
+   * - prepend: place the custom content before the default rendering;
+   * - append: place the custom content after the default rendering.
+   */
+  mode: 'prepend' | 'append' | 'replace',
+}
+
+export interface CustomMessage {
+  /**
+   * React component to render before each message in the chat. It receives the message as a prop.
+   */
+  beforeMessage?: React.FC<{ message: ChatEntry }>,
+  /**
+   * React component to render after each message in the chat. It receives the message as a prop.
+   */
+  afterMessage?: React.FC<{ message: ChatEntry }>,
+  /**
+   * A custom message renderer. The custom message can replace or complement the original message.
+   * 
+   * @param message the message to render.
+   * @returns a CustomRenderResult or undefined. If undefined, no custom message is added to the view and the default message renderer is
+   * used.
+   */
+  customRenderer?: (message: TextChatEntry) => CustomRenderResult | undefined,
+}
+
+interface Props extends CustomMessage {
+  /**
+   * The ChatEntry to render.
+   */
+  message: ChatEntry,
+  /**
+   * The name of the user currently logged in (will be used if the agent type of the message is "user").
+   */
+  username?: string,
+  /**
+   * Whether or not this is the last message in the chat. This is important for disabling action buttons in messages that are no longer
+   * relevant.
+   */
+  isLast: boolean,
+}
+
+interface RenderInputsEntryProps {
+  isLast: boolean,
+  entry: TextChatEntry,
+  value: string[],
+  setValue: Dispatch<React.SetStateAction<string[]>>,
+  labels: string[],
+  setLabels: Dispatch<React.SetStateAction<string[]>>,
+}
+
+const RenderInputsEntry = ({ isLast, entry, value, setValue, labels, setLabels }: RenderInputsEntryProps) => {
+  const chat = useCurrentChat()
+  const [radioValue, setRadioValue] = useState<Required<TextChatEntry>['options'][number] | undefined>()
+  const [checkboxValue, setCheckboxValue] = useState<Required<TextChatEntry>['options']>([])
+
+  const renderInputs = () => {
+    if (entry.type === 'input-text') {
+      return <Input
+        name={entry.name}
+        value={value[0] ?? ''}
+        style={{ maxWidth: '500px' }}
+        autoFocus
+        {...entry.validations}
+        onChange={v => setValue([v])}
+        required={entry.required}
+      />
+    }
+
+    if (entry.type === 'input-radio') {
+      return <RadioGroup
+        value={radioValue}
+        onChange={(v) => {
+          setRadioValue(v)
+          setValue([v.label])
+          v.value && setLabels([v.value])
+        }}
+        options={entry.options ?? []}
+        renderKey={o => `${o.value}_${o.label}`}
+        renderLabel={o => (
+          <Row gap={3} w="50%">
+            <Text>{o.label}</Text>
+            {o.hasInput && o.value && labels.findIndex((label) => label === o.value) !== -1 &&
+              <Input name={entry.name} onChange={v => setValue([v])} required style={{ height: '30px', width: '33%' }} />}
+          </Row>
+        )}
+      />
+    }
+
+    if (entry.type === 'button-list') {
+      return <Row className="button-group" gap="8px">
+        {entry.options?.map((item) => <Button
+          key={item.label}
+          colorScheme={item.color}
+          onClick={() => {
+            item.value && chat.pushMessage(
+              ChatEntry.createUserEntry(item.value, false, entry.name, item?.label ? [item?.label] : undefined),
+            )
+          }}
+        >
+          {item.label}
+        </Button>)}
+      </Row>
+    }
+
+    if (entry.type === 'input-checkbox') {
+      return <CheckboxGroup
+        value={checkboxValue}
+        onChange={(v) => {
+          setCheckboxValue(v)
+          setValue(v.map(i => i.label))
+          setLabels(v.map(i => i.value).filter(i => !!i) as string[])
+        }}
+        options={entry.options ?? []}
+        renderKey={o => `${o.value}_${o.label}`}
+        renderLabel={o => (
+          <Row gap={3}>
+            <Text>{o.label}</Text>
+            {o.hasInput && o.value && labels.findIndex((label) => label === o.value) !== -1 &&
+              <div style={{ width: '33%' }}>
+                <Input
+                  name={entry.name}
+                  {...entry.validations}
+                  onChange={(v) => {
+                    const customIndex = value.findIndex(v => !entry.options?.map(o => o.label).includes(v))
+                    if (customIndex === -1) {
+                      setValue([...value, v])
+                    } else {
+                      const newValue = [...value]
+                      newValue[customIndex] = v
+                      setValue(newValue)
+                    }
+                  }}
+                  required={true}
+                  style={{ height: '30px' }}
+                />
+              </div>
+            }
+          </Row>
+        )}
+      />
+    }
+
+    if (entry.type === 'input-phone') {
+      return (<PhoneInput
+        defaultCountry="br"
+        value={value[0]}
+        onChange={(phone) => setValue([phone])}
+        className="input-phone"
+        placeholder="11961234567"
+      />)
+    }
+    return <p className="plain-text">{entry.content}</p>
+  }
+
+  return <Column gap={4}>
+    <Text appearance="body2">{entry.content}</Text>
+    {isLast && renderInputs()}
+  </Column>
+}
+
+const UserInfo = ({ entry }: { entry: TextChatEntry }) => {
+  switch (entry.agentType) {
+    case 'user': return
+    case 'bot': return <AgentInfo agent={entry.agent} />
+    case 'system': return <AgentInfo agent={{ id: 'system', label: 'System' }} icon={<Icon icon="Cog" />} />
+  }
+}
+
+/**
+ * Renders a message (ChatEntry) in the chat.
+ */
+export const ChatMessage = ({ message, isLast, beforeMessage, afterMessage, customRenderer }: Props) => {
   const t = useTranslate(dictionary)
   const [liked, setLiked] = useState<boolean | undefined>()
+  const [value, setValue] = useState<string[]>(message.getValue()?.initialValue ?? [])
+  const [labels, setLabels] = useState<string[]>(message.getValue()?.initialValue ?? [])
   const entry = useChatEntry(message)
   const dateFormatter = useDateFormatter()
-  const userInfo = entry.agentType === 'user' ? <Avatar size="xs">{username}</Avatar> : <AgentInfo agent={entry.agent} />
   const date = new Date(entry.updated ?? '')
-  const shouldShowDate = entry.updated && !isNaN(date.getTime())
+  const shouldShowFooter = entry.updated && !isNaN(date.getTime())
   const ref = useRef<HTMLLIElement>(null)
+  const chatRef = useRef<HTMLDivElement>(null)
   const widget = useWidget()
   const chat = useCurrentChat()
+  const agentId = entry.agent?.id ?? ''
+  // enabled: we don't want to make any request if there is no agent
+  const [agent] = agentToolsClient.agent.useStatefulQuery({ agentId }, { enabled: !!agentId })
+  const toolkits = useMemo(() => [
+    ...agent?.toolkits?.builtin_toolkits ?? [],
+    ...agent?.toolkits?.custom_toolkits ?? [],
+    ...agent?.toolkits?.mcp_toolkits ?? [],
+  ], [agent])
+  const [agentsTools] = agentToolsClient.agentsByIds.useStatefulQuery(
+    { searchAgentsRequest: { ids: entry.tools || [''] } }, { enabled: !!entry.tools?.length })
+  const [copied, setCopied] = useState(false)
+  const [showUserButtonCopy, setShowUserButtonCopy] = useState(false)
+  const isPlanning = useCurrentChatState('isPlaning') ?? false
+
+  // Dynamic steps are identified by the "dynamic" id.
+  const isDynamicSteps = !!entry?.steps?.some((s) => s.id?.toLowerCase() === 'dynamic')
+  const hasTools = ((agentsTools?.length ?? 0) > 0) || ((entry.tools?.length ?? 0) > 0)
+  const showToolBox = hasTools && !isDynamicSteps
+  
   useChatScrollToBottomEffect(ref, [entry])
+  useMidnightUpdateView()
 
   const detailKS = useCallback(({ name, slug, documentScore, documentId }: Required<TextChatEntry>['knowledgeSources'][number]) => {
     widget.set('currentKSInPanel', { name, slug, score: documentScore, documentId })
     widget.set('panel', 'ks-details')
   }, [])
 
-  const runAction = useCallback((action: SerializableAction) => {
+  const runAction = (action: SerializableAction) => {
     if (action.type === 'link') {
       window.open(action.exec, '_blank')
     } else {
-      chat.pushMessage(ChatEntry.createUserEntry(action.exec))
+      if (action.exec) {
+        chat.pushMessage(ChatEntry.createUserEntry(action.exec))
+      } else {
+        value && chat.pushMessage(ChatEntry.createUserEntry(value.join(', '), false, entry.name, labels))
+      }
     }
-  }, [])
+  }
 
   const { like, dislike } = useMemo(() => {
     async function feedback(like: boolean) {
       if (!entry.messageId || like === liked) return
       setLiked(like)
       try {
-        await aiClient.createEvent.mutate({
-          body: [{
-            feedback: like ? 'LIKE' : 'DISLIKE',
-            message_id: entry.messageId,
-            type: 'user_feedback_provided',
-            code: '',
-            generated_at: Math.floor(new Date().getTime() / 1000),
-            size: 0,
-          }],
-        })
+        await onLikeOrDislike(entry.messageId, like)
       } catch {
         setLiked(liked)
       }
@@ -63,66 +268,239 @@ export const ChatMessage = ({ message, username, isLast }: { message: ChatEntry,
       dislike: () => feedback(false),
     }
   }, [entry.messageId, liked])
-  
-  return (entry.content || entry.error) && (
-    <li className={entry.agentType} ref={ref}>
-      <div className="chat-message">
-        <div className="user-info">{userInfo}</div>
-        {entry.content && <div className={listToClass(['message-content', entry.card && 'card'])}>
-          {entry.badges?.length && <div className="badges">
-            {entry.badges.map((b, index) => <Badge key={index} palette={b.color ?? 'cyan'} appearance="square">{b.label}</Badge>)}
-          </div>}
-          {entry.type === 'md' ? <Markdown>{entry.content}</Markdown> : <p className="plain-text">{entry.content}</p>}
-          {entry.actions?.length && <div className="actions">
-            {entry.actions.map(
-              (a, index) => (
-                <Button
-                  key={index}
-                  appearance={a.appearance === 'primary' ? 'contained' : 'outlined'}
-                  colorScheme="inverse"
-                  onClick={() => runAction(a)}
-                  disabled={!isLast}
-                >
-                  {a.title}
-                </Button>
-              ),
-            )}
-          </div>}
-        </div>}
-      </div>
-      {entry.error && (
-        <div className="error">
-          <IconBox size="xs"><TimesCircle /></IconBox>
-          <Text appearance="microtext1">{entry.error}</Text>
-        </div>
+
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+    if (event.ctrlKey && event.key === 'c') {
+      const selectedText = window.getSelection()?.toString()
+      selectedText && onCopyCode(selectedText, '', chat)
+    }
+  }
+
+  const renderActions = useCallback(() => <> {entry.actions?.length && (
+    <div className="actions">
+      {entry.actions.map(
+        (a, index) => (<>
+          {(!a.hideWhenNotLast || isLast) && <Button
+            key={index}
+            appearance={a.appearance === 'primary' ? 'contained' : 'outlined'}
+            colorScheme={a.colorScheme ? a.colorScheme : 'inverse'}
+            onClick={() => runAction(a)}
+            disabled={(entry.required && !value.length) ?? !isLast}
+            type={a.buttonType ?? 'button'}
+            size={a.size}
+          >
+            {a.title}
+          </Button>}
+        </>),
       )}
-      {!!entry.knowledgeSources?.length && <div className="ks-box">
-        <Text appearance="microtext1" colorScheme="light.700">Knowledge Sources:</Text>
-        <ul>{entry.knowledgeSources.map(ks => (
-          <li key={ks.slug}>
-            <Button size="sm" colorScheme="light" onClick={() => detailKS(ks)}>{ks.name}</Button>
-          </li>
-        ))}</ul>
-      </div>}
-      <div className="message-footer">
-        {entry.agentType === 'bot' && !entry.error && <div className="message-actions">
-          {entry.type === 'md' && (
-            <IconButton title={t.copy} aria-label={t.copy} onClick={() => navigator.clipboard.writeText(entry.content)}>
-              <Copy />
-            </IconButton>
+    </div>
+  )}
+  </>, [entry, isLast, runAction])
+
+  const handleCopy = () => {
+    onCopyAll(entry, chat)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 2000)
+  }
+
+  const renderUploads = () => {
+    const groups = groupBy(entry.upload, f => f.image ? 'images' : 'documents')
+    const lists: React.ReactElement[] = []
+    if (groups.images?.length) {
+      lists.push(<ul className="image-uploads">{groups.images.map(f => <li key={f.id}><img src={f.image}></img></li>)}</ul>)
+    }
+    if (groups.documents?.length) {
+      lists.push(
+        <ul className="document-uploads">
+          {groups.documents.map(f => <li key={f.id}><FileDescription fileName={f.name} /></li>)}
+        </ul>,
+      )
+    }
+    return lists
+  }
+
+  const renderContent = () => {
+    const custom = customRenderer?.(entry)
+    if (custom?.mode === 'replace') return custom.content
+
+    if (entry.type === 'md') {
+      return <>
+        {renderUploads()}
+        {custom?.mode === 'prepend' && custom.content}
+        <Markdown onCopyCode={(code) => onCopyCode(code, entry.messageId ?? '', chat)}>{entry.content}</Markdown>
+        {custom?.mode === 'append' && custom.content}
+        {renderActions()}
+      </>
+    }
+
+    if (entry.type === 'text') {
+      return <>
+        {custom?.mode === 'prepend' && custom.content}
+        <p className="plain-text">{entry.content}</p>
+        {custom?.mode === 'append' && custom.content}
+        {renderUploads()}
+        {renderActions()}
+      </>
+    }
+
+    return <form>
+      <RenderInputsEntry entry={entry} isLast={isLast} value={value} setValue={setValue} setLabels={setLabels} labels={labels} />
+      <div style={{ marginTop: theme.spacing[4] }}>
+        {renderActions()}
+      </div>
+    </form>
+  }
+
+  function openResourcesPanel() {
+    widget.set('currentMessageInPanel', { chatId: chat.id, messageId: message.id })
+    widget.set('panel', 'resources')
+  }
+
+  const buttonExecutionDetail = useMemo(() =>  <ButtonExecutionDetail chatId={chat.id} messageId={message.id} />, [chat.id, message.id])
+  const shouldShowToolsOnlyMessage = (entry.done !== false || entry.hasPlanning || isDynamicSteps) && !!entry.steps?.length
+  const shouldRender = entry.content || entry.error || shouldShowToolsOnlyMessage || !!entry.upload?.length
+
+  return shouldRender && (
+    <li key={entry.messageId} className={entry.agentType} ref={ref}>
+      <div className="chat-message-container"
+        onMouseEnter={entry.agentType === 'user' ? () => setShowUserButtonCopy(true) : undefined}
+        onMouseLeave={entry.agentType === 'user' ? () => setShowUserButtonCopy(false) : undefined}>
+        <div className="chat-message" ref={chatRef} onKeyDown={handleKeyDown} tabIndex={0}>
+          <div className={`user-info ${entry.agentType}`}><UserInfo entry={entry} /></div>
+          {beforeMessage && createElement(beforeMessage, { message })}
+          {(entry.content || entry.steps || entry.upload?.length) && (
+            <div className={listToClass(['message-content', entry.card && 'card', entry.type])}>
+              {!!entry.badges?.length && <div className="badges">
+                {entry.badges.map((b, index) => <Badge key={index} colorPalette={b.color ?? 'cyan'} appearance="square">{b.label}</Badge>)}
+              </div>}
+
+              {!!entry.steps?.length && !isDynamicSteps && <StepsList steps={entry.steps} chatId={chat.id} messageId={message.id} />}
+
+              {renderContent()}
+
+            </div>
           )}
-          {entry.messageId && (
-            <>
-              <IconButton title={t.like} aria-label={t.like} onClick={like}>
-                {liked === true ? <LikeFill /> : <Like />}
-              </IconButton>
-              <IconButton title={t.dislike} aria-label={t.dislike} onClick={dislike}>
-                {liked === false ? <DislikeFill /> : <Dislike />}
-              </IconButton>
-            </>
+          {isPlanning && entry.agentType === 'bot' && isLast && <StepsPlaceholder />}
+
+          {entry.error && <Alert type="error">{entry.error}</Alert>}
+        </div>
+        {afterMessage && createElement(afterMessage, { message })}
+
+        {!!entry.knowledgeSources?.length && <div className="ks-box">
+          <Text appearance="microtext1" color="light.700">Knowledge Sources:</Text>
+          <ul>{entry.knowledgeSources.map((ks, index) => (
+            <li key={index}>
+              <Button size="sm" colorScheme="light" onClick={() => detailKS(ks)}>{ks.name}</Button>
+            </li>
+          ))}</ul>
+        </div>}
+
+        {showToolBox && 
+          <div className="tools-box">
+            <Button appearance="none" onClick={openResourcesPanel} aria-label={t.openResourcesPanel}>
+              {agentsTools?.map((agent) => (
+                <ImageBox key={agent.id} className="agent-info-avatar-resource">
+                  <ImageWithFallback
+                    src={agent.avatar ?? undefined}
+                    fallback={<Icon icon="Agent" />}
+                    alt={agent.name}
+                    aria-label={agent.name}
+                    title={agent.name}
+                  />
+                </ImageBox>
+              ))}
+              {entry?.tools?.map((id) => {
+                // In the multi-agents feature, an agent is returned as a tool, but we don't want to show agents here.
+                if (agentsTools?.some((agent) => agent.id === id)) return null
+                const tool = toolById(id, toolkits)
+                return (
+                  <ImageBox key={id} className="agent-info-avatar-resource">
+                    <ImageWithFallback
+                      src={tool?.image}
+                      fallback={<Icon icon="Cog" title={tool?.name} aria-label={tool?.name} />}
+                      alt={tool?.name}
+                      aria-label={tool?.name}
+                      title={tool?.name}
+                    />
+                  </ImageBox>
+                )
+              })}
+            </Button>
+            <ViewToolsDetails chatId={chat.id} messageId={message.id} />
+          </div>
+        }
+
+        {!!entry.steps?.length && isDynamicSteps && buttonExecutionDetail}
+
+        {shouldShowFooter && <div className="message-footer">
+          {entry.agentType === 'bot' && !entry.error && <div className="message-actions">
+            {entry.type === 'md' && (
+              <IconButton
+                icon="Copy"
+                className="copy-btn"
+                appearance="square"
+                title={t.copy}
+                aria-label={t.copy}
+                feedback={t.copied}
+                onClick={handleCopy}
+              />
+            )}
+            {entry.messageId && (
+              <>
+                <IconButton
+                  group={liked === true ? 'fill' : 'outline'}
+                  icon="Like"
+                  appearance="square"
+                  title={t.like}
+                  aria-label={t.like}
+                  onClick={like}
+                />
+                <IconButton
+                  group={liked === false ? 'fill' : 'outline'}
+                  icon="Dislike"
+                  appearance="square"
+                  color="light"
+                  title={t.dislike}
+                  aria-label={t.dislike}
+                  onClick={dislike}
+                />
+              </>
+            )}
+          </div>}
+
+          {entry.agentType === 'user' && (
+            <div className="message-actions">
+              {copied ? (
+                <Tooltip content={t.copied} position={'left'}>
+                  <IconButton
+                    icon="Check"
+                    appearance="square"
+                    title={t.copied}
+                    aria-label={t.copied}
+                    size="sm"
+                  />
+                </Tooltip>
+              ) : (
+                showUserButtonCopy && (
+                  <div className="action-bar">
+                    <IconButton
+                      icon="Copy"
+                      appearance="square"
+                      title={t.copy}
+                      aria-label={t.copy}
+                      onClick={handleCopy}
+                      size="sm"
+                    />
+                  </div>
+                )
+              )}
+            </div>
           )}
+
+          <Text appearance="microtext1" className="chat-date">
+            {dateFormatter.formatForChatMessage(date)}
+          </Text>
         </div>}
-        {shouldShowDate && <Text appearance="microtext1" className="chat-date">{dateFormatter.formatForChatMessage(date)}</Text>}
       </div>
     </li>
   )
@@ -133,10 +511,18 @@ const dictionary = {
     copy: 'Copy',
     like: 'Like',
     dislike: 'Dislike',
+    tools: 'Tools',
+    openToolsPanel: 'Open the tools panel to see more details.',
+    openResourcesPanel: 'Open the resources panel to see more details.',
+    copied: 'Copied',
   },
   pt: {
     copy: 'Copiar',
     like: 'Gostei',
     dislike: 'Não gostei',
+    tools: 'Ferramentas',
+    openToolsPanel: 'Abrir o painel de ferramentas para ver mais detalhes.',
+    openResourcesPanel: 'Abrir o painel de recursos para ver mais detalhes.',
+    copied: 'Copiado',
   },
 } satisfies Dictionary

package/src/views/Chat/ChatMessages.tsx

@@ -1,17 +1,28 @@
 import { useMemo, useRef } from 'react'
 import { useChatMessages } from '../../context/hooks'
-import { ChatMessage } from './ChatMessage'
+import { ChatMessage, CustomMessage } from './ChatMessage'
 import { ChatList } from './styled'
 
-interface Props {
+interface Props extends CustomMessage {
   username: string,
   chatId: string,
 }
 
-export const ChatMessages = ({ chatId, username }: Props) => {
+/**
+ * Renders all messages of a chat.
+ */
+export const ChatMessages = ({ chatId, username, beforeMessage, afterMessage, customRenderer }: Props) => {
   const messages = useChatMessages(chatId)
   const items = useMemo(
-    () => messages.map((m, index) => <ChatMessage key={m.id} message={m} username={username} isLast={index === messages.length - 1} />),
+    () => messages.map((m, index) => <ChatMessage
+      key={m.id}
+      message={m}
+      username={username}
+      isLast={index === messages.length - 1}
+      beforeMessage={beforeMessage}
+      afterMessage={afterMessage}
+      customRenderer={customRenderer}
+    />),
     [messages],
   )
   const ref = useRef<HTMLUListElement>(null)