> ## Documentation Index
> Fetch the complete documentation index at: https://docs.samplehc.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Document Reasoning

> A screen template for document reasoning tasks and Q&A interactions

export const RegistryPreviewIframe = ({src}) => {
  const [isExpanded, setIsExpanded] = React.useState(false);
  const toggleExpanded = () => {
    setIsExpanded(!isExpanded);
  };
  const content = <>
    <div className="flex h-full w-full items-center justify-center bg-slate-100 text-slate-500">
      The preview only works while connected to the Sample VPN.
    </div>
    <iframe src={src} className="w-full h-full absolute top-0 left-0" style={{
    display: 'none'
  }} onLoad={e => e.target.style.display = 'block'} />
  </>;
  return <>
      {isExpanded && <div className="fixed inset-0 z-50 bg-black bg-opacity-70 flex items-center justify-center p-4" onClick={toggleExpanded}>
          <div className="relative w-full max-w-6xl h-full max-h-[90vh] bg-white rounded-lg shadow-xl overflow-hidden border-2" onClick={e => e.stopPropagation()}>
            <button onClick={toggleExpanded} className="absolute top-4 right-4 z-10 bg-white border border-gray-300 rounded-md p-2 hover:bg-gray-50 transition-colors shadow-sm" title="Exit fullscreen">
              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
              </svg>
            </button>

            {content}
          </div>
        </div>}

      {!isExpanded && <div className="relative w-full h-96 rounded-lg shadow-lg overflow-hidden border-2">
          <button onClick={toggleExpanded} className="absolute top-2 right-2 z-10 bg-white border border-gray-300 rounded-md p-2 hover:bg-gray-50 transition-colors" title="Enter fullscreen">
            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4" />
            </svg>
          </button>

          {content}
        </div>}
    </>;
};

## Installation

Install the screen template by running the following command:

```bash theme={null}
npx shadcn add https://registry.samplehc.com/r/legacy-document-reasoning.json
```

The screen file will be added at `screens/legacy-document-reasoning-screen.tsx`.

## Usage

### Required Props

| Name       | Type     | Description                                                                                                         |
| ---------- | -------- | ------------------------------------------------------------------------------------------------------------------- |
| `resultId` | `string` | The async result ID returned from a [document reasoning API call](/api-reference/document/document-reasoning-async) |

### Example

```python workflow.py theme={null}
from workflows_py.workflow import ScreenStep, Step, Workflow
from client_manager import SampleHealthcareClient

workflow = Workflow(...)

def reason_document(ctx):
    client = SampleHealthcareClient()
    document = ctx.get_step_result("document-upload")["document"]
    response = client.v2.documents.legacy.reason(
        documents=[{"id": document["id"], "fileName": document["fileName"]}],
        task={
            "id": "reasoning-task-1",
            "description": "Extract key medical information from the document",
            "label": "Medical Information Extraction",
            "type": "reasoning"
        }
    )
    return response.async_result_id

workflow.then(
  # See: Document Upload Screen template
  ScreenStep( 
    "document-upload",
    screen_path="./screens/document-upload-screen.tsx",
  )
).then(
  Step(
    "reason-document",
    reason_document,
  )
)
.then(
    ScreenStep(
        "document-reasoning",
        screen_path="./screens/legacy-document-reasoning-screen.tsx",
        get_props=lambda ctx: {"resultId": ctx.get_step_result("reason-document")},
    )
)
```

### Returns

The screen returns comprehensive information about the reasoning tasks and their answers:

| Name                       | Type     | Description                                                |
| -------------------------- | -------- | ---------------------------------------------------------- |
| `tasks`                    | `array`  | Array of task objects that were processed                  |
| `initial_answers`          | `array`  | Array of initial answers generated by the AI for each task |
| `initial_answers[].answer` | `object` | Rich text content of the initial AI-generated answer       |
| `final_answers`            | `array`  | Array of final answers after user review and editing       |
| `final_answers[].answer`   | `object` | Rich text content of the final user-reviewed answer        |

### Preview

<RegistryPreviewIframe src="https://registry.samplehc.com/screens/legacy-document-reasoning" />