feat: Enhance query input functionality

apps/cf-ai-backend/package.json

@@ -13,6 +13,7 @@
 	"license": "MIT",
 	"dependencies": {
 		"@hono/zod-validator": "^0.2.1",
+		"drizzle-orm": "0.30.0",
 		"hono": "^4.5.1",
 		"honox": "^0.1.23",
 		"vite": "^5.3.5"

apps/extension/extension-env.d.ts

@@ -1,9 +1,9 @@
-// Required extension-create types for TypeScript projects.
-// This file auto-generated and should not be excluded.
-// If you need extra types, consider creating a new *.d.ts and
-// referencing it in the "include" array in your tsconfig.json file.
-// See https://www.typescriptlang.org/tsconfig#include for info.
-/// <reference types="@extension-create/develop/dist/types/index.d.ts" />
+// Required Extension.js types for TypeScript projects.
+// This file is auto-generated and should not be excluded.
+// If you need additional types, consider creating a new *.d.ts file and
+// referencing it in the "include" array of your tsconfig.json file.
+// See https://www.typescriptlang.org/tsconfig#include for more information.
+/// <reference types="extension/dist/types/index.d.ts" />
 
 // Polyfill types for browser.* APIs.
-/// <reference types="@extension-create/develop/dist/types/polyfill.d.ts" />
+/// <reference types="extension/dist/types/polyfill.d.ts" />

apps/web/app/(dash)/home/queryinput.tsx

@@ -1,12 +1,13 @@
 "use client";
 
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState,useRef } from "react";
 import { FilterSpaces } from "./filterSpaces";
 import { ArrowRightIcon } from "@repo/ui/icons";
 import Image from "next/image";
 import { Switch } from "@repo/ui/shadcn/switch";
 import { Label } from "@repo/ui/shadcn/label";
 
+
 function QueryInput({
 	initialSpaces,
 	handleSubmit,
@@ -32,6 +33,15 @@ function QueryInput({
 		{ id: number; name: string }[]
 	>([]);
 
+	const divRef=useRef<HTMLDivElement>(null)
+
+
+	const handleInput = () => {
+		if (divRef.current) {
+		  setQuery((divRef.current.textContent || ''));
+ 		}
+	  };
+
 	return (
 		<div className={`w-full`}>
 			<div
@@ -47,13 +57,11 @@ function QueryInput({
 						setQuery("");
 					}}
 				>
-					<textarea
+					<div
+					    contentEditable={true}
 						autoFocus
-						name="q"
-						cols={30}
-						rows={3}
-						className={`bg-transparent text-lg placeholder:text-[#9B9B9B] text-gray-200 tracking-[3%] outline-none resize-none w-full py-4 px-4 h-32 transition-[height] ${query.length > 0 && "h-40"}`}
-						placeholder="Ask your second brain..."
+						ref={divRef}
+						className={`bg-transparent text-lg placeholder:text-[#9B9B9B] text-gray-200 tracking-[3%] outline-none resize-none w-full py-4 px-4 h-32 transition-[height] overflow-y-auto ${query.length > 0 && "h-40"}`}
 						onKeyDown={(e) => {
 							if (e.key === "Enter" && !e.shiftKey) {
 								e.preventDefault();
@@ -63,10 +71,18 @@ function QueryInput({
 								handleSubmit(query, selectedSpaces, proMode);
 								setQuery("");
 							}
-						}}
-						onChange={(e) => setQuery(e.target.value)}
-						value={query}
-					/>
+						}} 
+ 						onInput={handleInput}
+
+					> 
+					</div>
+					{ query.length===0 &&	<span
+                className=" relative bottom-28 left-4 text-lg text-gray-400 pointer-events-none"
+                style={{ userSelect: "none" }}
+            >
+                Ask your second brain...
+            </span>}
+
 					<div className="flex p-2 px-3 w-full items-center justify-between rounded-xl overflow-hidden">
 						<FilterSpaces
 							selectedSpaces={selectedSpaces}

apps/web/package.json

@@ -34,6 +34,7 @@
 		"cmdk": "^1.0.0",
 		"drizzle-orm": "0.30.0",
 		"lowlight": "^3.1.0",
+		"marked": "^14.1.0",
 		"million": "^3.1.11",
 		"next": "^14.2.5",
 		"next-pwa": "^5.6.0",