@dxos/plugin-assistant 0.8.3 → 0.8.4-main.f9ba587

package/src/components/ChatPrompt/ChatActions.tsx

@@ -0,0 +1,76 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React from 'react';
+
+import { IconButton, Select, useTranslation } from '@dxos/react-ui';
+import { mx } from '@dxos/react-ui-theme';
+
+import { type ChatEvent } from './events';
+import { meta } from '../../meta';
+
+export type ChatActionsProps = {
+  microphone?: boolean;
+  recording?: boolean;
+  processing?: boolean;
+  onEvent?: (event: ChatEvent) => void;
+};
+
+export const ChatActions = ({ microphone, recording, processing, onEvent }: ChatActionsProps) => {
+  const { t } = useTranslation(meta.id);
+
+  return (
+    <div className='flex items-center mie-1'>
+      {/* TODO(burdon): Modes (models and/or presets for blueprints?). */}
+      <Select.Root value={'ollama'} disabled>
+        <Select.TriggerButton classNames='mie-2 text-sm' />
+        <Select.Content>
+          <Select.Option value={'ollama'} classNames='text-sm'>
+            Ollama
+          </Select.Option>
+        </Select.Content>
+      </Select.Root>
+
+      {(processing && (
+        <IconButton
+          disabled={!processing}
+          classNames='px-1.5'
+          variant='ghost'
+          size={5}
+          icon='ph--x--regular'
+          iconOnly
+          label={t('button cancel processing')}
+          onClick={() => onEvent?.({ type: 'cancel' })}
+        />
+      )) || (
+        <IconButton
+          classNames='px-1.5'
+          variant='ghost'
+          size={5}
+          icon='ph--arrow-down--regular'
+          iconOnly
+          label={t('button scroll down')}
+          onClick={() => onEvent?.({ type: 'scroll-to-bottom' })}
+        />
+      )}
+
+      {microphone && (
+        <IconButton
+          disabled={!processing}
+          classNames={mx('px-1.5', recording && 'bg-primary-500')}
+          variant='ghost'
+          size={5}
+          icon='ph--microphone--regular'
+          iconOnly
+          noTooltip
+          label={t('button microphone')}
+          onMouseDown={() => onEvent?.({ type: 'record-start' })}
+          onMouseUp={() => onEvent?.({ type: 'record-stop' })}
+          onTouchStart={() => onEvent?.({ type: 'record-start' })}
+          onTouchEnd={() => onEvent?.({ type: 'record-stop' })}
+        />
+      )}
+    </div>
+  );
+};

package/src/components/ChatPrompt/ChatOptionsMenu.tsx

@@ -0,0 +1,52 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { useMemo } from 'react';
+
+import { type Blueprint, type BlueprintRegistry } from '@dxos/assistant';
+import { DropdownMenu, IconButton, Input, useTranslation } from '@dxos/react-ui';
+
+import { meta } from '../../meta';
+
+export type ChatOptionsMenuProps = {
+  blueprintRegistry?: BlueprintRegistry;
+  blueprints?: Blueprint[];
+  onChange?: (key: string, active: boolean) => void;
+};
+
+export const ChatOptionsMenu = ({ blueprintRegistry, blueprints, onChange }: ChatOptionsMenuProps) => {
+  const { t } = useTranslation(meta.id);
+  const blueprintOptions = useMemo(
+    () => blueprintRegistry?.query().map((blueprint) => ({ key: blueprint.key, label: blueprint.name })),
+    [blueprintRegistry],
+  );
+
+  return (
+    <DropdownMenu.Root>
+      <DropdownMenu.Trigger asChild disabled={!blueprintOptions?.length}>
+        <IconButton icon='ph--plus--regular' variant='ghost' size={5} iconOnly label={t('button add blueprint')} />
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Portal>
+        <DropdownMenu.Content side='left'>
+          <DropdownMenu.Viewport>
+            {blueprintOptions?.map((option) => (
+              <DropdownMenu.Item key={option.key}>
+                <Input.Root>
+                  <Input.Checkbox
+                    checked={!!blueprints?.find((blueprint) => blueprint.key === option.key)}
+                    onCheckedChange={(checked) => onChange?.(option.key, !!checked)}
+                  />
+                  {/* TODO(burdon): Remove need for custom margin. */}
+                  {/* TODO(burdon): Clicking on label doesn't toggle checkbox. */}
+                  <Input.Label classNames='m-0'>{option.label}</Input.Label>
+                </Input.Root>
+              </DropdownMenu.Item>
+            ))}
+          </DropdownMenu.Viewport>
+          <DropdownMenu.Arrow />
+        </DropdownMenu.Content>
+      </DropdownMenu.Portal>
+    </DropdownMenu.Root>
+  );
+};

package/src/components/ChatPrompt/ChatReferences.tsx

@@ -0,0 +1,52 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { useCallback } from 'react';
+
+import { type ContextBinder } from '@dxos/assistant';
+import { type Space } from '@dxos/client/echo';
+import { Filter, Obj, Ref } from '@dxos/echo';
+import { type ThemedClassName, useAsyncState, useTranslation } from '@dxos/react-ui';
+import { TagPicker, type TagPickerItemData, type TagPickerOptions } from '@dxos/react-ui-tag-picker';
+import { isNonNullable } from '@dxos/util';
+
+import { meta } from '../../meta';
+
+export type ChatReferencesProps = ThemedClassName<{
+  space: Space;
+  context: ContextBinder;
+  onUpdate?: (ids: string[]) => void;
+}>;
+
+export const ChatReferences = ({ classNames, space, context, onUpdate }: ChatReferencesProps) => {
+  const { t } = useTranslation(meta.id);
+
+  const [items] = useAsyncState<TagPickerItemData[]>(async () => {
+    const objects = await Ref.Array.loadAll(context.objects.value ?? []);
+    return objects.filter(isNonNullable).map((obj) => ({ id: obj.id, label: Obj.getLabel(obj) ?? obj.id }));
+  }, [context]);
+
+  const handleSearch = useCallback<NonNullable<TagPickerOptions['onSearch']>>(
+    (text, ids) => {
+      // TODO(burdon): Filter by Item tag (e.g., exclude "contacts") and Query by object label.
+      // TODO(burdon): Change to Filter.text().
+      const objects = space.db.query(Filter.everything()).runSync();
+      return objects
+        .map(({ object }) => ({ id: object.id, label: Obj.getLabel(object) ?? '' }))
+        .filter(({ id, label }) => !ids.includes(id) && label.toLocaleLowerCase().includes(text.toLocaleLowerCase()));
+    },
+    [space],
+  );
+
+  return (
+    <TagPicker
+      classNames={classNames}
+      mode='multi-select'
+      placeholder={t('context objects placeholder')}
+      items={items}
+      onSearch={handleSearch}
+      onUpdate={onUpdate}
+    />
+  );
+};

package/src/components/ChatPrompt/ChatStatusIndicator.tsx

@@ -0,0 +1,26 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React from 'react';
+
+import { Icon, Tooltip } from '@dxos/react-ui';
+import { Spinner } from '@dxos/react-ui-sfx';
+import { errorText } from '@dxos/react-ui-theme';
+
+export type ChatStatusIndicatorProps = {
+  error?: Error;
+  processing?: boolean;
+};
+
+export const ChatStatusIndicator = ({ error, processing }: ChatStatusIndicatorProps) => {
+  if (error) {
+    return (
+      <Tooltip.Trigger content={error.message} delayDuration={0}>
+        <Icon icon='ph--warning-circle--regular' classNames={errorText} size={5} />
+      </Tooltip.Trigger>
+    );
+  }
+
+  return <Spinner active={processing} />;
+};

package/src/components/ChatPrompt/events.ts

@@ -0,0 +1,12 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export type ChatEvent =
+  | { type: 'submit'; text: string }
+  | { type: 'cancel' }
+  | { type: 'thread-open' }
+  | { type: 'thread-close' }
+  | { type: 'scroll-to-bottom' }
+  | { type: 'record-start' }
+  | { type: 'record-stop' };

package/src/components/ChatPrompt/index.ts

@@ -0,0 +1,10 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './events';
+
+export * from './ChatActions';
+export * from './ChatOptionsMenu';
+export * from './ChatReferences';
+export * from './ChatStatusIndicator';

package/src/components/{Thread/ThreadMessage.tsx → ChatThread/ChatMessage.tsx}

@@ -15,34 +15,16 @@ import {
   ToggleContainer as NativeToggleContainer,
   type ToggleContainerProps,
 } from '@dxos/react-ui-components';
-import { Json } from '@dxos/react-ui-syntax-highlighter';
 import { mx } from '@dxos/react-ui-theme';
 import { safeParseJson } from '@dxos/util';
 
-import { ToolBlock, isToolMessage } from './ToolInvocations';
+import { Json, ToolBlock, isToolMessage } from './ToolBlock';
+import { type ChatProcessor } from '../../hooks';
 import { ToolboxContainer } from '../Toolbox';
 
-const panelClassNames = 'flex flex-col w-full px-2 bg-activeSurface rounded-md';
-const userClassNames = 'bg-[--user-fill] text-accentSurfaceText';
-
-const ToggleContainer = (props: ToggleContainerProps) => {
-  return <NativeToggleContainer {...props} classNames={mx(panelClassNames, props.classNames)} />;
-};
-
-const MessageContainer = ({ children, classNames, user }: ThemedClassName<PropsWithChildren<{ user?: boolean }>>) => {
-  if (!children) {
-    return null;
-  }
-
-  return (
-    <div role='list-item' className={mx('flex w-full', user && 'justify-end', classNames)}>
-      <div className={mx(user ? ['px-2 py-1 rounded-md', userClassNames] : 'w-full')}>{children}</div>
-    </div>
-  );
-};
-
-export type ThreadMessageProps = ThemedClassName<{
+export type ChatMessageProps = ThemedClassName<{
   space?: Space;
+  processor?: ChatProcessor;
   message: Message;
   debug?: boolean;
   tools?: Tool[];
@@ -51,21 +33,22 @@ export type ThreadMessageProps = ThemedClassName<{
   onAddToGraph?: (object: Obj.Any) => void;
 }>;
 
-export const ThreadMessage: FC<ThreadMessageProps> = ({
+export const ChatMessage = ({
   classNames,
   space,
+  processor,
   message,
   tools,
   onPrompt,
   onAddToGraph,
-}) => {
+}: ChatMessageProps) => {
   const { role, content = [] } = message;
 
   // TODO(burdon): Restructure types to make check unnecessary.
   if (isToolMessage(message)) {
     return (
       <MessageContainer classNames={mx(classNames, 'animate-[fadeIn_0.5s]')}>
-        <ToolBlock space={space} classNames={panelClassNames} message={message} tools={tools} />
+        <ToolBlock classNames={panelClassNames} message={message} tools={tools} />
       </MessageContainer>
     );
   }
@@ -84,7 +67,7 @@ export const ThreadMessage: FC<ThreadMessageProps> = ({
         classNames={mx(classNames, 'animate-[fadeIn_0.5s]')}
         user={block.type === 'text' && role === 'user'}
       >
-        <Component space={space} block={block} onPrompt={onPrompt} onAddToGraph={onAddToGraph} />
+        <Component space={space} processor={processor} block={block} onPrompt={onPrompt} onAddToGraph={onAddToGraph} />
       </MessageContainer>
     );
   });
@@ -92,6 +75,8 @@ export const ThreadMessage: FC<ThreadMessageProps> = ({
 
 type BlockComponent = FC<{
   space?: Space;
+  /** @deprecated Replace with context */
+  processor?: ChatProcessor;
   block: MessageContentBlock;
   onPrompt?: (text: string) => void;
   onAddToGraph?: (object: Obj.Any) => void;
@@ -139,14 +124,14 @@ const components: Record<string, BlockComponent> = {
   //
   // JSON
   //
-  ['json' as const]: ({ space, block, onPrompt, onAddToGraph }) => {
+  ['json' as const]: ({ space, processor, block, onPrompt, onAddToGraph }) => {
     invariant(block.type === 'json');
 
     switch (block.disposition) {
       case 'tool_list': {
         return (
           <ToggleContainer title={titles[block.disposition]} defaultOpen={true}>
-            <ToolboxContainer space={space} classNames='pbe-2' />
+            <ToolboxContainer space={space} processor={processor} classNames='pbe-2' />
           </ToggleContainer>
         );
       }
@@ -162,7 +147,7 @@ const components: Record<string, BlockComponent> = {
           <div className='flex flex-wrap gap-1'>
             {options.map((option, idx) => (
               <Button
-                classNames={'animate-[fadeIn_0.5s] rounded-2xl text-sm'}
+                classNames={'animate-[fadeIn_0.5s] rounded-sm text-sm'}
                 key={option}
                 onClick={() => onPrompt?.(option)}
               >
@@ -197,7 +182,7 @@ const components: Record<string, BlockComponent> = {
         const title = block.disposition ? titles[block.disposition] : undefined;
         return (
           <ToggleContainer title={title ?? 'JSON'}>
-            <Json data={safeParseJson(block.json ?? block)} classNames='!p-1 text-xs' />
+            <Json data={safeParseJson(block.json ?? block)} />
           </ToggleContainer>
         );
       }
@@ -215,7 +200,7 @@ const components: Record<string, BlockComponent> = {
 
     return (
       <ToggleContainer title={title ?? 'JSON'}>
-        <Json data={block} classNames='!p-1 text-xs' />
+        <Json data={block} />
       </ToggleContainer>
     );
   },
@@ -232,3 +217,22 @@ const titles: Record<string, string> = {
 };
 
 const systemDispositions: string[] = ['cot', 'artifact-update'];
+
+const panelClassNames = 'flex flex-col w-full px-2 bg-activeSurface rounded-sm';
+const userClassNames = 'bg-[--user-fill] text-accentSurfaceText';
+
+const ToggleContainer = (props: ToggleContainerProps) => {
+  return <NativeToggleContainer {...props} classNames={mx(panelClassNames, props.classNames)} />;
+};
+
+const MessageContainer = ({ children, classNames, user }: ThemedClassName<PropsWithChildren<{ user?: boolean }>>) => {
+  if (!children) {
+    return null;
+  }
+
+  return (
+    <div role='list-item' className={mx('flex w-full', user && 'justify-end', classNames)}>
+      <div className={mx(user ? ['px-2 py-1 rounded-sm', userClassNames] : 'w-full')}>{children}</div>
+    </div>
+  );
+};

package/src/components/ChatThread/ChatThread.stories.tsx

@@ -0,0 +1,148 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import '@dxos-theme';
+
+import { type StoryObj, type Meta } from '@storybook/react-vite';
+import React, { useEffect, useState } from 'react';
+
+import { Message } from '@dxos/ai';
+import { Obj } from '@dxos/echo';
+import { faker } from '@dxos/random';
+import { withClientProvider } from '@dxos/react-client/testing';
+import { ColumnContainer, withLayout, withTheme } from '@dxos/storybook-utils';
+
+import { ChatThread } from './ChatThread';
+import { translations } from '../../translations';
+
+faker.seed(1);
+
+const TEST_MESSAGES: Message[] = [
+  Obj.make(Message, {
+    role: 'user',
+    content: [
+      {
+        type: 'text',
+        text: faker.lorem.sentence(5),
+      },
+    ],
+  }),
+  Obj.make(Message, {
+    role: 'assistant',
+    content: [
+      {
+        type: 'text',
+        disposition: 'cot',
+        text: Array.from({ length: faker.number.int({ min: 3, max: 5 }) })
+          .map((_, idx) => `${idx + 1}. ${faker.lorem.paragraph()}`)
+          .join('\n'),
+      },
+      {
+        type: 'text',
+        text: Array.from({ length: faker.number.int({ min: 2, max: 5 }) })
+          .map(() => faker.lorem.paragraphs())
+          .join('\n\n'),
+      },
+      {
+        type: 'tool_use',
+        id: '1234',
+        name: 'search',
+        input: {},
+      },
+    ],
+  }),
+  Obj.make(Message, {
+    role: 'user',
+    content: [
+      {
+        type: 'tool_result',
+        toolUseId: '1234',
+        content: 'This is a tool result.',
+      },
+    ],
+  }),
+  Obj.make(Message, {
+    role: 'assistant',
+    content: [
+      {
+        type: 'tool_use',
+        id: '4567',
+        name: 'create',
+        input: {},
+      },
+    ],
+  }),
+  Obj.make(Message, {
+    role: 'user',
+    content: [
+      {
+        type: 'tool_result',
+        toolUseId: '4567',
+        content: 'This is a tool result.',
+      },
+    ],
+  }),
+  Obj.make(Message, {
+    role: 'assistant',
+    content: [
+      {
+        type: 'text',
+        text: faker.lorem.paragraphs(1),
+      },
+    ],
+  }),
+  Obj.make(Message, {
+    role: 'assistant',
+    content: [
+      {
+        type: 'json',
+        disposition: 'suggest',
+        json: JSON.stringify({ text: 'Search...' }),
+      },
+      {
+        type: 'json',
+        disposition: 'suggest',
+        json: JSON.stringify({ text: faker.lorem.paragraphs(1) }),
+      },
+    ],
+  }),
+];
+
+const meta = {
+  title: 'plugins/plugin-assistant/ChatThread',
+  component: ChatThread,
+  decorators: [withClientProvider({ createIdentity: true }), withTheme, withLayout({ Container: ColumnContainer })],
+  parameters: {
+    translations,
+  },
+} satisfies Meta<typeof ChatThread>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default = {
+  args: {
+    messages: TEST_MESSAGES,
+  },
+} satisfies Story;
+
+export const Incremental = {
+  render: () => {
+    const [messages, setMessages] = useState<Message[]>([]);
+    useEffect(() => {
+      let i = 0;
+      const interval = setInterval(() => {
+        setMessages((messages) => [...messages, TEST_MESSAGES[i++]]);
+        if (i >= TEST_MESSAGES.length) {
+          clearInterval(interval);
+        }
+      }, 2_000);
+
+      return () => clearInterval(interval);
+    }, []);
+
+    return <ChatThread messages={messages} collapse />;
+  },
+} satisfies Story;

package/src/components/ChatThread/ChatThread.tsx

@@ -0,0 +1,68 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { type CSSProperties, forwardRef, useMemo } from 'react';
+
+import { type Message } from '@dxos/ai';
+import { PublicKey } from '@dxos/keys';
+import { type Space } from '@dxos/react-client/echo';
+import { type Identity } from '@dxos/react-client/halo';
+import { type ThemedClassName } from '@dxos/react-ui';
+import { ScrollContainer, type ScrollController } from '@dxos/react-ui-components';
+import { mx } from '@dxos/react-ui-theme';
+import { keyToFallback } from '@dxos/util';
+
+import { ChatMessage, type ChatMessageProps } from './ChatMessage';
+import { messageReducer } from './reducer';
+import { type ChatProcessor } from '../../hooks';
+
+export type ChatThreadProps = ThemedClassName<{
+  identity?: Identity;
+  space?: Space;
+  // TODO(burdon): Replace with context.
+  processor?: ChatProcessor;
+  messages?: Message[];
+  collapse?: boolean;
+}> &
+  Pick<ChatMessageProps, 'debug' | 'tools' | 'onPrompt' | 'onDelete' | 'onAddToGraph'>;
+
+export const ChatThread = forwardRef<ScrollController, ChatThreadProps>(
+  ({ classNames, identity, space, processor, messages, collapse = true, ...props }, forwardedRef) => {
+    const userHue = useMemo(() => {
+      return identity?.profile?.data?.hue || keyToFallback(identity?.identityKey ?? PublicKey.random()).hue;
+    }, [identity]);
+
+    // TODO(dmaretskyi): This needs to be a separate type: `id` is not a valid ObjectId, this needs to accommodate messageId for deletion.
+    const { messages: filteredMessages = [] } = useMemo(() => {
+      if (collapse) {
+        return (messages ?? []).reduce<{ messages: Message[]; current?: Message }>(messageReducer, {
+          messages: [],
+        });
+      } else {
+        return { messages: messages ?? [] };
+      }
+    }, [messages, collapse]);
+
+    return (
+      <ScrollContainer ref={forwardedRef} classNames={classNames} fade>
+        <div
+          role='none'
+          className={mx(filteredMessages.length > 0 && 'pbs-6 pbe-6')}
+          style={{ '--user-fill': `var(--dx-${userHue}Fill)` } as CSSProperties}
+        >
+          {filteredMessages.map((message) => (
+            <ChatMessage
+              key={message.id}
+              classNames='px-4 pbe-4'
+              space={space}
+              processor={processor}
+              message={message}
+              {...props}
+            />
+          ))}
+        </div>
+      </ScrollContainer>
+    );
+  },
+);

package/src/components/{Thread/ToolInvocations.tsx → ChatThread/ToolBlock.tsx}

@@ -8,11 +8,9 @@ import { type AgentStatus, type Message, type Tool } from '@dxos/ai';
 import { log } from '@dxos/log';
 import { type ThemedClassName } from '@dxos/react-ui';
 import { NumericTabs, StatusRoll, ToggleContainer } from '@dxos/react-ui-components';
-import { Json } from '@dxos/react-ui-syntax-highlighter';
+import { type JsonProps, Json as NativeJson } from '@dxos/react-ui-syntax-highlighter';
 import { isNonNullable, isNotFalsy } from '@dxos/util';
 
-import { type ThreadMessageProps } from './ThreadMessage';
-
 export const isToolMessage = (message: Message) => {
   return message.content.some((block) => block.type === 'tool_use' || block.type === 'tool_result');
 };
@@ -29,7 +27,12 @@ const getToolCaption = (tool: Tool | undefined, status: AgentStatus | undefined)
   return status?.message ?? tool.caption ?? `Calling ${getToolName(tool)}...`;
 };
 
-export const ToolBlock: FC<ThemedClassName<ThreadMessageProps>> = ({ classNames, message, tools }) => {
+export type ToolBlockProps = ThemedClassName<{
+  message: Message;
+  tools?: Tool[];
+}>;
+
+export const ToolBlock: FC<ToolBlockProps> = ({ classNames, message, tools }) => {
   const { content = [] } = message;
 
   let request: { tool: Tool | undefined; block: any } | undefined;
@@ -43,8 +46,6 @@ export const ToolBlock: FC<ThemedClassName<ThreadMessageProps>> = ({ classNames,
             return null;
           }
 
-          log.info('tool_use', { tool: request?.tool, status: block.currentStatus });
-
           request = { tool: tools?.find((tool) => tool.name === block.name), block };
           return { title: getToolCaption(request.tool, block.currentStatus), block };
         }
@@ -97,10 +98,14 @@ export const ToolContainer: FC<ThemedClassName<{ items: { title: string; block:
 
   return (
     <ToggleContainer classNames={['flex flex-col', classNames]} title={title} open={open} onChangeOpen={setOpen}>
-      <div className='grid grid-cols-[32px_1fr]'>
+      <div className='w-full grid grid-cols-[32px_1fr]'>
         <NumericTabs ref={tabsRef} length={items.length} selected={selected} onSelect={handleSelect} />
-        <Json data={items[selected].block} classNames='!p-1 text-xs' />
+        <Json data={items[selected].block} />
       </div>
     </ToggleContainer>
   );
 };
+
+export const Json = ({ data }: Pick<JsonProps, 'data'>) => (
+  <NativeJson data={data} classNames='!p-1 text-xs bg-transparent' />
+);

package/src/components/{AmbientDialog → ChatThread}/index.ts

@@ -2,4 +2,4 @@
 // Copyright 2025 DXOS.org
 //
 
-export * from './AmbientDialog';
+export * from './ChatThread';

package/src/components/PromptSettings.tsx

@@ -8,11 +8,11 @@ import React, { type ChangeEvent, useCallback } from 'react';
 import { debounce } from '@dxos/async';
 import { Input, Select, Toolbar, useTranslation } from '@dxos/react-ui';
 
-import { ASSISTANT_PLUGIN } from '../meta';
+import { meta } from '../meta';
 import { TemplateKinds, type TemplateType, type TemplateKindSchema } from '../types';
 
 export const PromptSettings = ({ template }: { template: TemplateType }) => {
-  const { t } = useTranslation(ASSISTANT_PLUGIN);
+  const { t } = useTranslation(meta.id);
 
   const handleKindChange = useCallback(
     (value: string) => {