-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
add components to get custom source by website url and copy/paste
- Loading branch information
1 parent
f1b8ab2
commit 1bf978c
Showing
4 changed files
with
242 additions
and
88 deletions.
There are no files selected for viewing
103 changes: 15 additions & 88 deletions
103
app/src/lib/components/custom-source/AddCustomSource.svelte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,94 +1,21 @@ | ||
| <script lang="ts"> | ||
| import { Button } from '../ui/button'; | ||
| import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '../ui/card'; | ||
| import { FileIcon, LinkIcon, Upload, X } from 'lucide-svelte'; | ||
| import cs from 'clsx'; | ||
| import AddCustomSourceForm from './AddCustomSourceForm.svelte'; | ||
| import WebsiteURLSource from './WebsiteURLSource.svelte'; | ||
| import CopyPasteSource from './CopyPasteSource.svelte'; | ||
| let dragActive = false; | ||
| function handleDrag(e: DragEvent) { | ||
| e.preventDefault(); | ||
| e.stopPropagation(); | ||
| if (e.type === 'dragenter' || e.type === 'dragover') { | ||
| dragActive = true; | ||
| } else if (e.type === 'dragleave') { | ||
| dragActive = false; | ||
| } | ||
| } | ||
| function handleDrop(e: DragEvent) { | ||
| e.preventDefault(); | ||
| e.stopPropagation(); | ||
| dragActive = false; | ||
| // Handle file upload here | ||
| } | ||
| let showWebsiteURLForm = false; | ||
| let showCopyPasteForm = false; | ||
| </script> | ||
|
|
||
| <div class="h-full bg-gray-950 pt-2"> | ||
| <Card class="w-full bg-gray-900 border-none"> | ||
| <CardHeader> | ||
| <CardTitle class="text-xl font-normal">Custom source</CardTitle> | ||
| <CardDescription class="text-gray-400 text-base"> | ||
| Let's base Audiora's responses on the information that matters most to you. (E.g., marketing | ||
| plans, research notes, meeting transcripts, etc.) | ||
| </CardDescription> | ||
| </CardHeader> | ||
| <CardContent class="flex w-full flex-col gap-y-4"> | ||
| <div | ||
| role="presentation" | ||
| aria-dropeffect="move" | ||
| on:dragenter={handleDrag} | ||
| on:dragleave={handleDrag} | ||
| on:dragover={handleDrag} | ||
| on:drop={handleDrop} | ||
| class={cs('border-2 border-dashed rounded-xl p-8 text-center', { | ||
| 'border-blue-500 bg-blue-500/10': dragActive, | ||
| 'border-gray-700': !dragActive | ||
| })} | ||
| > | ||
| <div class="flex flex-col items-center gap-4"> | ||
| <div class="h-12 w-12 rounded-full bg-gray-800 flex items-center justify-center"> | ||
| <Upload class="h-6 w-6" /> | ||
| </div> | ||
| <div class="space-y-2"> | ||
| <h3 class="text-xl">Upload sources</h3> | ||
| <p class="text-gray-400"> | ||
| Drag & drop or{' '} | ||
| <button class="text-blue-400 hover:text-blue-300">choose file</button> to upload | ||
| </p> | ||
| </div> | ||
| <p class="text-sm text-gray-500"> | ||
| Supported file types: PDF, .txt, Markdown. (Max size: 1MB) | ||
| </p> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="grid md:grid-cols-2 gap-4"> | ||
| <Button | ||
| variant="outline" | ||
| class="h-auto p-4 flex flex-col items-center gap-2 bg-gray-800/50 border-gray-700 hover:bg-gray-800" | ||
| > | ||
| <div class="flex items-center gap-2 text-gray-300"> | ||
| <LinkIcon class="h-4 w-4" /> | ||
| <span>Link</span> | ||
| </div> | ||
| <div class="flex gap-2 text-sm text-blue-400"> | ||
| <span>Website (including .pdf)</span> | ||
| </div> | ||
| </Button> | ||
|
|
||
| <Button | ||
| variant="outline" | ||
| class="h-auto p-4 flex flex-col items-center gap-2 bg-gray-800/50 border-gray-700 hover:bg-gray-800" | ||
| > | ||
| <div class="flex items-center gap-2 text-gray-300"> | ||
| <FileIcon class="h-4 w-4" /> | ||
| <span>Paste text</span> | ||
| </div> | ||
| <span class="text-sm text-blue-400">Copied text</span> | ||
| </Button> | ||
| </div> | ||
| </CardContent> | ||
| </Card> | ||
| {#if !showWebsiteURLForm && !showCopyPasteForm} | ||
| <AddCustomSourceForm | ||
| on:useWebsiteURL={() => (showWebsiteURLForm = true)} | ||
| on:useCopyPaste={() => (showCopyPasteForm = true)} | ||
| /> | ||
| {:else if showWebsiteURLForm} | ||
| <WebsiteURLSource on:closeWebsiteURL={() => (showWebsiteURLForm = false)} /> | ||
| {:else if showCopyPasteForm} | ||
| <CopyPasteSource on:closeCopyPaste={() => (showCopyPasteForm = false)} /> | ||
| {/if} | ||
| </div> |
100 changes: 100 additions & 0 deletions
100
app/src/lib/components/custom-source/AddCustomSourceForm.svelte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,100 @@ | ||
| <script lang="ts"> | ||
| import { createEventDispatcher } from 'svelte'; | ||
| import { Button } from '../ui/button'; | ||
| import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '../ui/card'; | ||
| import { FileIcon, LinkIcon, Upload, X } from 'lucide-svelte'; | ||
| import cs from 'clsx'; | ||
| const dispatch = createEventDispatcher<{ | ||
| useWebsiteURL: void; | ||
| useCopyPaste: void; | ||
| }>(); | ||
| let dragActive = false; | ||
| function handleDrag(e: DragEvent) { | ||
| e.preventDefault(); | ||
| e.stopPropagation(); | ||
| if (e.type === 'dragenter' || e.type === 'dragover') { | ||
| dragActive = true; | ||
| } else if (e.type === 'dragleave') { | ||
| dragActive = false; | ||
| } | ||
| } | ||
| function handleDrop(e: DragEvent) { | ||
| e.preventDefault(); | ||
| e.stopPropagation(); | ||
| dragActive = false; | ||
| // Handle file upload here | ||
| } | ||
| </script> | ||
|
|
||
| <Card class="w-full bg-gray-900 border-none"> | ||
| <CardHeader> | ||
| <CardTitle class="text-xl font-normal">Custom source</CardTitle> | ||
| <CardDescription class="text-gray-400 text-base"> | ||
| Let's base Audiora's responses on the information that matters most to you. (E.g., marketing | ||
| plans, research notes, meeting transcripts, etc.) | ||
| </CardDescription> | ||
| </CardHeader> | ||
| <CardContent class="flex w-full flex-col gap-y-4"> | ||
| <div | ||
| role="presentation" | ||
| aria-dropeffect="move" | ||
| on:dragenter={handleDrag} | ||
| on:dragleave={handleDrag} | ||
| on:dragover={handleDrag} | ||
| on:drop={handleDrop} | ||
| class={cs('border-2 border-dashed rounded-xl p-8 text-center', { | ||
| 'border-blue-500 bg-blue-500/10': dragActive, | ||
| 'border-gray-700': !dragActive | ||
| })} | ||
| > | ||
| <div class="flex flex-col items-center gap-4"> | ||
| <div class="h-12 w-12 rounded-full bg-gray-800 flex items-center justify-center"> | ||
| <Upload class="h-6 w-6" /> | ||
| </div> | ||
| <div class="space-y-2"> | ||
| <h3 class="text-xl">Upload sources</h3> | ||
| <p class="text-gray-400"> | ||
| Drag & drop or{' '} | ||
| <button class="text-blue-400 hover:text-blue-300">choose file</button> to upload | ||
| </p> | ||
| </div> | ||
| <p class="text-sm text-gray-500"> | ||
| Supported file types: PDF, .txt, Markdown. (Max size: 1MB) | ||
| </p> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="grid md:grid-cols-2 gap-4"> | ||
| <Button | ||
| variant="outline" | ||
| class="h-auto p-4 flex flex-col items-center gap-2 bg-gray-800/50 border-gray-700 hover:bg-gray-800" | ||
| on:click={() => dispatch('useWebsiteURL')} | ||
| > | ||
| <div class="flex items-center gap-2 text-gray-300"> | ||
| <LinkIcon class="h-4 w-4" /> | ||
| <span>Website URL</span> | ||
| </div> | ||
| <div class="flex gap-2 text-sm text-blue-400"> | ||
| <span>including .pdf</span> | ||
| </div> | ||
| </Button> | ||
|
|
||
| <Button | ||
| variant="outline" | ||
| class="h-auto p-4 flex flex-col items-center gap-2 bg-gray-800/50 border-gray-700 hover:bg-gray-800" | ||
| on:click={() => dispatch('useCopyPaste')} | ||
| > | ||
| <div class="flex items-center gap-2 text-gray-300"> | ||
| <FileIcon class="h-4 w-4" /> | ||
| <span>Paste text</span> | ||
| </div> | ||
| <span class="text-sm text-blue-400">Copied text</span> | ||
| </Button> | ||
| </div> | ||
| </CardContent> | ||
| </Card> |
65 changes: 65 additions & 0 deletions
65
app/src/lib/components/custom-source/CopyPasteSource.svelte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,65 @@ | ||
| <script lang="ts"> | ||
| import { createEventDispatcher } from 'svelte'; | ||
| import { ArrowLeft, X, MessageCircle } from 'lucide-svelte'; | ||
| import { Button } from '../ui/button'; | ||
| import { Card, CardContent, CardHeader } from '../ui/card'; | ||
| import { Textarea } from '../ui/textarea'; | ||
| import { Input } from '../ui/input'; | ||
| const dispatch = createEventDispatcher<{ closeCopyPaste: void }>(); | ||
| </script> | ||
|
|
||
| <Card class="max-w-2xl mx-auto bg-gray-900 border-gray-800"> | ||
| <CardHeader> | ||
| <div class="flex items-center justify-between"> | ||
| <div class="flex items-center gap-2"> | ||
| <Button | ||
| variant="ghost" | ||
| size="icon" | ||
| class="text-gray-400 hover:text-white" | ||
| on:click={() => dispatch('closeCopyPaste')} | ||
| > | ||
| <ArrowLeft class="h-5 w-5" /> | ||
| </Button> | ||
| <h1 class="text-2xl font-normal">Paste copied text</h1> | ||
| </div> | ||
| <Button | ||
| variant="ghost" | ||
| size="icon" | ||
| class="text-gray-400 hover:text-white" | ||
| on:click={() => dispatch('closeCopyPaste')} | ||
| > | ||
| <X class="h-5 w-5" /> | ||
| </Button> | ||
| </div> | ||
|
|
||
| <p class="text-gray-400">Paste your copied text below to upload as a source</p> | ||
| </CardHeader> | ||
|
|
||
| <CardContent class="flex flex-col gap-y-4"> | ||
| <div class="flex flex-col gap-y-2"> | ||
| <label for="url" class="text-blue-400">Paste Text here*</label> | ||
|
|
||
| <div class="relative"> | ||
| <Textarea | ||
| id="text" | ||
| class="min-h-56 ring-0 focus:ring-0 focus-visible:ring-0 text-base bg-gray-900 border-blue-400/50 focus:border-blue-400 text-white resize-none" | ||
| placeholder="" | ||
| /> | ||
| <div class="absolute bottom-3 right-3 flex items-center gap-1"> | ||
| <Button | ||
| variant="ghost" | ||
| size="icon" | ||
| class="h-8 w-8 rounded-full bg-gray-800 hover:bg-gray-700" | ||
| > | ||
| <MessageCircle class="h-4 w-4" /> | ||
| </Button> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="flex justify-end"> | ||
| <Button class="bg-blue-500 text-base px-8 text-blue-100 hover:bg-blue-600">Insert</Button> | ||
| </div> | ||
| </div></CardContent | ||
| > | ||
| </Card> |
62 changes: 62 additions & 0 deletions
62
app/src/lib/components/custom-source/WebsiteURLSource.svelte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,62 @@ | ||
| <script lang="ts"> | ||
| import { createEventDispatcher } from 'svelte'; | ||
| import { ArrowLeft, X } from 'lucide-svelte'; | ||
| import { Button } from '../ui/button'; | ||
| import { Card, CardContent, CardHeader } from '../ui/card'; | ||
| import { Input } from '../ui/input'; | ||
| const dispatch = createEventDispatcher<{ closeWebsiteURL: void }>(); | ||
| </script> | ||
|
|
||
| <Card class="max-w-2xl mx-auto bg-gray-900 border-gray-800"> | ||
| <CardHeader> | ||
| <div class="flex items-center justify-between"> | ||
| <div class="flex items-center gap-2"> | ||
| <Button | ||
| variant="ghost" | ||
| size="icon" | ||
| class="text-gray-400 hover:text-white" | ||
| on:click={() => dispatch('closeWebsiteURL')} | ||
| > | ||
| <ArrowLeft class="h-5 w-5" /> | ||
| </Button> | ||
| <h1 class="text-2xl font-normal">Website URL</h1> | ||
| </div> | ||
| <Button | ||
| variant="ghost" | ||
| size="icon" | ||
| class="text-gray-400 hover:text-white" | ||
| on:click={() => dispatch('closeWebsiteURL')} | ||
| > | ||
| <X class="h-5 w-5" /> | ||
| </Button> | ||
| </div> | ||
|
|
||
| <p class="text-gray-400">Paste in a Web Link below to upload as a source</p> | ||
| </CardHeader> | ||
|
|
||
| <CardContent class="flex flex-col gap-y-4"> | ||
| <div class="flex flex-col gap-y-2"> | ||
| <label for="url" class="text-blue-400">Paste URL*</label> | ||
| <Input | ||
| id="url" | ||
| placeholder="https://" | ||
| class="bg-gray-900 focus:ring-0 focus-visible:ring-0 border-blue-400 text-white placeholder:text-gray-600" | ||
| /> | ||
| </div> | ||
|
|
||
| <div class="flex flex-col gap-y-2"> | ||
| <div class="font-medium text-xl">Notes</div> | ||
| <ul class="list-disc list-inside space-y-1 text-gray-400"> | ||
| <li>Only the visible text on the website will be imported at this moment</li> | ||
| <li>Content behind paywalls are not supported</li> | ||
| <li>Content requiring authentication are not supported</li> | ||
| <li>Supports .pdf url</li> | ||
| </ul> | ||
| </div> | ||
|
|
||
| <div class="flex justify-end"> | ||
| <Button class="bg-blue-500 text-base px-8 text-blue-100 hover:bg-blue-600">Insert</Button> | ||
| </div> | ||
| </CardContent> | ||
| </Card> |