Update dependencies and styles in package.json, displayTextResult.tsx…

package.json

@@ -47,9 +47,12 @@
  },
  "license": "MIT",
  "dependencies": {
+ "@radix-ui/react-dialog": "^1.0.5",
+ "@radix-ui/react-popover": "^1.0.7",
  "@radix-ui/react-slot": "^1.0.2",
  "class-variance-authority": "^0.7.0",
  "clsx": "^2.1.0",
+ "cmdk": "^0.2.0",
  "electron-screenshots": "^0.5.26",
  "electron-squirrel-startup": "^1.0.0",
  "lucide-react": "^0.363.0",

src/renderer/App.css

@@ -35,4 +35,34 @@
  to {
  transform: rotate(360deg);
  }
+}
+
+/* width */
+::-webkit-scrollbar {
+ height: 1rem;
+ width: .5rem;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+ background-color: transparent;
+ border-radius: 999px;
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+ background-color: hsla(0, 0%, 100%, 0); 
+ background: #888; 
+ border-color: rgba(255,255,255, 1);
+ border-radius: 999px;
+ border-width: 1px;
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+ background: #555; 
+}
+
+::-webkit-resizer{ 
+ background-color: #000000;
 }

src/renderer/App.tsx

@@ -5,7 +5,8 @@ import gemini from './models/gemini';
 import logo from './assets/logo.png';
 import DisplayTextResult from './components/displayTextResult';
 import LoadingSkeleton from './components/loadingSkeleton';
-
+import { Badge } from "./components/ui/badge"
+import ModelSelect from './components/modelSelect';
 declare global {
  interface Window {
  electronAPI: any;
@@ -23,6 +24,9 @@ function App() {
  console.log("handleTextChange", text)
  setResult(text)
  }
+ const handleModelChange = (value: string) => {
+ console.log('handleModelChange', value);
+ }
  // window.electronAPI.onScreenShotRes((value:string) => {
  // console.log('onScreenShotRes', value);
  // setscreenShotResult(value);
@@ -61,14 +65,29 @@ function App() {
 
  return (
  <div className="App dark">
- <header className="App-header">
+
+ <header className="App-header relative">
+ <div className="flex h-8 px-4 md:px-6 w-full shrink-0 absolute top-[0.5rem] right-0">
+ <div className="hidden sm:flex" >
+ <span className="sr-only">Snippai</span>
+ </div>
+ <div className="ml-auto space-x-4 flex text-white">
+ <ModelSelect handleModelChange={handleModelChange} />
+ </div>
+ </div>
  {/* <!-- if no screenshot result, show the logo --> */}
  {!screenShotResult && <img src={logo} className="App-logo" alt="logo" />}
- <p className="mb-2">
+ {!screenShotResult &&<p className="mb-2">
  Press <code>{shortcut}</code> to make a screenshot.
- </p>
+ </p>}
  {/* <!-- if has screenshot result, show the result --> */}
- {screenShotResult && <img src={`data:image/png;base64,${screenShotResult}`} alt="screenshot" className="max-w-full mb-2" />}
+ {screenShotResult && <Badge variant="secondary"
+ className='mb-2 antialiased font-medium'
+ >
+ <ImageIcon className="w-5 h-5 mr-1" />
+ Screenshot</Badge> }
+
+ {screenShotResult && <img src={`data:image/png;base64,${screenShotResult}`} alt="screenshot" className="max-w-[90%] mb-2 rounded-lg object-center border border-gray-100 dark:border-gray-800" />}
  <div>
  {/* {result && <p>{result}</p>} */}
  </div>
@@ -77,6 +96,13 @@ function App() {
  }
  }>Copy</button>} */}
  {loading && <LoadingSkeleton /> }
+ {result && 
+ <Badge variant="secondary"
+ className='mb-2 antialiased font-medium'
+ >
+ <FileIcon className="w-5 h-5 mr-1" />
+ Result</Badge>
+ }
  {result &&
  <DisplayTextResult text={result} onTextChange={handleTextChange} />
  }
@@ -86,5 +112,45 @@ function App() {
  </div>
  );
 }
+function ImageIcon(props:React.SVGProps<SVGSVGElement>) {
+ return (
+ <svg
+ {...props}
+ xmlns="http://www.w3.org/2000/svg"
+ width="24"
+ height="24"
+ viewBox="0 0 24 24"
+ fill="none"
+ stroke="currentColor"
+ strokeWidth="2"
+ strokeLinecap="round"
+ strokeLinejoin="round"
+ >
+ <rect width="18" height="18" x="3" y="3" rx="2" ry="2" />
+ <circle cx="9" cy="9" r="2" />
+ <path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" />
+ </svg>
+ )
+}
+
+function FileIcon(props:React.SVGProps<SVGSVGElement>) {
+ return (
+ <svg
+ {...props}
+ xmlns="http://www.w3.org/2000/svg"
+ width="24"
+ height="24"
+ viewBox="0 0 24 24"
+ fill="none"
+ stroke="currentColor"
+ strokeWidth="2"
+ strokeLinecap="round"
+ strokeLinejoin="round"
+ >
+ <path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z" />
+ <polyline points="14 2 14 8 20 8" />
+ </svg>
+ )
+}
 
 export default App;

src/renderer/components/displayTextResult.tsx

@@ -20,7 +20,7 @@ export default function displayTextResult(props: { text: string, onTextChange: (
  }, 1000)
  }
  return (
- <div className="grid w-full max-w-lg gap-2 min-h-56 pb-3">
+ <div className="grid w-full max-w-lg gap-2 min-h-60 pb-3">
  {/* <div className="relative"> */}
  <Textarea value={props.text} className="w-full text-lg antialiased font-medium" onChange={handleTextChange} />
  <Button 

src/renderer/components/modelSelect.tsx

@@ -0,0 +1,79 @@
+"use client"
+
+import * as React from "react"
+import { Check, ChevronsUpDown } from "lucide-react"
+
+import { cn } from "../lib/utils"
+import { Button } from "../components/ui/button"
+import {
+ Command,
+ CommandEmpty,
+ CommandGroup,
+ CommandInput,
+ CommandItem,
+} from "../components/ui/command"
+import {
+ Popover,
+ PopoverContent,
+ PopoverTrigger,
+} from "../components/ui/popover"
+
+const models = [
+ {
+ value: "gemini",
+ label: "Google Gemini",
+ },
+ {
+ value: "gpt4",
+ label: "OpenAI GPT-4",
+ },
+]
+
+export default function selectModel(props:{handleModelChange:Function}) {
+ const [open, setOpen] = React.useState(false)
+ const [value, setValue] = React.useState("gemini")
+ props.handleModelChange(value)
+ return (
+ <Popover open={open} onOpenChange={setOpen}>
+ <PopoverTrigger asChild>
+ <Button
+ variant="outline"
+ role="combobox"
+ aria-expanded={open}
+ className="w-[200px] justify-between"
+ >
+ {value
+ ? models.find((model) => model.value === value)?.label
+ : "Select framework..."}
+ <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+ </Button>
+ </PopoverTrigger>
+ <PopoverContent className="w-[200px] p-0 dark">
+ <Command>
+ <CommandInput placeholder="Search model..." />
+ <CommandEmpty>No model found.</CommandEmpty>
+ <CommandGroup>
+ {models.map((model) => (
+ <CommandItem
+ key={model.value}
+ value={model.value}
+ onSelect={(currentValue) => {
+ setValue(currentValue === value ? "" : currentValue)
+ setOpen(false)
+ }}
+ >
+ <Check
+ className={cn(
+ "mr-2 h-4 w-4",
+ value === model.value ? "opacity-100" : "opacity-0"
+ )}
+ />
+ {model.label}
+ </CommandItem>
+ ))}
+ </CommandGroup>
+ </Command>
+ </PopoverContent>
+ </Popover>
+ )
+}

src/renderer/components/ui/badge.tsx

@@ -0,0 +1,36 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "../../../renderer/lib/utils"
+
+const badgeVariants = cva(
+ "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+ {
+ variants: {
+ variant: {
+ default:
+ "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+ secondary:
+ "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+ destructive:
+ "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+ outline: "text-foreground",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ },
+ }
+)
+
+export interface BadgeProps
+ extends React.HTMLAttributes<HTMLDivElement>,
+ VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+ return (
+ <div className={cn(badgeVariants({ variant }), className)} {...props} />
+ )
+}
+
+export { Badge, badgeVariants }