fix: hydration issue and selected model in chat (#568)11-08-fix_hydration_issue_and_selected_model_in_chat

- Fixes the Hydration issue on the model selector
- Add ability to show the Model

1 files changed, 65 insertions, 0 deletions

diff --git a/apps/web/lib/models.tsx b/apps/web/lib/models.tsx
new file mode 100644
index 00000000..06082d5c
--- /dev/null
+++ b/apps/web/lib/models.tsx
@@ -0,0 +1,65 @@
+export const models = [
+	{
+		id: "gpt-5",
+		name: "GPT 5",
+		description: "OpenAI's latest model",
+	},
+	{
+		id: "claude-sonnet-4.5",
+		name: "Claude Sonnet 4.5",
+		description: "Anthropic's advanced model",
+	},
+	{
+		id: "gemini-2.5-pro",
+		name: "Gemini 2.5 Pro",
+		description: "Google's most capable model",
+	},
+] as const
+
+export type ModelId = (typeof models)[number]["id"]
+
+export const modelNames: Record<ModelId, string> = {
+	"gpt-5": "GPT 5",
+	"claude-sonnet-4.5": "Claude Sonnet 4.5",
+	"gemini-2.5-pro": "Gemini 2.5 Pro",
+}
+
+interface ModelIconProps {
+	width?: number
+	height?: number
+	className?: string
+}
+
+export function ModelIcon({
+	width = 24,
+	height = 24,
+	className,
+}: ModelIconProps) {
+	return (
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			width={width}
+			height={height}
+			fill="none"
+			viewBox="0 0 24 24"
+			className={className}
+			aria-label="Model icon"
+		>
+			<title>Model icon</title>
+			<g
+				stroke="currentColor"
+				strokeLinecap="round"
+				strokeLinejoin="round"
+				strokeWidth="1.5"
+				clipPath="url(#clip0_4418_9868)"
+			>
+				<path d="m12.92 2.26 6.51 3.51c.76.41.76 1.58 0 1.99l-6.51 3.51c-.58.31-1.26.31-1.84 0L4.57 7.76c-.76-.41-.76-1.58 0-1.99l6.51-3.51c.58-.31 1.26-.31 1.84 0M3.61 10.13l6.05 3.03c.75.38 1.23 1.15 1.23 1.99v5.72c0 .83-.87 1.36-1.61.99l-6.05-3.03A2.24 2.24 0 0 1 2 16.84v-5.72c0-.83.87-1.36 1.61-.99M20.39 10.13l-6.05 3.03c-.75.38-1.23 1.15-1.23 1.99v5.72c0 .83.87 1.36 1.61.99l6.05-3.03c.75-.38 1.23-1.15 1.23-1.99v-5.72c0-.83.87-1.36-1.61-.99" />
+			</g>
+			<defs>
+				<clipPath id="clip0_4418_9868">
+					<path fill="#fff" d="M0 0h24v24H0z" />
+				</clipPath>
+			</defs>
+		</svg>
+	)
+}