@memori.ai/memori-react 9.0.0-alpha.8 → 9.0.0-rc.0

package/src/components/PositionPopover/PositionPopover.css

@@ -1,219 +0,0 @@
-.memori-position-popover__positioner {
-    z-index: 1300;
-}
-
-.memori-position-popover__popup {
-    display: flex;
-    width: min(22rem, calc(100vw - 2rem));
-    max-width: 22rem;
-    flex-direction: column;
-    padding: var(--memori-spacing-md);
-    border-radius: var(--memori-radius-box);
-    background: var(--memori-secondary-background);
-    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12), 0 0 0 1px var(--memori-border-color, rgba(0, 0, 0, 0.08));
-    font-size: var(--memori-text-size-base);
-}
-
-.memori-position-popover__row {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: var(--memori-spacing-md);
-}
-
-.memori-position-popover__switch-row {
-    min-height: 3rem;
-    padding-top: 0;
-    padding-bottom: 0;
-}
-
-.memori-position-popover__switch-meta {
-    display: inline-flex;
-    min-width: 0;
-    align-items: center;
-    padding: 0.5rem;
-    gap: var(--memori-spacing-sm);
-}
-
-.memori-position-popover__switch-icon {
-    flex-shrink: 0;
-    color: var(--memori-text-color-secondary, rgba(255, 255, 255, 0.75));
-}
-
-.memori-position-popover__switch-label {
-    display: inline-flex;
-    min-width: 0;
-    flex-direction: column;
-    gap: 0.1rem;
-}
-
-.memori-position-popover__switch-label-title {
-    color: var(--memori-text-color, #fff);
-    font-size: 0.95rem;
-    font-weight: 500;
-    line-height: var(--memori-text-line-normal);
-}
-
-.memori-position-popover__switch-label-subtitle {
-    color: var(--memori-text-color-secondary, rgba(255, 255, 255, 0.65));
-    font-size: 0.75rem;
-    line-height: 1.2;
-}
-
-.memori-position-popover__switch {
-    position: relative;
-    width: 2rem;
-    height: 1.15rem;
-    flex-shrink: 0;
-    padding: 0;
-    border: none;
-    border-radius: 999px;
-    background: rgba(255, 255, 255, 0.28);
-    cursor: pointer;
-    transition: background 0.15s ease;
-}
-
-.memori-position-popover__switch:focus-visible {
-    outline: 2px solid var(--memori-primary, #3182ce);
-    outline-offset: 2px;
-}
-
-.memori-position-popover__switch--on {
-    background: var(--memori-primary, #8b5cf6);
-}
-
-.memori-position-popover__switch-thumb {
-    position: absolute;
-    top: 2px;
-    left: 2px;
-    width: calc(1.15rem - 4px);
-    height: calc(1.15rem - 4px);
-    border-radius: 50%;
-    background: #fff;
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.24);
-    transition: transform 0.15s ease;
-}
-
-.memori-position-popover__switch--on .memori-position-popover__switch-thumb {
-    transform: translateX(0.85rem);
-}
-
-.memori-position-popover__tag-block {
-    margin-top: var(--memori-spacing-sm);
-    margin-bottom: var(--memori-spacing-sm);
-}
-
-.memori-position-popover__tag {
-    display: flex;
-    max-width: 100%;
-    align-items: center;
-    padding: var(--memori-spacing-xs) var(--memori-spacing-sm);
-    border-radius: 999px;
-    background: var(--memori-main-background);
-    gap: var(--memori-spacing-xs);
-}
-
-.memori-autocomplete__portal,
-.memori-autocomplete__positioner {
-    z-index: 1301;
-}
-
-.memori-position-popover__tag--loading {
-    min-height: 2rem;
-}
-
-.memori-position-popover__tag-text {
-    overflow: hidden;
-    min-width: 0;
-    flex: 1 1 auto;
-    font-size: 0.875rem;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-.memori-position-popover__tag-edit {
-    display: inline-flex;
-    flex-shrink: 0;
-    align-items: center;
-    justify-content: center;
-    padding: 4px;
-    border: none;
-    border-radius: var(--memori-radius-box);
-    background: transparent;
-    color: var(--memori-text-color);
-    cursor: pointer;
-}
-
-.memori-position-popover__tag-edit:hover {
-    background: rgba(0, 0, 0, 0.06);
-}
-
-.memori-position-popover__tag-edit:focus-visible {
-    outline: 2px solid var(--memori-primary, #3182ce);
-    outline-offset: 2px;
-}
-
-.memori-position-popover__tag-skeleton {
-    height: 0.65rem;
-    flex: 1 1 auto;
-    border-radius: 4px;
-    animation: memori-position-popover-shimmer 1.2s ease-in-out infinite;
-    background: linear-gradient(90deg, rgba(0, 0, 0, 0.06) 25%, rgba(0, 0, 0, 0.12) 37%, rgba(0, 0, 0, 0.06) 63%);
-    background-size: 400% 100%;
-    margin-inline: var(--memori-spacing-xs);
-}
-
-.memori-position-popover__spinner {
-    display: inline-block;
-    width: 1.125rem;
-    height: 1.125rem;
-    flex-shrink: 0;
-    border: 2px solid var(--memori-border-color, #cbd5e0);
-    border-radius: 50%;
-    border-top-color: var(--memori-primary, #3182ce);
-    animation: memori-position-popover-spin 0.7s linear infinite;
-}
-
-.memori-position-popover__autocomplete-wrap {
-    width: 100%;
-    min-width: 0;
-}
-
-.memori-position-popover__error {
-    margin: 0 0 var(--memori-spacing-sm);
-    color: var(--memori-danger, #c53030);
-    font-size: 0.875rem;
-    line-height: var(--memori-text-line-normal);
-}
-
-.memori-position-popover__map {
-    margin-top: var(--memori-spacing-sm);
-}
-
-.memori-position-popover__map .memori--venue-widget__map-container {
-    min-height: 140px;
-}
-
-.memori-position-popover__map .memori--venue-widget__map {
-    height: 160px;
-}
-
-@keyframes memori-position-popover-spin {
-    to {
-        transform: rotate(360deg);
-    }
-}
-
-@keyframes memori-position-popover-shimmer {
-    0% {
-        background-position: 100% 0;
-    }
-
-    100% {
-        background-position: 0 0;
-    }
-}
-
-.memori-position-popover__positioner--website-assistant {
-    z-index: 2147483600;
-}

package/src/components/PositionPopover/PositionPopover.stories.tsx

@@ -1,37 +0,0 @@
-import React, { useState } from 'react';
-import type { Meta, Story } from '@storybook/react';
-import { AlertProvider } from '@memori.ai/ui';
-import I18nWrapper from '../../I18nWrapper';
-import { memori, venue } from '../../mocks/data';
-import PositionPopover from './PositionPopover';
-
-const meta: Meta = {
-  title: 'Widget/PositionPopover',
-  component: PositionPopover,
-};
-
-export default meta;
-
-const Template: Story = () => {
-  const [open, setOpen] = useState(true);
-  const [v, setV] = useState(venue);
-  return (
-    <I18nWrapper>
-      <AlertProvider defaultDuration={5000}>
-        <div style={{ padding: 80 }}>
-          <PositionPopover
-            venue={v}
-            setVenue={setV}
-            open={open}
-            onOpenChange={setOpen}
-            triggerAriaLabel="Position"
-            triggerButtonVariant="outline"
-          />
-          <p style={{ marginTop: 16 }}>memori: {memori.name}</p>
-        </div>
-      </AlertProvider>
-    </I18nWrapper>
-  );
-};
-
-export const Default = Template.bind({});

package/src/components/PositionPopover/PositionPopover.tsx

@@ -1,367 +0,0 @@
-import { Venue } from '@memori.ai/memori-api-client/dist/types';
-import {
-  Button,
-  Popover,
-  useAlertManager,
-  createAlertOptions,
-} from '@memori.ai/ui';
-import { MapPin, Pencil } from 'lucide-react';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { getUncertaintyByViewport } from '../../helpers/venue';
-import { useDebounceFn } from '../../helpers/utils';
-import {
-  VenueCombobox,
-  VenueMapPreview,
-  getPlaceName,
-  type NominatimItem,
-} from '../VenueWidget/VenueWidget';
-import cx from 'classnames';
-
-function hasShareableCoords(v?: Venue): boolean {
-  return !!(v?.latitude && v?.longitude);
-}
-
-export interface PositionPopoverProps {
-  venue?: Venue;
-  setVenue: (venue?: Venue) => void;
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  triggerClassName?: string;
-  triggerButtonVariant?: React.ComponentProps<typeof Button>['variant'];
-  triggerAriaLabel: string;
-  positionerClassName?: string;
-}
-
-export interface PositionPopoverContentProps {
-  venue?: Venue;
-  setVenue: (venue?: Venue) => void;
-}
-
-export const PositionPopoverContent: React.FC<PositionPopoverContentProps> = ({
-  venue,
-  setVenue,
-}) => {
-  const { t } = useTranslation();
-  const { add } = useAlertManager();
-  const [geolocationLoading, setGeolocationLoading] = useState(false);
-  const [editingLocation, setEditingLocation] = useState(false);
-  const [permissionDeniedMessage, setPermissionDeniedMessage] = useState<
-    string | null
-  >(null);
-  const [geocodingError, setGeocodingError] = useState<string | null>(null);
-  const [fetching, setFetching] = useState(false);
-  const [query, setQuery] = useState('');
-  const [suggestions, setSuggestions] = useState<NominatimItem[]>([]);
-  const geoGenRef = useRef(0);
-  const autocompleteInputRef = useRef<HTMLInputElement>(null);
-
-  const sharingActive = geolocationLoading || hasShareableCoords(venue);
-
-  const handleSearch = useDebounceFn(async (value: string) => {
-    setFetching(true);
-    try {
-      const response = await fetch(
-        `https://nominatim.openstreetmap.org/search?q=${encodeURIComponent(
-          value
-        )}&format=jsonv2&limit=5&addressdetails=1`
-      );
-      const data = await response.json();
-      setSuggestions(data);
-    } catch {
-      setGeocodingError(String(t('widget.geocodingFailed')));
-    } finally {
-      setFetching(false);
-    }
-  }, 1000);
-
-  const onQueryChange = useCallback(
-    (value: string, opts?: { skipSearch?: boolean }) => {
-      setQuery(value);
-      if (opts?.skipSearch) return;
-      if (!value.trim()) {
-        setSuggestions([]);
-        return;
-      }
-      handleSearch(value);
-    },
-    [handleSearch]
-  );
-
-  const handleAutocompletePick = useCallback(
-    (value: NominatimItem) => {
-      const placeName = getPlaceName(value);
-      setVenue({
-        latitude: value.lat,
-        longitude: value.lon,
-        placeName,
-        uncertainty: value?.boundingbox
-          ? getUncertaintyByViewport(value.boundingbox)
-          : 2,
-      } as Venue);
-      setEditingLocation(false);
-      setQuery('');
-      setSuggestions([]);
-      setGeocodingError(null);
-      setPermissionDeniedMessage(null);
-    },
-    [setVenue, t]
-  );
-
-  const startGeolocation = useCallback(() => {
-    const gen = ++geoGenRef.current;
-    setPermissionDeniedMessage(null);
-    setGeocodingError(null);
-    setGeolocationLoading(true);
-
-    navigator.geolocation.getCurrentPosition(
-      async pos => {
-        if (gen !== geoGenRef.current) return;
-        let next: Venue = {
-          latitude: pos.coords.latitude,
-          longitude: pos.coords.longitude,
-          placeName: '',
-          uncertainty: pos.coords.accuracy / 1000,
-        };
-        try {
-          const result = await fetch(
-            `https://nominatim.openstreetmap.org/reverse?lat=${pos.coords.latitude}&lon=${pos.coords.longitude}&format=jsonv2&addressdetails=1`
-          );
-          const response = (await result.json()) as NominatimItem;
-          const placeName = getPlaceName(response);
-          next = {
-            latitude: pos.coords.latitude,
-            longitude: pos.coords.longitude,
-            placeName,
-            uncertainty: pos.coords.accuracy / 1000,
-          };
-          setVenue(next);
-        } catch (e) {
-          console.error('[PositionPopover] reverse geocode failed', e);
-          setGeocodingError(String(t('widget.geocodingFailed')));
-          setVenue(next);
-        } finally {
-          if (gen === geoGenRef.current) {
-            setGeolocationLoading(false);
-            add(
-              createAlertOptions({
-                description:
-                  t('widget.positionSharingEnabled') ||
-                  'Position sharing has been enabled.',
-                severity: 'success',
-              })
-            );
-          }
-        }
-      },
-      err => {
-        if (gen !== geoGenRef.current) return;
-        setGeolocationLoading(false);
-        setVenue(undefined);
-        const code = (err as { code?: number }).code;
-        if (code === 1) {
-          setPermissionDeniedMessage(
-            String(t('widget.positionUnavailableManual'))
-          );
-          setEditingLocation(true);
-        } else {
-          setGeocodingError(String(t('widget.geocodingFailed')));
-        }
-      },
-      { enableHighAccuracy: true, timeout: 15000, maximumAge: 0 }
-    );
-  }, [setVenue, t, add]);
-
-  const toggleSharing = useCallback(() => {
-    setPermissionDeniedMessage(null);
-    setGeocodingError(null);
-
-    if (sharingActive && !geolocationLoading) {
-      geoGenRef.current += 1;
-      setVenue({
-        latitude: 0,
-        longitude: 0,
-        placeName: '',
-        uncertainty: 0,
-      });
-      setEditingLocation(false);
-      setQuery('');
-      setSuggestions([]);
-      return;
-    }
-
-    if (geolocationLoading) {
-      geoGenRef.current += 1;
-      setGeolocationLoading(false);
-      setVenue(undefined);
-      return;
-    }
-
-    startGeolocation();
-  }, [geolocationLoading, setVenue, sharingActive, startGeolocation]);
-
-  useEffect(() => {
-    if (!editingLocation) return;
-    const id = requestAnimationFrame(() => {
-      autocompleteInputRef.current?.focus();
-    });
-    return () => cancelAnimationFrame(id);
-  }, [editingLocation]);
-
-  const inlineError = permissionDeniedMessage || geocodingError;
-
-  return (
-    <>
-      <div className="memori-position-popover__row memori-position-popover__switch-row">
-        <button
-          type="button"
-          className="memori-dropdown--auth-row"
-          onClick={() => {
-            toggleSharing();
-          }}
-        >
-          <span className="memori-dropdown--auth-icon-wrap">
-            <MapPin size={16} />
-          </span>
-          <span className="memori-dropdown--auth-copy">
-            <span className="memori-dropdown--auth-title">
-              {t('widget.shareLocation') || 'Share my location'}
-            </span>
-            <span className="memori-dropdown--auth-subtitle">
-              {t('widget.shareLocationHint') ||
-                'Get answers tailored to where you are'}
-            </span>
-          </span>
-          <span
-            className={cx(
-              'memori-dropdown--switch',
-              sharingActive && 'memori-dropdown--switch--on'
-            )}
-            aria-hidden
-          />
-        </button>
-      </div>
-
-      {(sharingActive || geolocationLoading || editingLocation) && (
-        <div className="memori-position-popover__tag-block">
-          {geolocationLoading ? (
-            <div
-              className="memori-position-popover__tag memori-position-popover__tag--loading"
-              aria-busy="true"
-              aria-live="polite"
-            >
-              <span className="memori-position-popover__spinner" aria-hidden />
-              <span className="memori-position-popover__tag-skeleton" />
-            </div>
-          ) : editingLocation ? (
-            <div className="memori-position-popover__autocomplete-wrap">
-              <VenueCombobox
-                venue={venue}
-                query={query}
-                fetching={fetching}
-                suggestions={suggestions}
-                onQueryChange={onQueryChange}
-                onChange={handleAutocompletePick}
-                getPlaceName={getPlaceName}
-                t={t}
-                autocompleteRootId="memori-position-popover-venue-search"
-                inputRef={autocompleteInputRef}
-              />
-            </div>
-          ) : (
-            <div className="memori-position-popover__tag">
-              <span className="memori-position-popover__tag-text">
-                {venue?.placeName?.trim()
-                  ? venue.placeName
-                  : t('widget.positionResolving')}
-              </span>
-              <Button
-                type="button"
-                variant="ghost"
-                icon={<Pencil size={16} strokeWidth={2} aria-hidden />}
-                size="sm"
-                className="memori-position-popover__tag-edit"
-                aria-label={String(t('widget.editPositionAria'))}
-                onClick={() => {
-                  setEditingLocation(true);
-                  setPermissionDeniedMessage(null);
-                }}
-              />
-            </div>
-          )}
-        </div>
-      )}
-
-      {inlineError && (
-        <p className="memori-position-popover__error" role="alert">
-          {inlineError}
-        </p>
-      )}
-
-      {hasShareableCoords(venue) && !geolocationLoading && (
-        <div className="memori-position-popover__map">
-          <VenueMapPreview venue={venue} />
-        </div>
-      )}
-    </>
-  );
-};
-
-const PositionPopover: React.FC<PositionPopoverProps> = ({
-  venue,
-  setVenue,
-  open,
-  onOpenChange,
-  triggerClassName,
-  triggerButtonVariant = 'primary',
-  triggerAriaLabel,
-  positionerClassName,
-}) => {
-  const sharingActive = hasShareableCoords(venue);
-
-  return (
-    <Popover
-      open={open}
-      onOpenChange={onOpenChange}
-      modal={false}
-      closable={false}
-      placement="bottom-end"
-      sideOffset={8}
-      contentClassName="memori-position-popover__popup"
-      slotProps={{
-        trigger: {
-          className: triggerClassName,
-          render: (props: React.ComponentProps<typeof Button>) => {
-            return (
-              <Button
-                {...props}
-                type="button"
-                variant={triggerButtonVariant}
-                className={cx(
-                  'memori-header--button',
-                  'memori-header--button--position',
-                  sharingActive && 'memori-header--button--position--active',
-                  open && 'memori-button--active'
-                )}
-                aria-label={triggerAriaLabel}
-                aria-expanded={open}
-                icon={<MapPin aria-hidden />}
-              />
-            );
-          },
-        },
-        positioner: {
-          className: cx(
-            'memori-position-popover__positioner',
-            positionerClassName
-          ),
-        },
-      }}
-      content={<PositionPopoverContent venue={venue} setVenue={setVenue} />}
-    >
-      {null}
-    </Popover>
-  );
-};
-
-export default PositionPopover;

package/src/components/PoweredBy/PoweredBy.css

@@ -1,49 +0,0 @@
-.memori--powered-by {
-    position: absolute;
-    z-index: 1000;
-    bottom: 1rem;
-    left: 1rem;
-    display: inline-flex;
-    flex-wrap: nowrap;
-    align-items: center;
-    padding: 0.375rem 0.875rem 0.375rem 0.5rem;
-    /* border: 1px solid var(--memori-border-color); */
-    border-radius: 9999px;
-    /* background-color: var(--memori-secondary-background); */
-    color: var(--memori-text-color);
-    font-size: 0.75rem;
-    font-weight: 500;
-    gap: 0.5rem;
-    line-height: 1.2;
-    white-space: nowrap;
-}
-
-.memori--powered-by-icon {
-    width: 1.25rem;
-    height: 1.25rem;
-    flex-shrink: 0;
-}
-
-.memori--powered-by-label {
-    margin-top: 0;
-    margin-bottom: 0;
-    color: inherit;
-}
-
-.memori--powered-by-label a {
-    color: var(--memori-text-color);
-    text-decoration: underline;
-    text-underline-offset: 2px;
-}
-
-.memori--powered-by-label a:hover,
-.memori--powered-by-label a:focus-visible {
-    color: var(--memori-primary, #744c99);
-    text-decoration: underline;
-}
-
-@media (max-width: 870px) {
-    .memori-widget .memori--powered-by {
-        display: none !important;
-    }
-}