diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5500729..c151ee8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,7 +8,7 @@ and this project adheres to
## [Unreleased]
-- 🐛(fix) broken staging css
+- ✨(ui) fix retour global ui
### Changed
diff --git a/src/frontend/apps/conversations/src/components/ToastProvider.tsx b/src/frontend/apps/conversations/src/components/ToastProvider.tsx
index b4eddf9..8412b4c 100644
--- a/src/frontend/apps/conversations/src/components/ToastProvider.tsx
+++ b/src/frontend/apps/conversations/src/components/ToastProvider.tsx
@@ -71,7 +71,7 @@ export const ToastProvider = ({ children }: ToastProviderProps) => {
{showInput && (
void;
placeholder?: string;
@@ -19,7 +17,6 @@ type Props = {
onClear?: () => void;
};
export const QuickSearchInput = ({
- loading,
inputValue,
onFilter,
placeholder,
@@ -30,6 +27,37 @@ export const QuickSearchInput = ({
const { t } = useTranslation();
const { spacingsTokens } = useCunninghamTheme();
+ const [localValue, setLocalValue] = useState(inputValue || '');
+
+ const debouncedFilter = useCallback(
+ (value: string) => {
+ let timeoutId: NodeJS.Timeout;
+
+ const debounce = () => {
+ clearTimeout(timeoutId);
+ timeoutId = setTimeout(() => {
+ onFilter?.(value);
+ }, 150);
+ };
+
+ debounce();
+ },
+ [onFilter],
+ );
+
+ const handleChange = useCallback(
+ (value: string) => {
+ setLocalValue(value);
+ debouncedFilter(value);
+ },
+ [debouncedFilter],
+ );
+
+ const handleClear = useCallback(() => {
+ setLocalValue('');
+ onClear?.();
+ }, [onClear]);
+
if (children) {
return (
<>
@@ -47,12 +75,13 @@ export const QuickSearchInput = ({
$gap={spacingsTokens['2xs']}
$css={`
position: relative;
+ justify-content: space-between;
border-radius: 4px;
margin: 12px 12px 0 12px;
border: 1px solid #CFD5DE;
- background-color: #EEF1F4;
+ background-color: #eff1f5;
padding: 6px 8px;
- &:focus-within {
+ &:focus-within, &:hover {
border: 2px solid #3E5DE7;
padding: 5px 7px;
}
@@ -69,29 +98,42 @@ export const QuickSearchInput = ({
}
`}
>
- {!loading && }
- {loading && }
-
- 0 && onClear ? 1 : 0};
- transition: opacity 0.3s cubic-bezier(1, 0, 0, 1);
- top: 10px;
- right: 10px;
- z-index: 1000;`}
- onClick={onClear}
+
+
+
+
+ {
+ if (e.key === 'Enter' || e.key === ' ') {
+ e.preventDefault();
+ handleClear();
+ }
+ }}
+ role="button"
+ tabIndex={0}
aria-label={t('Clear search')}
- />
+ $css={`cursor: pointer;
+ opacity: ${localValue && localValue.length > 0 && onClear ? 1 : 0};
+ transition: opacity 0.3s cubic-bezier(1, 0, 0, 1);
+ right: 10px;
+ border-radius: 4px;
+ padding: 7px;
+ background-color: #e4e6ea;
+ z-index: 1000;
+ &:focus {
+ outline: 2px solid #3E5DE7;
+ outline-offset: 2px;
+ }`}
+ >
+
+
);
diff --git a/src/frontend/apps/conversations/src/features/auth/components/ButtonLogin.tsx b/src/frontend/apps/conversations/src/features/auth/components/ButtonLogin.tsx
index 8f94633..ad46b09 100644
--- a/src/frontend/apps/conversations/src/features/auth/components/ButtonLogin.tsx
+++ b/src/frontend/apps/conversations/src/features/auth/components/ButtonLogin.tsx
@@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next';
import { css } from 'styled-components';
import { BoxButton, Icon } from '@/components';
+import { useResponsiveStore } from '@/stores';
import ProConnectImg from '../assets/button-proconnect.svg';
import { useAuth } from '../hooks';
@@ -11,6 +12,7 @@ import { gotoLogin, gotoLogout } from '../utils';
export const ButtonLogin = () => {
const { t } = useTranslation();
const { authenticated } = useAuth();
+ const { isDesktop } = useResponsiveStore();
if (!authenticated) {
return (
@@ -29,7 +31,7 @@ export const ButtonLogin = () => {
}
+ icon={!isDesktop ? : ''}
aria-label={t('Logout')}
className="--docs--button-logout"
>
diff --git a/src/frontend/apps/conversations/src/features/chat/components/Chat.tsx b/src/frontend/apps/conversations/src/features/chat/components/Chat.tsx
index 3058e77..5465050 100644
--- a/src/frontend/apps/conversations/src/features/chat/components/Chat.tsx
+++ b/src/frontend/apps/conversations/src/features/chat/components/Chat.tsx
@@ -564,7 +564,7 @@ export const Chat = ({
$direction="row"
$align="center"
$gap="4px"
- className="c__button--neutral"
+ className="c__button--neutral action-chat-button"
onClick={() => copyToClipboard(message.content)}
onKeyDown={(e) => {
if (e.key === 'Enter' || e.key === ' ') {
@@ -594,7 +594,7 @@ export const Chat = ({
$direction="row"
$align="center"
$gap="4px"
- className="c__button--neutral"
+ className="c__button--neutral action-chat-button"
onClick={() => openSources(message.id)}
onKeyDown={(e) => {
if (e.key === 'Enter' || e.key === ' ') {
@@ -660,7 +660,7 @@ export const Chat = ({
{
const { t } = useTranslation();
const fileInputRef = useRef(null);
+ const textareaRef = useRef(null);
const [isDragActive, setIsDragActive] = useState(false);
const { isDesktop, isMobile } = useResponsiveStore();
const [currentSuggestionIndex, setCurrentSuggestionIndex] = useState(0);
+ const [isResetting, setIsResetting] = useState(false);
const suggestions = [
- 'Ask a question',
- 'Turn this list into bullet points',
- 'Write a short product description',
- 'Find recent news about...',
+ t('Ask a question'),
+ t('Turn this list into bullet points'),
+ t('Write a short product description'),
+ t('Find recent news about...'),
];
useEffect(() => {
if (messagesLength === 0) {
const interval = setInterval(() => {
- setCurrentSuggestionIndex((prev) => (prev + 1) % suggestions.length);
+ setCurrentSuggestionIndex((prev) => {
+ if (prev === suggestions.length - 1) {
+ return suggestions.length;
+ }
+ return prev + 1;
+ });
}, 3000);
return () => clearInterval(interval);
}
}, [messagesLength, suggestions.length]);
+ useEffect(() => {
+ if (currentSuggestionIndex === suggestions.length) {
+ const timeout = setTimeout(() => {
+ setIsResetting(true);
+ setCurrentSuggestionIndex(0);
+ setTimeout(() => setIsResetting(false), 50);
+ }, 500);
+ return () => clearTimeout(timeout);
+ }
+ }, [currentSuggestionIndex, suggestions.length]);
+
+ useEffect(() => {
+ if (textareaRef.current && messagesLength === 0 && status === 'ready') {
+ textareaRef.current.focus();
+ }
+ }, [messagesLength, status]);
+
+ useEffect(() => {
+ if (textareaRef.current && status === 'ready' && !input) {
+ textareaRef.current.focus();
+ }
+ }, [status, input]);
+
return (