mirror of
https://github.com/temetro/temetro.git
synced 2026-08-18 06:13:14 +00:00
Khalid Abdi
d237504af9
Add three UI locales (so/ar/de) with full ~1,660-key translations alongside en/fr, selectable in Settings → Profile. Arabic gets full right-to-left support: - config.ts registers the locales and exports a `dirFor` helper; an inline <head> script in layout.tsx sets <html dir/lang> before first paint (no RTL flash), and i18n-provider keeps them in sync on language change. - ~160 physical direction utilities converted to logical (ms/me/ps/pe/ start/end/text-start/text-end); directional chevrons/arrows get rtl:rotate-180; chat-bubble align variants fixed to logical. - IBM Plex Sans Arabic appended to the sans/heading font stacks for per-character Arabic fallback. - Language persists to the backend user_settings and re-applies on sign-in so it roams across devices (localStorage stays the offline source of truth). - New scripts/check-locales.mjs (npm run check-locales) enforces key/placeholder parity and Arabic CLDR plural completeness. Bump to 0.3.0. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
72 lines
2.4 KiB
TypeScript
72 lines
2.4 KiB
TypeScript
"use client";
|
|
|
|
import { Sparkles, X } from "lucide-react";
|
|
import Link from "next/link";
|
|
import { useEffect, useState } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import { getAiConfig } from "@/lib/ai-settings";
|
|
|
|
// A single, dismissible heads-up shown above the chat input on a fresh chat when
|
|
// no AI provider is configured yet (no API key, and no local Ollama). It only
|
|
// renders on the empty state, so it naturally disappears once a message is sent.
|
|
export function AiSetupNotice() {
|
|
const { t } = useTranslation();
|
|
const [needsSetup, setNeedsSetup] = useState(false);
|
|
const [dismissed, setDismissed] = useState(false);
|
|
|
|
useEffect(() => {
|
|
let active = true;
|
|
getAiConfig()
|
|
.then((cfg) => {
|
|
if (!active) return;
|
|
// Configured = an API key for any provider, or a local Ollama endpoint.
|
|
const hasApiKey = Object.values(cfg.apiKeySet).some(Boolean);
|
|
const hasLocal =
|
|
cfg.mode === "local" && cfg.ollamaBaseUrl.trim().length > 0;
|
|
setNeedsSetup(!(hasApiKey || hasLocal));
|
|
})
|
|
.catch(() => {
|
|
// If we can't read the config, don't nag — the chat still works.
|
|
if (active) setNeedsSetup(false);
|
|
});
|
|
return () => {
|
|
active = false;
|
|
};
|
|
}, []);
|
|
|
|
if (!needsSetup || dismissed) return null;
|
|
|
|
return (
|
|
<div
|
|
className="flex w-full items-start gap-3 rounded-2xl border border-info/30 bg-info/8 px-4 py-3 text-sm dark:bg-info/12"
|
|
role="status"
|
|
>
|
|
<Sparkles className="mt-0.5 size-4 shrink-0 text-info-foreground" />
|
|
<div className="flex-1 space-y-0.5">
|
|
<p className="font-medium text-foreground">
|
|
{t("chat.setupNotice.title")}
|
|
</p>
|
|
<p className="text-muted-foreground">{t("chat.setupNotice.body")}</p>
|
|
<Button
|
|
className="mt-1 px-0 text-info-foreground"
|
|
render={<Link href="/settings?tab=ai" />}
|
|
size="sm"
|
|
variant="link"
|
|
>
|
|
{t("chat.setupNotice.action")}
|
|
</Button>
|
|
</div>
|
|
<button
|
|
aria-label={t("chat.setupNotice.dismiss")}
|
|
className="-me-1 shrink-0 rounded-md p-1 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
|
|
onClick={() => setDismissed(true)}
|
|
type="button"
|
|
>
|
|
<X className="size-4" />
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|