@oxy.so/bloom 6.3.0 → 7.0.0

package/src/agent-creator/AgentCreatorBase.tsx

@@ -0,0 +1,287 @@
+import { Platform } from 'react-native';
+import { AgentAvatar, type AvatarConfig } from '../agent-avatar';
+import { CloseButton } from '../button/CloseButton';
+import { useDirectionProps } from '../hooks/use-is-rtl';
+import { StyledPressable, StyledView } from '../styles/styled-primitives';
+import { TextFieldInput } from '../text-field';
+import { Textarea } from '../textarea';
+import { useTheme } from '../theme/use-theme';
+import { Text } from '../typography';
+import { AgentPreferencesPanel } from './AgentPreferencesPanel';
+import { CustomColorPicker } from './CustomColorPicker';
+import { EmotionPicker } from './EmotionPicker';
+import { GlossArt } from './GlossArt';
+import { ScrollSurface } from './ScrollSurface';
+import { ShapeArc } from './ShapeArc';
+import { AVATAR_COLORS } from './constants';
+import {
+  AgentCreatorCopyContext,
+  useAgentCreatorBindings,
+  useAgentCreatorMessages,
+} from './context';
+import { avatarHex, hexAppearance } from './shared';
+import type { AgentCreatorProps } from './types';
+
+/** Controlled creator block; saving and the surrounding panel belong to the host. */
+export function AgentCreatorBase(props: AgentCreatorProps) {
+  const directionProps = useDirectionProps();
+  const messages = useAgentCreatorMessages(props);
+  const { agent, onChange, onClose, className, style } = props;
+  const { colors } = useTheme();
+  const { Popover, PopoverTrigger, PopoverContent } = useAgentCreatorBindings();
+  const c = agent.avatar;
+  const appearance = (patch: Partial<AvatarConfig>) =>
+    onChange({ ...agent, avatar: { ...c, ...patch, lookAt: 'wander' } });
+  return (
+    <AgentCreatorCopyContext.Provider
+      value={{ locale: props.locale, labels: props.labels }}
+    >
+      <StyledView
+        {...directionProps}
+        accessibilityLabel={messages.editor}
+        className={
+          className ??
+          'flex h-full min-h-0 flex-col bg-background-full ps-1 pe-2'
+        }
+        style={[
+          {
+            flex: 1,
+            minHeight: 0,
+            paddingStart: 4,
+            paddingEnd: 8,
+            backgroundColor: colors.background,
+          },
+          style,
+        ]}
+      >
+        <StyledView
+          className="relative flex h-8 shrink-0 items-start justify-center pt-4"
+          style={{ flexDirection: 'row' }}
+        >
+          <Text
+            variant="body-medium"
+            className="max-w-[260px] truncate text-body-medium text-text-primary"
+            numberOfLines={1}
+            style={{ maxWidth: 260, alignSelf: 'center' }}
+          >
+            {agent.name || messages.newBot}
+          </Text>
+          {onClose && (
+            <CloseButton
+              size="xs"
+              accessibilityLabel={messages.closeEditor}
+              className="absolute end-0 top-3.5 text-foreground-icon-tertiary"
+              style={{ position: 'absolute', end: 0, top: 14 }}
+              onPress={onClose}
+            />
+          )}
+        </StyledView>
+        <ScrollSurface
+          className="flex-1"
+          contentClassName="pb-4"
+          surface="full"
+          label={messages.details}
+          fadeBottom
+        >
+          <StyledView className="relative h-[360px] overflow-hidden">
+            <StyledView
+              pointerEvents="box-none"
+              className="pointer-events-none absolute left-1/2 top-[30px] z-10 -translate-x-1/2"
+              style={{
+                position: 'absolute',
+                left: '50%',
+                top: 30,
+                transform:
+                  Platform.OS === 'web' ? undefined : [{ translateX: -134 }],
+                zIndex: 10,
+              }}
+            >
+              <EmotionPicker
+                key={agent.id}
+                config={c}
+                onChange={(eyes) => appearance({ eyes })}
+              />
+            </StyledView>
+            <StyledView
+              pointerEvents="none"
+              className="pointer-events-none absolute left-1/2 top-[83px] -translate-x-1/2"
+              style={{
+                position: 'absolute',
+                left: '50%',
+                top: 83,
+                transform:
+                  Platform.OS === 'web' ? undefined : [{ translateX: -81 }],
+              }}
+            >
+              <AgentAvatar
+                config={{ ...c, lookAt: 'wander' }}
+                size={162}
+                label={messages.livePreview(agent.name || messages.newAgent)}
+              />
+            </StyledView>
+            <StyledView
+              pointerEvents="box-none"
+              className="pointer-events-none absolute inset-x-0 bottom-0"
+              style={{ position: 'absolute', left: 0, right: 0, bottom: 0 }}
+            >
+              <ShapeArc
+                key={agent.id}
+                config={c}
+                onChange={(foldShape) => appearance({ foldShape })}
+              />
+            </StyledView>
+          </StyledView>
+          <StyledView className="mt-[15px] flex flex-row justify-center">
+            <StyledView
+              role="group"
+              accessibilityLabel={messages.color}
+              className="flex h-[38px] shrink-0 items-center gap-1 rounded-full border border-border-button-default bg-background-primary-default p-[5px] shadow-xs flex-row"
+              style={{
+                backgroundColor: colors.card,
+                borderColor: colors.border,
+                boxShadow: '0 1px 2px rgba(0,0,0,.05)',
+              }}
+            >
+              {AVATAR_COLORS.map(([hue, saturation, name, center, edge]) => {
+                const active =
+                  c.hue === hue &&
+                  c.saturation === saturation &&
+                  c.lightness === undefined;
+                return (
+                  <StyledPressable
+                    key={name}
+                    accessibilityRole="button"
+                    accessibilityLabel={messages.avatarColorLabel(
+                      messages.colors[name],
+                    )}
+                    accessibilityState={{ selected: active }}
+                    aria-pressed={active}
+                    onPress={() =>
+                      appearance({
+                        hue,
+                        saturation,
+                        lightness: undefined,
+                        lightEyes: false,
+                      })
+                    }
+                    className="relative shrink-0 cursor-pointer overflow-hidden rounded-full transition-transform duration-150 ease-out hover:scale-110 outline-none focus-visible:ring-2 focus-visible:ring-border-focus-ring focus-visible:ring-offset-2 size-[26px]"
+                  >
+                    <GlossArt center={center} edge={edge} active={active} />
+                  </StyledPressable>
+                );
+              })}
+              <Popover>
+                <PopoverTrigger asChild label={messages.customColor}>
+                  <StyledPressable className="relative size-[26px] shrink-0 overflow-hidden rounded-full">
+                    <GlossArt rainbow />
+                  </StyledPressable>
+                </PopoverTrigger>
+                <PopoverContent
+                  label={messages.customColor}
+                  align="end"
+                  minWidth={248}
+                  maxWidth={248}
+                  className="w-[248px] rounded-3xl p-2.5"
+                >
+                  <CustomColorPicker
+                    value={avatarHex(c)}
+                    onChange={(hex) => {
+                      const next = hexAppearance(hex);
+                      if (next) appearance(next);
+                    }}
+                  />
+                </PopoverContent>
+              </Popover>
+            </StyledView>
+          </StyledView>
+          <StyledView
+            className="mt-[15px] overflow-hidden rounded-2xl bg-background-secondary-default ps-3"
+            style={{ backgroundColor: colors.backgroundSecondary }}
+          >
+            <StyledView
+              className="grid h-[52px] grid-cols-[96px_minmax(0,1fr)] items-center border-b border-border-button-default dark:border-border-button-default/35 pe-2.5 flex-row"
+              style={{
+                flexDirection: 'row',
+                alignContent: 'stretch',
+                borderColor: colors.border,
+              }}
+            >
+              <Text
+                variant="body-regular"
+                className="text-body-regular text-text-primary"
+                style={{ width: 96 }}
+              >
+                {messages.name}
+              </Text>
+              <StyledView className="min-w-0 flex-1">
+                <TextFieldInput
+                  label={messages.nameInput}
+                  size="sm"
+                  maxLength={48}
+                  value={agent.name}
+                  onChangeText={(name) => onChange({ ...agent, name })}
+                  placeholder={'Michael Scott' /* i18n-exempt: original example person’s proper name */}
+                />
+              </StyledView>
+            </StyledView>
+            <StyledView
+              className="grid h-[52px] grid-cols-[96px_minmax(0,1fr)] items-center border-b border-border-button-default dark:border-border-button-default/35 pe-2.5 flex-row"
+              style={{
+                flexDirection: 'row',
+                alignContent: 'stretch',
+                borderColor: colors.border,
+              }}
+            >
+              <Text
+                variant="body-regular"
+                className="text-body-regular text-text-primary"
+                style={{ width: 96 }}
+              >
+                {messages.label}
+              </Text>
+              <StyledView className="min-w-0 flex-1">
+                <TextFieldInput
+                  label={messages.labelInput}
+                  size="sm"
+                  maxLength={60}
+                  value={agent.label}
+                  onChangeText={(label) => onChange({ ...agent, label })}
+                  placeholder={messages.labelPlaceholder}
+                />
+              </StyledView>
+            </StyledView>
+            <StyledView
+              className="grid h-[82px] grid-cols-[96px_minmax(0,1fr)] items-start py-2.5 pe-2.5 flex-row"
+              style={{ flexDirection: 'row' }}
+            >
+              <Text
+                variant="body-regular"
+                className="pt-1 text-body-regular text-text-primary"
+                style={{ width: 96, paddingTop: 4 }}
+              >
+                {messages.description}
+              </Text>
+              <StyledView className="min-w-0 flex-1">
+                <Textarea
+                  accessibilityLabel={messages.descriptionInput}
+                  size="sm"
+                  rows={2}
+                  resize="none"
+                  maxLength={500}
+                  fieldStyle={{ height: 62 }}
+                  style={{ height: 62 }}
+                  value={agent.description}
+                  onChangeText={(description) =>
+                    onChange({ ...agent, description })
+                  }
+                  placeholder={messages.descriptionPlaceholder}
+                />
+              </StyledView>
+            </StyledView>
+          </StyledView>
+          <AgentPreferencesPanel {...props} />
+        </ScrollSurface>
+      </StyledView>
+    </AgentCreatorCopyContext.Provider>
+  );
+}

package/src/agent-creator/AgentPreferencesPanel.tsx

@@ -0,0 +1,268 @@
+import { IconButton } from '../button';
+import { RiGlobalLine } from '../icons/remix/RiGlobalLine';
+import { RiNotification3Line } from '../icons/remix/RiNotification3Line';
+import { RiVolumeUpLine } from '../icons/remix/RiVolumeUpLine';
+import { createSinglePathSVG } from '../icons/TEMPLATE';
+import {
+  SegmentedControl,
+  SegmentedControlItem,
+  SegmentedControlItemText,
+} from '../segmented-control';
+import { SettingsCard } from '../settings-modal/SettingsRows';
+import { StyledView } from '../styles/styled-primitives';
+import { Switch } from '../switch';
+import { useTheme } from '../theme/use-theme';
+import { Text } from '../typography';
+import { AGENT_LANGUAGES, AGENT_SPEECH_RATES } from './constants';
+import { useAgentCreatorBindings, useAgentCreatorMessages } from './context';
+import { normalizeAgentPreferences } from './shared';
+import type { AgentCreatorProps, AgentPreferences } from './types';
+import { useAgentVoices } from './use-agent-voices';
+
+// Source Remix play-mini-fill artwork; the existing full-size play triangle has different geometry.
+const PreviewPlayIcon = createSinglePathSVG({
+  path: 'M7.75194 5.43872L18.2596 11.5682C18.4981 11.7073 18.5787 12.0135 18.4396 12.252C18.3961 12.3265 18.3341 12.3885 18.2596 12.432L7.75194 18.5615C7.51341 18.7006 7.20725 18.62 7.06811 18.3815C7.0235 18.305 7 18.2181 7 18.1296V5.87061C7 5.59446 7.22386 5.37061 7.5 5.37061C7.58853 5.37061 7.67547 5.39411 7.75194 5.43872Z',
+});
+function PreferenceSelect({
+  value,
+  onChange,
+  label,
+  items,
+  disabled = false,
+  popoverWidth = 192,
+  className,
+}: {
+  value: string;
+  onChange: (value: string) => void;
+  label: string;
+  items: readonly { id: string; label: string }[];
+  disabled?: boolean;
+  popoverWidth?: number;
+  className?: string;
+}) {
+  const messages = useAgentCreatorMessages();
+  const {
+    Select,
+    SelectTrigger,
+    SelectValue,
+    SelectIcon,
+    SelectContent,
+    SelectItem,
+    SelectItemText,
+  } = useAgentCreatorBindings();
+  return (
+    <Select
+      size="sm"
+      value={value}
+      onValueChange={onChange}
+      disabled={disabled}
+    >
+      <SelectTrigger
+        label={label}
+        className={className}
+        style={className ? { minWidth: 0, maxWidth: 144 } : undefined}
+      >
+        <SelectValue />
+        <SelectIcon />
+      </SelectTrigger>
+      <SelectContent
+        label={label}
+        width={popoverWidth}
+        items={items}
+        valueExtractor={(item) => item.id}
+        renderItem={(item) => (
+          <SelectItem value={item.id} label={item.label}>
+            <SelectItemText>{item.label}</SelectItemText>
+          </SelectItem>
+        )}
+      />
+    </Select>
+  );
+}
+
+/** Device voices preview locally; preferences travel with the agent to onRespond. */
+export function AgentPreferencesPanel(props: AgentCreatorProps) {
+  const messages = useAgentCreatorMessages();
+  const { agent, onChange } = props;
+  const { colors } = useTheme();
+  const preferences = normalizeAgentPreferences(agent.preferences);
+  const { voices, canPreview, canSelect, preview } = useAgentVoices(props);
+  const update = (patch: Partial<AgentPreferences>) =>
+    onChange({ ...agent, preferences: { ...preferences, ...patch } });
+  const selectedVoice = voices.find((voice) =>
+    preferences.voice === 'alice'
+      ? voice.name.toLowerCase() === 'alice'
+      : voice.id === preferences.voice,
+  );
+  const selectedVoiceKey =
+    preferences.voice === 'alice'
+      ? (selectedVoice?.id ?? 'system')
+      : preferences.voice || 'off';
+  const choices = voices
+    .filter(
+      (voice) =>
+        preferences.language === 'auto' ||
+        voice.language.toLowerCase().startsWith(preferences.language),
+    )
+    .slice(0, 12);
+  if (selectedVoice && !choices.includes(selectedVoice))
+    choices.push(selectedVoice);
+  const voiceItems = [
+    { id: 'off', label: messages.off },
+    { id: 'system', label: messages.systemVoice },
+    ...choices.map((voice) => ({ id: voice.id, label: voice.name })),
+    ...(preferences.voice &&
+    preferences.voice !== 'system' &&
+    preferences.voice !== 'alice' &&
+    !selectedVoice
+      ? [{ id: preferences.voice, label: messages.savedVoice }]
+      : []),
+  ];
+  return (
+    <StyledView className="mt-4 flex flex-col gap-3 pb-3">
+      <SettingsCard
+        className="px-3"
+        style={{ paddingLeft: 12, paddingRight: 12 }}
+      >
+        <StyledView
+          className="flex min-h-14 items-center justify-between gap-3 border-b border-separator-border py-3 flex-row"
+          style={{ borderColor: colors.border }}
+        >
+          <StyledView className="flex items-center gap-2 text-body-medium text-text-primary flex-row">
+            <RiGlobalLine
+              className="size-5 text-foreground-icon-secondary"
+              size="md"
+              fill={colors.icon}
+              aria-hidden
+            />
+            <Text
+              variant="body-medium"
+              className="text-body-medium text-text-primary"
+            >
+              {messages.language}
+            </Text>
+          </StyledView>
+          <PreferenceSelect
+            label={messages.languageInput}
+            value={preferences.language}
+            onChange={(language) =>
+              update({ language: language as AgentPreferences['language'] })
+            }
+            items={AGENT_LANGUAGES.map((language) => ({
+              id: language.id,
+              label: messages.languages[language.id],
+            }))}
+          />
+        </StyledView>
+        <StyledView className="flex items-center gap-3 py-3 flex-row">
+          <RiNotification3Line
+            className="size-5 shrink-0 text-foreground-icon-secondary"
+            size="md"
+            fill={colors.icon}
+            aria-hidden
+          />
+          <StyledView className="flex min-w-0 flex-1 flex-col gap-1">
+            <Text
+              variant="body-medium"
+              className="text-body-medium text-text-primary"
+            >
+              {messages.notifications}
+            </Text>
+            <Text
+              variant="caption-1-regular"
+              className="text-caption-1-regular text-text-secondary"
+            >
+              {messages.notificationsDescription}
+            </Text>
+          </StyledView>
+          <Switch
+            accessibilityLabel={messages.notifyFinished}
+            size="sm"
+            checked={preferences.notifications}
+            onCheckedChange={(notifications) => update({ notifications })}
+          />
+        </StyledView>
+      </SettingsCard>
+      <SettingsCard
+        className="gap-3 p-3 pt-2"
+        style={{
+          paddingLeft: 12,
+          paddingRight: 12,
+          paddingTop: 8,
+          paddingBottom: 12,
+          gap: 12,
+        }}
+      >
+        <StyledView className="flex items-center justify-between gap-3 flex-row">
+          <StyledView className="flex items-center gap-2 text-body-medium text-text-primary flex-row">
+            <RiVolumeUpLine
+              className="size-5 text-foreground-icon-secondary"
+              size="md"
+              fill={colors.icon}
+              aria-hidden
+            />
+            <Text
+              variant="body-medium"
+              className="text-body-medium text-text-primary"
+            >
+              {messages.voice}
+            </Text>
+          </StyledView>
+          <StyledView className="flex min-w-0 items-center gap-1 flex-row">
+            {!!preferences.voice && (
+              <IconButton
+                size="sm"
+                appearance="plain"
+                tone="neutral"
+                icon={PreviewPlayIcon}
+                accessibilityLabel={messages.previewVoice}
+                disabled={!canPreview}
+                className="bg-transparent text-text-secondary hover:bg-background-tertiary-default hover:text-text-primary active:bg-background-tertiary-hover active:text-text-primary"
+                onPress={() => preview(preferences)}
+              />
+            )}
+            <PreferenceSelect
+              label={messages.voiceInput}
+              disabled={!canSelect}
+              value={selectedVoiceKey}
+              onChange={(voice) =>
+                update({ voice: voice === 'off' ? '' : voice })
+              }
+              items={voiceItems}
+              className="min-w-0 max-w-36"
+              popoverWidth={240}
+            />
+          </StyledView>
+        </StyledView>
+        <StyledView className="flex flex-col gap-2">
+          <Text
+            variant="caption-1-regular"
+            className="text-caption-1-regular text-text-secondary"
+          >
+            {messages.playbackSpeed}
+          </Text>
+          <SegmentedControl
+            label={messages.playbackSpeed}
+            className="w-full bg-background-tertiary-default dark:bg-segmented-control-background"
+            style={{ width: '100%' }}
+            type="radio"
+            value={String(preferences.speed)}
+            onValueChange={(speed) => update({ speed: Number(speed) })}
+          >
+            {AGENT_SPEECH_RATES.map((speed) => (
+              <SegmentedControlItem
+                key={speed}
+                value={String(speed)}
+                accessibilityLabel={messages.playbackSpeedLabel(speed)}
+                className="min-w-0 flex-1 px-1"
+                style={{ flex: 1, minWidth: 0, paddingHorizontal: 4 }}
+              >
+                <SegmentedControlItemText>{speed}×</SegmentedControlItemText>
+              </SegmentedControlItem>
+            ))}
+          </SegmentedControl>
+        </StyledView>
+      </SettingsCard>
+    </StyledView>
+  );
+}